javascript - Wie kann ich eine Webseite direkt im Querformat auf einem Mobiltelefon anzeigen lassen?

Question

Die Webseite ist für Mobiltelefone mit horizontalem Bildschirm konzipiert. Wenn die Seite im vertikalen Bildschirm angezeigt wird, wird die Seite durcheinander gebracht.

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操作显示隐藏。