移动端横屏的JS代码(beta)

2019-11-20 10:02:58

字体：大中小

来源：转载

供稿：网友

废话不多说了，直接给大家贴代码了

具体代码如下所示：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>Document</title></head><script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script><script>var orientation=0;function screenOrientationEvent(){if(orientation == 0){document.getElementById("change").value="竖";$("body").css({'transform':'rotate(90deg)','-webkit-transform':'rotate(90deg)','-moz-transform':'rotate(90deg)'});}else{document.getElementById("change").value="横";$("body").css({'transform':'rotate(0deg)','-webkit-transform':'rotate(0deg)','-moz-transform':'rotate(0deg)'});}}var innerWidthTmp = window.innerWidth;//横竖屏事件监听方法function screenOrientationListener(){try{var iw = window.innerWidth;//屏幕方向改变处理if(iw != innerWidthTmp){if(iw>window.innerHeight){orientation = 90;}else{orientation = 0;}//调用转屏事件screenOrientationEvent();innerWidthTmp = iw;}}catch(e){alert(e);};//间隔固定事件检查是否转屏，默认500毫秒setTimeout("screenOrientationListener()",500);}//启动横竖屏事件监听screenOrientationListener();</script><body onload="screenOrientationEvent()"><input id="change" type="text" value=""/></body></html>

以上js代码是实现移动端横屏的核心代码，代码简单易懂，所有没给大家附太多的注释，如果大家哪里有不明白的地方欢迎给我留言，小编会及时回复大家的，在此也非常感谢大家对武林网网站的支持！

上一篇：Bootstrap所支持的表单控件实例详解

下一篇：js实现带农历和八字等信息的日历特效