HTML5判断移动端横屏竖屏功能

来源：互联网发布：网络服务器机柜回收编辑：程序博客网时间：2024/06/08 09:09

用CSS判断横屏竖屏问题：

</pre></p><p><pre name="code" class="html" style="font-weight: bold;">@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，进行执行就可以了。

0 0