2

当我在任何 Android 手机上测试我的开发网站时，该网站无法在手机屏幕上全屏显示。附上截图。我只是想让它对移动设备友好。

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

<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">

请帮忙？

Android 移动设备，网站不完全适合移动屏幕尺寸

4

4 回答 4

2

如果您正在设计一个响应式网站，但想在移动设备中“修复”网站的宽度，即最大宽度为 800 像素，我发现我唯一的解决方案是更新初始比例大小。对我有用的是这样的，注意“初始比例”值：

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

希望这对某人有帮助！

于 2014-09-14T22:24:41.927 回答
0

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

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

于 2014-08-01T08:29:57.417 回答
0

我最近在平板电脑/手机上遇到了同样的问题，并使用以下代码段解决了这个问题。

<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>
于 2013-09-24T20:56:47.753 回答
0

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

在引导程序 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

于 2013-09-24T21:35:12.343 回答