Question

我正在尝试弄清楚如何在用户将手机从竖屏模式切换到横屏模式时更改嵌入的网页 - 基本上是加载更适合更宽屏幕格式的视图。是否可以不从服务器调用新页面来完成此操作，即从CSS / JavaScript内部驱动它？

谢谢！

Answer 1

您可以使用 window.orientation 属性。它的值是当前查看模式使用的角度。这里是一个简单的例子:

function updateOrientation()
{   
    var orientation=window.orientation;
    switch(orientation)
    {

        case 0:

                break;  

        case 90:
                break;

        case -90:   

                break;
    }

}

您可以在此事件中使用此功能：

window.onorientationchange=updateOrientation;

希望有所帮助！

Answer 2

最好不要直接设定<条码>的变更>。而是使用以下方法:

window.addEventListener( orientationchange , function (evt) {
    switch(window.orientation) {
        case 0: // portrait
        case 180: // portrait
        case 90: // landscape
        case -90: // landscape
    }
}, false);

Answer 3

我简直不敢相信没有人谈论CSS的规则。

@media screen and (max-width: 320px) // Portait Mode
{
/* CSS RULINGS */
p{}
body{}
}

@media screen and (min-width: 321px) // Landscape Mode
{
/* CSS RULINGS */
p{}
body{}
}

Answer 4

Safari 移动浏览器支持 orientationchange 事件以及窗口上的 orientation 属性，因此您可以执行以下操作：

window.onorientationchange = function() {
    switch(window.orientation) {
        case 0:   // Portrait
        case 180: // Upside-down Portrait
            // Javascript to setup Portrait view
            break;
        case -90: // Landscape: turned 90 degrees counter-clockwise
        case 90:  // Landscape: turned 90 degrees clockwise
            // Javascript to steup Landscape view
            break;
    }
}

我希望加入倒置模式，因为iPad的人机界面准则指出你应该支持所有屏幕方向，并且我希望iPad上的Safari（以及可能的未来iPhone版本）也支持此功能。

Answer 5

Safari移动版支持方向事件。

Answer 6

<body onorientationchange="updateOrientation();">

来自：Safari Web 内容指南

友情链接