javascript - 怎麼讓網頁在手機上直接就是橫屏顯示的?

Question

網頁是為手機橫屏設計的,如果垂直螢幕顯示頁面會錯亂.

Answer 1

可以判斷，然後提示使用者進行旋轉

if(window.orientation==90||window.orientation==-90){
    alert("横屏状态！")
}

或監聽旋轉事件

window.onorientationchange = function(){ 
    switch(window.orientation){ 
        case -90: 
        case 90: 
            alert("横屏:" + window.orientation);
        case 0: 
        case 180: 
             alert("竖屏:" + window.orientation);
        break; 
    } 
} 

css的媒介查詢也是能判斷的

@media (orientation: portrait) { } 横屏 @media (orientation: landscape) { }竖屏 

不過還是有解決方案的：
打開頁面時透過window.orientation可以判斷網頁是橫屏還是豎屏，如果是豎屏，給整個頁面添加樣式

transform: rotate(90deg);

這樣，你的頁面就顯示橫屏的效果了。

Answer 2

前端控制不了手機的橫豎螢幕 但可以透過css條件判斷：

豎屏（portrait）：

@media screen and (orientation:portrait){
    #wrap{
        display:none;
    }
}

橫屏（landscape）：

@media screen and (orientation:landscape){
    #wrap{
        display:block;
    }
}

例如垂直螢幕時顯示提示文字：請橫屏瀏覽。
橫屏後用css操作顯示隱藏。