一个H5游戏合集页面，页面游戏合集是竖屏展示，最近在用APP封装时出现问题。
因APP页面固定为横屏，没有做横屏的展示页面，就出现了问题。
解决方案为当用户为竖屏时，展示页面不改变，当用户为横屏页面时，展示页面进行旋转展示页面。
正常竖屏显示：
错误的横屏显示：横屏显示不是想要效果：
具体的实现代码：
首先添加一个全局的DIV标签，包含整个页面：
<body><div id="rotatediv" class="rotate_1">...页面内容...</div></body>
让rotatediv元素能旋转，我们必须为它设置绝对定位，CSS代码如下：
.rotate_1 { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }
通过JS代码来实现网页在手机横屏屏情况下的竖屏展示：
```
<script type="text/javascript">
function IsPC() {
var userAgentInfo = navigator.userAgent;
var Agents = ["Android", "iPhone",
"SymbianOS", "Windows Phone",
"iPad", "iPod"];
var flag = true;
for (var v = 0; v < Agents.length; v++) {
if (userAgentInfo.indexOf(Agents[v]) > 0) {
flag = false;
break;
}
}
return flag;
}
</script>
<script>
var flag = IsPC(); //true为PC端，false为手机端
if(!flag){
var width = document.documentElement.clientWidth;
var height = document.documentElement.clientHeight;
var screen_width = width; //屏幕宽度
if (width > height) {
screen_width = height; //如果 是横屏，灵感的宽度就等于屏高
var contentDOM = document.getElementById('rotatediv');
contentDOM.style.width = height + 'px';
contentDOM.style.height = width + 'px';
contentDOM.style.top = (height - width) / 2 + 'px';
contentDOM.style.left = 0 - (height - width) / 2 + 'px';
contentDOM.style.transform = 'rotate(-90deg)';
}
//根据手机旋转的角度来判断
const evt = "onorientationchange" in window ? "orientationchange" : "resize"; //旋转事件
window.addEventListener(evt, function () { //事件监听
var width2 = document.documentElement.clientWidth;
var height2 = document.documentElement.clientHeight;
if (width2 > height2) { //旋转到 90 或 -90 度，即竖屏到横屏
screen_width = height2; //竖屏，灵感的宽度就等于屏高
var contentDOM2 = document.getElementById('rotatediv');
contentDOM2.style.width = height2 + 'px';
contentDOM2.style.height = width2 + 'px';
contentDOM2.style.top = (height2 - width2) / 2 + 'px';
contentDOM2.style.left = 0 - (height2 - width2) / 2 + 'px';
contentDOM2.style.transform = 'rotate(-90deg)'; //旋转90度
}else{ //旋转到 180 或 0 度，即横屏到竖屏
screen_width = height2; //横屏，灵感的宽度就等于屏高
var contentDOM3 = document.getElementById('rotatediv');
contentDOM3.style.width = '100%';
contentDOM3.style.height = '100%';
contentDOM3.style.top = '0px';
contentDOM3.style.left = '0px';
contentDOM3.style.transform = 'none'; //不旋转；
}
}, false);
}
</script>
```
最后显示结果：
小弟第一次学习记录。写的不好，各位大佬轻喷。谢谢！
整理了下meta标签 默认使用浏览器最高版本和默认使用的内核，强制页面竖屏：
<!-- uc强制竖屏 -->
<metaname="screen-orientation"content="portrait">
<!-- QQ强制竖屏 -->
<metaname="x5-orientation"content="portrait">
<!— 使用浏览器最高版本 -->
<metahttp-equiv="X-UA-Compatible"content="IE=edge,chrome=1">
<!— 强制dpi为320 这样移动端可以直接使用px 但是以后这个属性会移除 能不用就不用吧 --><metaname="viewport"id="viewportid"content="target-densitydpi=320,width=640,user-scalable=no">
<!-- 使用webkit内核 -->
<metaname="renderer"content="webkit">
<!-- 使用IE兼容内核 -->
<metaname="renderer"content="ie-comp">
<!-- 使用IE标准内核 --><metaname="renderer"content="ie-stand">
<!—- 综合写法 浏览器会根据左到右的顺序，使用自己有的内核 -->
<metaname="renderer"content="webkit|ie-comp">
网友评论