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

前端技术 2023/09/04 JavaScript

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

具体代码如下所示：

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

本文地址：https://www.stayed.cn/item/10982

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案