在做移动端页面的时候经常会遇到需要判断横屏还是竖屏。下面将目前已知的通过HTML, CSS, javascript三种判断方法记录下来,方便以后翻阅。
<强> 1,通过在html中分别引用横屏和竖屏的样式:
& lt;链接rel="样式表“媒体=八泻?方向:肖像)“href=" https://www.yisu.com/zixun/portrait.css " rel=巴獠縩ofollow”比;//引用竖屏的CSS
& lt;链接rel="样式表“媒体=八泻?方向:景观)“href=" https://www.yisu.com/zixun/landscape.css " rel=巴獠縩ofollow”比;//引用横屏的CSS
之前
<强> 2,CSS中通过媒体查询的方法来判断:
@media(方向:肖像){//竖屏CSS
}
@media(方向:景观){//横屏CSS
}
<强> 3,js判断是否为横屏竖屏:
窗口。addEventListener (“onorientationchange”窗口& # 63;orientationchange”:“调整”,函数(){
如果窗口。取向===180 | |窗口。取向===0){
alert('竖屏状态!”);
}
如果窗口。取向===90 | |窗口。取向===-90){
alert('横屏状态!”);
}
},假);
只要用户改变了设备的查看模式,就会触发onorientationchange事件。
取向有4个值:0,90,-90180
值为0和180的时候为竖屏(180为倒过来的竖屏),
90和-90时为横屏(-90为倒过来的竖屏模式),
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持!
