HTML5 自動旋轉代碼 HTML5 在移動設備上的支持非常出色，其中之一就是增加了自動旋轉的功能。這種功能可以確保您的網站或應用程序始終以正確的方向呈現，即使用戶旋轉設備。 在 HTML5 中，可以使用如下代碼實現自動旋轉： ```

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<!-- 自動旋轉 -->
<script>
if (screen.width < 801) { //根據設備屏幕大小判斷是否啟用自動旋轉
if (window.matchMedia("(orientation: portrait)").matches) {
//如果為縱向，則自動切換為橫向
document.documentElement.style.transform = 'rotate(90deg)';
document.documentElement.style.width = '100vh';
document.documentElement.style.height = '100vw';
document.documentElement.style.overflow = 'hidden';
document.documentElement.style.position = 'absolute';
document.documentElement.style.top = '100%';
document.documentElement.style.left = '0';
}
//監聽設備旋轉事件
window.addEventListener("orientationchange", function() {
switch (window.orientation) {
case 0: //縱向
document.documentElement.style.transform = 'rotate(90deg)';
document.documentElement.style.width = '100vh';
document.documentElement.style.height = '100vw';
document.documentElement.style.overflow = 'hidden';
document.documentElement.style.position = 'absolute';
document.documentElement.style.top = '100%';
document.documentElement.style.left = '0';
break;
case 90: //橫向順時針旋轉90度
document.documentElement.style.transform = 'rotate(0)';
document.documentElement.style.width = '100vw';
document.documentElement.style.height = '100vh';
document.documentElement.style.overflow = 'auto';
document.documentElement.style.position = 'static';
break;
case -90: //橫向逆時針旋轉90度
document.documentElement.style.transform = 'rotate(0)';
document.documentElement.style.width = '100vw';
document.documentElement.style.height = '100vh';
document.documentElement.style.overflow = 'auto';
document.documentElement.style.position = 'static';
break;
}
}, false);
}
</script>

``` 在上述代碼中，我們首先使用 `meta` 標簽來設置視口大小，并禁止用戶縮放。然后使用 `if` 語句判斷設備屏幕是否小于 801 像素，如果小于，則啟用自動旋轉功能。 接下來，我們監聽設備旋轉事件，并根據設備旋轉的角度來修改頁面樣式。如果為縱向，則自動轉換為橫向，如果為橫向，則恢復為縱向。 需要注意的是，如果在頁面中使用了固定的尺寸和位置，那么在自動旋轉時可能會導致布局出現問題。因此，建議在頁面開發時盡量使用相對尺寸和位置，避免出現不必要的問題。 總結 HTML5 自動旋轉功能是一個很好的功能，可以確保您的網站或應用程序在移動設備上始終以正確的方向呈現。通過上述代碼，您可以輕松地實現自動旋轉功能，并為用戶提供更好的使用體驗。