19

我试图弄清楚当用户将手机从纵向模式旋转到横向模式时如何更改嵌入式网页 - 基本上是为了加载更适合更宽屏幕格式的视图。这是否可以在不从服务器调用新页面的情况下完成，即从 CSS/Javascript 本身驱动它？

谢谢！

4

6 回答 6

19

您可以使用该window.orientation物业。它的值是使用当前视图模式的程度。这是一个简短的例子：

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

        case 0:

                break;  

        case 90:
                break;

        case -90:   

                break;
    }

}

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

window.onorientationchange=updateOrientation;

希望有帮助！

于 2010-02-22T18:46:50.757 回答
7

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

window.addEventListener('orientationchange', function (evt) {
    switch(window.orientation) {
        case 0: // portrait
        case 180: // portrait
        case 90: // landscape
        case -90: // landscape
    }
}, false);
于 2010-04-21T03:04:25.917 回答
5

I can't believe no one talked about the css ruling:

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

@media screen and (min-width: 321px) // Landscape Mode
{
/* CSS RULINGS */
p{}
body{}
}
于 2011-05-16T12:15:50.297 回答
5

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

于 2010-02-22T18:44:48.233 回答
0

Safari Mobile 支持方向事件。

于 2010-02-22T18:43:59.937 回答
0 
<body onorientationchange="updateOrientation();">

来自：Safari 网页内容指南

于 2010-02-22T18:47:40.517 回答