今天一个同事让帮忙改动一个h5，直接打开h5就进入横屏模式，研究了下，有个骚操作，废话不多说直接上代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
#content {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#myiframe{
position: absolute;
left: 0;
top: 0;
border: none;
width: 100% !important;
height: 100% !important;
z-index: 1800;
}
</style>
</head>
<body>
<div id="content">
<iframe src="http://www.baidu.com" id="myiframe" scrolling="no" onload="changeFrameHeight()" frameborder="0"></iframe>
</div>
<script>
function changeFrameHeight() {
var ifm = document.getElementById("myiframe");
ifm.height = document.documentElement.clientHeight;
}
window.onresize = function () {
changeFrameHeight();
}
// 利用 CSS3 旋转 对根容器逆时针旋转 90 度
var detectOrient = function () {
var width = document.documentElement.clientWidth,
height = document.documentElement.clientHeight,
$wrapper = document.getElementById("content"),
style = "";
if (width >= height) { // 横屏
style += "width:" + width + "px;"; // 注意旋转后的宽高切换
style += "height:" + height + "px;";
style += "-webkit-transform: rotate(0); transform: rotate(0);";
style += "-webkit-transform-origin: 0 0;";
style += "transform-origin: 0 0;";
console.log(1)
}
else { // 竖屏
style += "width:" + height + "px;";
style += "height:" + width + "px;";
style += "-webkit-transform: rotate(90deg); transform: rotate(90deg);";
// 注意旋转中点的处理
style += "-webkit-transform-origin: " + width / 2 + "px " + width / 2 + "px;";
style += "transform-origin: " + width / 2 + "px " + width / 2 + "px;";
console.log(2)
}
$wrapper.style.cssText = style;
}
window.onresize = detectOrient;
detectOrient();
</script>
</body>
</html>
效果图
正常横屏显示
image.png
竖屏显示横屏样式
image.png
总结：使用这种可以轻易的实现横屏适配，调试的页面较少，以上可能还有其他的bug
网友评论