0

我正在构建一个非常简单的页面，只能在手机上查看。该页面的目的纯粹是为了提示人们将手机保持在横向模式。

我希望能够做的是使用媒体查询或类似的东西来检测设备的方向。如果用户以纵向方式拿着手机，我希望他们看到一条消息和一张图片，要求他们以横向方式拿着手机。一旦他们将手机旋转到横向模式，屏幕上就会出现一个链接，供他们点击。就是这么简单——但不幸的是，我只能找到根据设备方向更改样式表的代码，但没有什么能让我真正更改页面的正文。任何人都可以帮忙吗？

谢谢！

4

4 回答 4

1

首先，如果您的网站在纵向和横向模式下都可以工作会更好。

但是显然您可以根据设备方向更改样式表，只需准备您的网站以使用它：在body标签中创建两个divs. 在其中一个中，您将要以横向模式显示的网站内容放置在其中，在另一个中放置提示。

然后使用媒体查询进行定向，只需使用display: none;并display: block;以各自的方向显示各自div的 s。

纵向模式示例：

@media screen and (orientation:portrait) {
    #portraitContent {
        display: block;
    }
    #landscapeContent {
        display: none;
    }
}

而对于横向模式，只需反其道而行之。

于 2013-10-16T13:24:56.410 回答
1

通过 Javascript，您可以使用全局属性“window.orientation”

当用户转动手机时，会执行“orientationchange”事件。例如，您可以通过以下方式处理此事件：

    $('body').bind('orientationchange', function(e) {
    alert("Smartphone was turned");
});

通过一些 Javascript 和 CSS 行，您可以向非景观用户展示不同的内容：

check_orientation 函数：

jQuery(function($) {
    $('body').bind('orientationchange', function(e) {
        check_orientation();
    });
    check_orientation();
});

因此，该功能检查手机是否保持“正确的方式”并显示/隐藏内容：

var check_orientation = function() {
    if(typeof window.orientation == 'undefined') {
        //not a mobile
        return true;
    }
    if(Math.abs(window.orientation) == 90) {
        //portraitmode
        $('#landscape').fadeOut();
        return true;
    }
    else {
        //landscape mode
            $('#landscape').fadeIn().bind('touchstart', function(e) {
            e.preventDefault();
        });
        return false;
    }
};

您的内容 div 的标签：

<div id="landscape">Bitte drehen Sie Ihr Gerät!</div>

和你的 css 条目：

#landscape {  
    display:none;
    position:fixed;
    width:100%;
    height:100%;
    left:0;
    top:0;
    background:rgba(0,0,0,0.75);
    z-index:1999;
}
于 2013-10-16T13:29:43.273 回答
0

关于如何解决这个问题，我还有其他一些想法。

您可以使用 PopupWindow 提示用户将设备置于横向模式

或者您可以通过放置来强制设备处于横向模式

<activity....
android:screenOrientation="landscape"

在该活动的清单中。

祝你好运。

于 2013-10-16T13:21:50.947 回答
0

你可以在 CSS3 中做到这一点

/* Portrait */
@media screen and (orientation:portrait) {
    /* Portrait styles */
}
/* Landscape */
@media screen and (orientation:landscape) {
    /* Landscape styles */
}
于 2013-10-16T13:22:37.067 回答