隨著智慧型手機和平板電腦的普及，越來越多的網站開始設計和開發行動裝置版本。在行動裝置上，有別於桌面電腦，使用者可以隨意調整裝置的方向，也就是橫屏或垂直屏，這也帶來一定的問題。例如，當網站在垂直螢幕模式下顯示時，可能顯示的內容過於狹窄，難以閱讀和操作。而當使用者轉換為橫屏模式時，頁面又可能會因為排版問題，導致一些元素的位置錯亂或顯示不出來。因此，有些開發者希望能在網頁中加入禁止垂直螢幕的功能，讓頁面只在橫屏模式下顯示。這時JavaScript就可以派上用場了。
一、什麼是JavaScript？
JavaScript是一種腳本語言，主要用於開發互聯網前端，即瀏覽器端的互動設計。可以理解為HTML是頁面的結構和內容，CSS是頁面的外觀和樣式，而JavaScript則是頁面的功能和動態效果。透過JavaScript編寫的腳本，可以使頁面實現一些特定的回應和行為，例如驗證表單、彈出框、輪播圖等。
二、如何禁止垂直畫面？
1.使用CSS樣式
一種簡單的方法是使用CSS樣式，可以將頁面的寬度設定為螢幕高度的100%，這樣只有在橫屏模式下才能夠完整地顯示整個頁面，垂直螢幕時則不能顯示全部內容。
<style>
body{
width:100vh;
overflow-x:hidden;
}
</style>其中，vh單位代表視窗高度的1%，此方案只適用於絕對定位元素和串流佈局（Responsive Layout）。但是，這種方法並不能真正禁止設備切換為垂直螢幕模式，使用者仍然可以透過旋轉設備來切換方向。
2.使用媒體查詢
另一種方法是使用CSS3中的@media媒體查詢規則。可設定條件，當裝置高度小於裝置寬度時，新增一個旋轉樣式，將內容自動旋轉90度，使頁面一直處於橫屏模式。這樣使用者無論怎麼旋轉設備，頁面始終只會在橫屏模式下顯示。
@media screen and (orientation: portrait){
//竖屏模式下的CSS样式
body{
transform: rotate(90deg);
transform-origin: right top; /*定位基点为屏幕右上角*/
width:100vh;
overflow-x:hidden;
position:absolute;
top:100%; /*将页面定位到屏幕底部*/
left:0;
}
}要注意的是，這種方法需要將所有內容都旋轉90度，包括文字、圖片、按鈕等。這樣雖然可以實現頁面在橫向螢幕模式下的顯示，但頁面的外觀和體驗會受到很大影響，而且在開發和維護過程中也會帶來許多不便。
3.使用JavaScript
除了上述兩種方法外，還可以使用JavaScript禁止豎屏，這種方法可以根據裝置的朝向自動判斷並旋轉。代碼如下：
<script>
window.onload=function(){
var isMobile = !!navigator.userAgent.match(/AppleWebKit.*Mobile.*/);
if(isMobile){
var el = document.getElementsByTagName('body')[0];
if(window.orientation == 90 || window.orientation == -90){
el.style.display = 'none';
alert('请将设备调回竖屏模式');
}
window.addEventListener("orientationchange", function() {
if(window.orientation == 0 || window.orientation == 180){
el.style.display = 'none';
alert('请将设备调为横屏模式');
}else{
el.style.display = 'block';
}
}, false);
}
};
</script>透過判斷裝置的朝向，當裝置處於垂直螢幕模式時，頁面會被隱藏，並彈出提示框提示使用者調回橫屏模式。當裝置朝向改變為橫屏模式時，頁面會重新顯示。
要注意的是，在使用JavaScript禁止垂直螢幕的時候需要考慮裝置朝向改變的事件，這裡使用了orientationchange事件。此外，由於不同裝置和瀏覽器的userAgent（使用者代理程式）可能存在差異，因此需要進行充分測試和適配，確保程式碼的穩定性和相容性。
三、總結
無論是使用CSS樣式、媒體查詢或JavaScript，本質上都是對頁面進行操作和樣式的修改，以達到禁止垂直螢幕的目的。然而，需要注意的是，禁止垂直螢幕的做法本身有一定的爭議，有些使用者可能會覺得這樣做限制了他們自由旋轉設備的權利，因而可能會對網站產生不好的印象。但無論如何，我們應該尊重使用者的選擇，做出使用者體驗更好的頁面。
以上是javascript 禁止豎屏的詳細內容。更多資訊請關注PHP中文網其他相關文章！
