javascript - 手机横屏自适应怎么写
本文介绍了javascript - 手机横屏自适应怎么写的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
问 题
手机横屏自适应怎么书写
解决方案
这里提供一下如何判断横屏竖屏:
CSS:
@media (orientation: portrait) { } 横屏
@media (orientation: landscape) { }竖屏
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css">横屏
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css">竖屏
JavaScript:
//判断手机横竖屏状态:
function hengshuping(){
if(window.orientation==180||window.orientation==0){
alert("竖屏状态!")
}
if(window.orientation==90||window.orientation==-90){
alert("横屏状态!")
}
}
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);
//移动端的浏览器一般都支持window.orientation这个参数,通过这个参数可以判断出手机是处在横屏还是竖屏状态。
从而根据实际需求而执行相应的程序。通过添加监听事件onorientationchange,进行执行就可以了。
关于自适应,参考:
这篇关于javascript - 手机横屏自适应怎么写的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文