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

最好不要直接设置onorientationchange属性。而是使用以下内容：

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

Answer 3

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版本）支持它。 / p>

Answer 4

我无法相信没有人谈到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 5

Safari Mobile支持orientation events。

Answer 6

<body onorientationchange="updateOrientation();">

来自：Safari Web Content Guide

我可以在iphone方向更改的移动Safari中触发CSS事件吗？

6 个答案: