隨著移動互聯(lián)網(wǎng)的不斷發(fā)展和普及，各行業(yè)的手機(jī)應(yīng)用也在不斷涌現(xiàn)。而手機(jī)應(yīng)用的一個重要問題就是頁面在不同屏幕上的展示問題。為此，HTML5提供了“強(qiáng)制橫屏”設(shè)置，可以使應(yīng)用在橫屏狀態(tài)下呈現(xiàn)，從而獲得更好的展示效果。

// CSS樣式
@media screen and (orientation: portrait) {
body {
transform:rotateZ(-90deg); /* 逆時針旋轉(zhuǎn)90度 */
transform-origin: 100% 0; /* 改變旋轉(zhuǎn)的基點 */
width: 100vh; /* 修改寬度 */
height: 100vw; /* 修改高度 */
overflow-x: hidden; /* 隱藏橫向滾動條 */
position: absolute; /* 使頁面上下左右與屏幕對齊 */
top: 100%; /* 垂直向下 */
left: 0; /* 水平居中 */
margin-left: 0; /* 去除左側(cè)留白 */
margin-top: -100vw; /* 上方留出屏幕寬度 */
}
}
// JS代碼
window.addEventListener("orientationchange", function() {
var body = document.getElementsByTagName("body")[0];
if (window.orientation == 90 || window.orientation == -90) {
body.setAttribute("class", "landscape");
} else {
body.removeAttribute("class");
}
}, false);

如上代碼中，CSS樣式使用媒體查詢的方式對不同方向的屏幕進(jìn)行區(qū)分，并對頁面進(jìn)行旋轉(zhuǎn)、調(diào)節(jié)寬高、滾動條、位置等設(shè)置。而JS代碼則通過監(jiān)聽屏幕方向的變化，根據(jù)方向變化動態(tài)添加或刪除橫屏屬性。使用以上代碼，我們可以實現(xiàn)Html強(qiáng)制橫屏設(shè)置。