今天一個同事讓幫忙改動一個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 旋轉(zhuǎn) 對根容器逆時針旋轉(zhuǎn) 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;"; // 注意旋轉(zhuǎn)后的寬高切換
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);";
// 注意旋轉(zhuǎn)中點的處理
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
總結(jié)：使用這種可以輕易的實現(xiàn)橫屏適配，調(diào)試的頁面較少，以上可能還有其他的bug
