隨著移動互聯網的不斷發展和普及，各行業的手機應用也在不斷涌現。而手機應用的一個重要問題就是頁面在不同屏幕上的展示問題。為此，HTML5提供了“強制橫屏”設置，可以使應用在橫屏狀態下呈現，從而獲得更好的展示效果。

// CSS樣式
@media screen and (orientation: portrait) {
body {
transform:rotateZ(-90deg); /* 逆時針旋轉90度 */
transform-origin: 100% 0; /* 改變旋轉的基點 */
width: 100vh; /* 修改寬度 */
height: 100vw; /* 修改高度 */
overflow-x: hidden; /* 隱藏橫向滾動條 */
position: absolute; /* 使頁面上下左右與屏幕對齊 */
top: 100%; /* 垂直向下 */
left: 0; /* 水平居中 */
margin-left: 0; /* 去除左側留白 */
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樣式使用媒體查詢的方式對不同方向的屏幕進行區分，并對頁面進行旋轉、調節寬高、滾動條、位置等設置。而JS代碼則通過監聽屏幕方向的變化，根據方向變化動態添加或刪除橫屏屬性。使用以上代碼，我們可以實現Html強制橫屏設置。