Can I trigger a CSS event in mobile safari upon ip

2019-01-11 22:31发布

站内问答 / 前端开发
1628 6 5

I'm trying to figure out how to change an embedded web page when the user rotates their phone from portrait to landscape mode - basically to load a view that is better suited to the wider screen format. Is this possible to do without calling a new page from the server, i.e. to drive it from within CSS/Javascript itself?

Thanks!

6条回答
叼着烟拽天下
2楼-- · 2019-01-11 23:13

You can use the window.orientation property. Its value is the degree that the current mode of view is used. Here is a brief example: 

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

        case 0:

                break;  

        case 90:
                break;

        case -90:   

                break;
    }

}

You can use this function on this event:

window.onorientationchange=updateOrientation;

Hope that helps!

查看更多
0人赞 添加讨论(0) 举报
smile是对你的礼貌
3楼-- · 2019-01-11 23:15

Safari Mobile supports orientation events.

查看更多
0人赞 添加讨论(0) 举报
Root（大扎）
4楼-- · 2019-01-11 23:17

Best not to set the onorientationchange property directly. Instead use the following:

window.addEventListener('orientationchange', function (evt) {
    switch(window.orientation) {
        case 0: // portrait
        case 180: // portrait
        case 90: // landscape
        case -90: // landscape
    }
}, false);
查看更多
0人赞 添加讨论(0) 举报
劳资没心，怎么记你
5楼-- · 2019-01-11 23:18

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{}
}
查看更多
0人赞 添加讨论(0) 举报
孤傲高冷的网名
6楼-- · 2019-01-11 23:26 
<body onorientationchange="updateOrientation();">

From: Safari Web Content Guide

查看更多
0人赞 添加讨论(0) 举报
傲
7楼-- · 2019-01-11 23:30

The Safari mobile browser has support for the orientationchange event as well as the orientation property on the window, so you can do something like:

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;
    }
}

I would add the upside-down because the iPad human interface guidelines say you should support all orientations, so I would expect Safari on the iPad (and possibly future iPhone versions) to support it.

查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(5)