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

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

谢谢!

您可以使用该window.orientation物业.其值是使用当前视图的程度.这是一个简短的例子:

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

        case 0:

                break;  

        case 90:
                break;

        case -90:   

                break;
    }

}

您可以在此活动中使用此功能:

window.onorientationchange=updateOrientation;

希望有所帮助!

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

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

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版本)支持它.

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