Question

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

我希望能够做的是使用mediaqueries或类似的东西来检测设备的方向。如果用户手持电话，我希望他们看到一条消息和一张图片，要求他们将手机放在横向上。一旦他们将手机旋转到横向模式，屏幕上就会出现一个链接，供他们点击。就是这么简单 - 但遗憾的是我只能找到基于设备方向更改样式表的代码，但没有什么可以让我真正改变页面的主体。有人可以帮忙吗？

谢谢！

Answer 1

首先，如果您的网站同时适用于纵向和横向模式，那会更好。

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

然后使用媒体查询进行定位，只需使用display: none;和display: block;在各自的方向上显示相应的div。

肖像模式的示例：

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

对于横向模式，只需反过来做。

Answer 2

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

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

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

通过一些Javascript和CSS行，你可以向not-landsacape用户展示不同的内容：

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

你的content-div的

标签：

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

和你的css-entry：

#landscape {  
    display:none;
    position:fixed;
    width:100%;
    height:100%;
    left:0;
    top:0;
    background:rgba(0,0,0,0.75);
    z-index:1999;
}

Answer 3

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

您可以使用PopupWindow

提示用户将设备置于横向模式

或者您可以通过

强制设备处于横向模式

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

在该活动的清单中。

祝你好运。

Answer 4

您可以在CSS3中执行此操作

/* Portrait */
@media screen and (orientation:portrait) {
    /* Portrait styles */
}
/* Landscape */
@media screen and (orientation:landscape) {
    /* Landscape styles */
}

我可以根据设备方向更改页面的html吗？

4 个答案: