Question

我正在重新编码当前网站，我遇到了移动兼容性问题。

如果您通过移动设备（here）查看当前网站，您可以看到网站的宽度和高度是正常大小，就像在桌面上查看时可以垂直和水平滚动一样。

但是，在我的新网站上（使用bootswatch中的bootstrap slate - bootswatch.com/slate/），当您在移动设备上预览时，它会尝试将其全部压缩到固定的移动设备宽度（here）

我尝试添加下面的行，但是我没有看到差异。

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

html,
 body {
    height: 100%;
    width: 100%;
  }

有没有办法让新网站与移动设备中的当前网站显示在同一维度？

感谢。

Answer 1

对于Bootstrap，自我禁用响应的步骤如下。你可以下载禁用的模板/ CSS。查看http://getbootstrap.com/getting-started/

禁用页面响应的步骤省略CSS文档中提到的视口使用单个宽度覆盖每个网格层的.container上的宽度，例如width：970px！important;确保这是在默认的Bootstrap CSS之后。您可以选择使用媒体查询或某些selector-fu来避免使用！important。如果使用导航栏，请删除所有导航栏折叠和展开行为。对于网格布局，请使用.col-xs- *类作为中/大类的补充或替代。不用担心，超小设备网格可以扩展到所有分辨率。你仍然需要针对IE8的Respond.js（因为我们的媒体查询仍在那里，需要处理）。这会禁用Bootstrap的“移动站点”方面。

Answer 2

你看到的是我猜的bootstrap的响应行为。而且，在移动设备上将内容放入设备宽度中绝对是有意义的。

您可以在此处阅读有关禁用引导项目中的响应功能的信息：Disabling bootstrap responsiveness

更新：

要使您的内容可水平滚动，请添加：

html, body {
    overflow: auto;
}

到你的样式表。

如果这不起作用，请尝试在声明中添加!important：

html, body {
    overflow: auto !important;
}

注意：这不是最有效的css-performance方式，但考虑到你对CSS的理解水平，我想你自己改变bootstrap.css会太过分了。

在移动设备中使网站页面大小正常

2 个答案: