有没有办法防止手机轮换我的手机响应式网站

Question

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

（仅适用于Safari！它不是Androids ETC的网站）。

Answer 1

我在这里的一条评论中使用了CSS：如何在 iPhone Web 应用程序中将方向锁定为纵向模式？

@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执行此操作，请参阅本文。

使用body[orient="landscape"]或body[orient="portrait"]定位浏览器

另请参阅此问题/答案。

源

Answer 3

当有人旋转他的移动设备时，手机的屏幕会改变尺寸。您无法阻止某人旋转其设备，但是当您检测到似乎是旋转设备屏幕的尺寸时，您可以更改网站的布局。这意味着您可以通过更改布局来"虚拟"防止旋转，因为它尚未旋转。