在現代移動設備中，禁止橫屏 css 已經成為一種趨勢，這是為了提高用戶體驗和頁面響應速度。橫屏模式為頁面帶來不必要的負擔，導致加載速度變慢。

html {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
-webkit-tap-highlight-color: transparent;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
-webkit-touch-callout: none;
position: relative;
overflow-x: hidden;
height: 100%;
width: 100%;
}
body {
padding: 0;
margin: 0;
font-size: 16px;
-webkit-font-smoothing: antialiased;
height: 100%;
width: 100%;
overflow-x: hidden;
position: relative;
}
@media screen and (orientation: landscape) {
html {
width: 100vh;
font-size: 6vw;
}
body {
height: 100vw;
width: 100vh;
transform-origin: top left;
transform: rotate(-90deg) translateX(-100%);
}
}

上述代碼中，我們使用了 media query 來指定頁面在橫屏模式下的變化。通過設定 html 的尺寸單位為 vh， body 的尺寸單位為 vw，我們可以實現頁面橫向的展示效果。同時通過 transform 屬性將手機屏幕旋轉到 90 度來實現頁面橫向效果，很好地實現了禁止橫屏 css 的效果。

總之，禁止橫屏 css 對于提高頁面響應速度和用戶體驗來說至關重要。通過此方法，我們可以有效減少不必要的頁面負擔和滾動條的出現，提供更好的移動端體驗。