强制浏览器以纵向加载页面答案

【问题标题】：Force the browser to load the page in portrait orientation强制浏览器以纵向加载页面
【发布时间】：2015-09-22 14:02:29
【问题描述】：

我需要在手机和平板电脑上以纵向模式显示我的页面。如何强制浏览器以这个方向加载它。或者我怎样才能完全禁用横向？

【问题讨论】：

如果您已经在使用媒体查询进行响应式设计，那么您可以设置宽度断点，即当您的页面进入横向模式时，让您的页面容器在任一侧都有足够的边距来模拟纵向模式
我认为这是stackoverflow.com/questions/8738072/…的副本，无论是纵向还是横向。
我经常使用 viewportHeight 和 viewportWidth 单位，所以很遗憾这不是一个选项。如果你直接在 iPhone 上阻止它，我需要类似的东西。

标签： javascript jquery html css

【解决方案1】：

你不能强迫它:(

浏览器是一种移动应用程序，可以横向或纵向显示。

所以：您的问题可以重新问为：“是否可以要求浏览器仅在横向模式下打开？”可能是一些自定义页面指令可以告诉浏览器以横向模式打开自己（搜索一下，也许你能在这里找到一些东西！）

但是你可以像https://www.quora.com/Can-I-use-Javascript-to-force-a-mobile-browser-to-stay-in-portrait-or-landscape-mode 中提到的那样做一个 css 技巧（这不是推荐的方法）

想法是在所有页面内容上使用css旋转

@media screen and (orientation:landscape) {
  //set you content id
  #container {
    -ms-transform: rotate(-90deg); /* IE 9 */
    -webkit-transform: rotate(-90deg); /* Chrome, Safari, Opera */
    transform: rotate(-90deg);
    width: /* screen width */ ;
    height: /* screen height */ ;
    overflow: scroll;
  }
}

我推荐forcing web-site to show in landscape mode only 中提到的解决方案，它会温和地要求用户旋转浏览器 (@JasonSebring)

<style type="text/css">
    #warning-message { display: none; }
    @media only screen and (orientation:portrait){
        #wrapper { display:none; }
        #warning-message { display:block; }
    }
    @media only screen and (orientation:landscape){
        #warning-message { display:none; }
    }
</style>

....

<div id="wrapper">
    <!-- your html for your website -->
</div>
<div id="warning-message">
    this website is only viewable in landscape mode
</div>

【讨论】：

【解决方案2】：

也许你可以在你的容器 css 类中设置一个固定宽度并使用margin: 0 auto，这样你就可以将内容设置在中心，给人的印象是页面始终处于纵向位置，例如：

.container{
    width:320px;
    margin: 0 auto; 
}

【讨论】：