当前位置：文江博客话题详情

当 iPhone 方向改变时，我可以在 mobile safari 中触发 CSS 事件吗？

发布于 2024-08-22 16:39:12 字数 124 浏览 5 评论 0原文

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

谢谢！

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

墨落画卷 2024-08-29 16:39:12

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

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

        case 0:

                break;  

        case 90:
                break;

        case -90:   

                break;
    }

}

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

window.onorientationchange=updateOrientation;

希望有帮助！

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 原文

海夕 2024-08-29 16:39:12

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

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

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 原文

〆一缕阳光ご 2024-08-29 16:39:12

我不敢相信没有人谈论 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{}
}

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 原文

江南月 2024-08-29 16:39:12

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

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 原文

残疾 2024-08-29 16:39:12

Safari Mobile 支持定向事件。

回复收藏 0 原文

可是我不能没有你 2024-08-29 16:39:12

<body onorientationchange="updateOrientation();">

来自：Safari 网页内容指南

<body onorientationchange="updateOrientation();">

From: Safari Web Content Guide

回复收藏 0 原文

~没有更多了~

关于作者

浪菊怪哟

暂无简介

0 文章

0 评论

22 人气

关注发私信

友情链接

文江博客

当 iPhone 方向改变时，我可以在 mobile safari 中触发 CSS 事件吗？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（6）

关于作者

相关话题

热门标签

推荐作者

不再见

真是无聊啊

樱娆

浅语花开

烛光

绻影浮沉

友情链接

当 iPhone 方向改变时，我可以在 mobile safari 中触发 CSS 事件吗？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（6）

关于作者

相关话题

热门标签

推荐作者

不再见

真是无聊啊

樱娆

浅语花开

烛光

绻影浮沉

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。