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