Question

我正在开发一个移动响应网站，我不想让它旋转。有什么方法可以阻止Safari旋转吗？

（仅适用于Safari！它不是机器人网站等）。

Answer 1

我在这里的一条评论中使用了CSS： How do I lock the orientation to portrait mode in a iPhone Web Application?

@media (min-width:420px){

    html{
    -webkit-transform: rotate(-90deg);
       -moz-transform: rotate(-90deg);
        -ms-transform: rotate(-90deg);
         -o-transform: rotate(-90deg);
            transform: rotate(-90deg);
    -webkit-transform-origin: left top;
       -moz-transform-origin: left top;
        -ms-transform-origin: left top;
         -o-transform-origin: left top;
            transform-origin: left top;
    width: 320px; /*this is the iPhone screen width.*/
    position: absolute;
    top: 100%;
    left: 0
    }

/** The rest of the CSS... **/ 





}

小于420px宽度 - 翻页并将其显示为320px宽屏幕。

Answer 2

假设您正在使用iPhone，请参阅this article。

使用body[orient="landscape"]或body[orient="portrait"]

定位浏览器

另请参阅this question/answers。

Source

Answer 3

当有人正在旋转他的移动设备时，移动设备的屏幕会改变尺寸。您无法阻止某人旋转其设备，但您可以在检测到看似已转动的设备屏幕的尺寸时更改网站的布局。这意味着您可以通过在未旋转时更改布局来“虚拟地”阻止旋转。

有没有办法阻止移动设备轮换我的移动响应网站？

3 个答案: