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

【问题标题】：Make website page size normal desktop size in mobile devices使网站页面大小在移动设备中正常桌面大小
【发布时间】：2014-02-08 21:34:46
【问题描述】：

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

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

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

我已尝试添加以下行，但我看不出有什么不同。

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

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

有什么方法可以让新网站在移动设备中显示为与当前网站相同的维度？

谢谢。

【问题讨论】：

标签： android html css jquery-mobile mobile

【解决方案1】：

我猜你看到的是引导程序的响应行为。恕我直言，将内容放入移动设备上的设备宽度绝对是有意义的。

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

更新：

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

html, body {
    overflow: auto;
}

到您的样式表。

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

html, body {
    overflow: auto !important;
}

注意： 这不是 css 性能方面最有效的方法，但考虑到您对 CSS 的理解水平，我想您自己更改 bootstrap.css 会太过分了。

【讨论】：

当我将引导程序配置为无响应时，我无法在移动设备的网页上水平滚动，有什么想法吗？谢谢。

【解决方案2】：

对于 Bootstrap it self，禁用响应的步骤如下。您可以在禁用此功能的情况下下载模板/CSS。查看http://getbootstrap.com/getting-started/

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

【讨论】：