网站不适合手机屏幕全屏

Question

当我在任何Android手机上测试我的开发网站时，该网站无法在手机屏幕上全屏显示。附件是快照。我只是想让它适合移动设备。

我正在使用Twitter Boostrap的wordpress来制作我的网站。在我的头标记上，我在互联网上找到的移动友好网站的元标记很少。请注意，这不是一个响应式网站。

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE9,chrome=1">

请帮帮忙？

Answer 1

我最近在平板电脑/手机上遇到了同样的问题，并使用以下代码修复了该问题。

<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
    @-webkit-viewport { width: device-width; }
    @-moz-viewport { width: device-width; }
    @-ms-viewport { width: device-width; }
    @-o-viewport { width: device-width; }
    @viewport { width: device-width; }
</style>
<script>
    // Important for windows phone 8
    if (navigator.userAgent.match(/IEMobile\/10\.0/))
    {
        var msViewportStyle = document.createElement("style");
        msViewportStyle.appendChild(document.createTextNode("@-ms-viewport{width:auto!important}"));
        document.getElementsByTagName("head")[0].appendChild(msViewportStyle);
    }
</script>

Answer 2

确保您使用Bootstrap中包含的响应类，以便在Bootstrap框架内进行设计。在Bootstrap中，所有内容都位于12“列”网格上，然后根据该网格进行拆分。

在Bootstrap 2.x

中

<div class="container">
  <div class="row">
    <div class="span6">
      Content here
    </div>
    <div class="span6">
      Content here
    </div>
  </div>
</div>

将产生两个跨越页面宽度的div。

在Bootstrap 3中，他们稍微改变了他们的类名，以适应不同的窗口大小。同样的例子，只要你在移动设备上，设备就是：

<div class="container">
  <div class="row">
    <div class="col-xs-6">
      Content here
    </div>
    <div class="col-xs-6">
      Content here
    </div>
  </div>
</div>

您可以按照以下步骤删除Bootstrap 3中的响应： http://getbootstrap.com/getting-started/#disable-responsive

可在此处找到更多信息：http://getbootstrap.com/css/#grid

Answer 3

我知道这是一个古老的问题但是因为它出现在谷歌我想我会分享我提出的解决方案，以防其他人需要它：

如果您的网站没有响应，您就不需要在标题处添加额外的元标记。尝试删除它们，它应该按预期工作。

Answer 4

如果你正在设计一个响应式网站，但想要“修复”移动网站的宽度，即800px最大宽度，我发现我唯一的解决方案是更新初始比例尺寸。对我有用的是这样的，注意“初始规模”值：

<meta name="viewport" content="width=device-width, initial-scale="0.4">

希望这有助于某人！