网站中的固定宽度 div 强制相对宽度 div 保持与移动浏览器中的显示相同的宽度答案

【问题标题】：Fixed-width div in website forces relative-width div to keep the same width as the display in mobile browsers网站中的固定宽度 div 强制相对宽度 div 保持与移动浏览器中的显示相同的宽度
【发布时间】：2014-10-04 10:30:48
【问题描述】：

我有一个固定宽度 div ([2] 800px) 的网站，以百分比 ([1] 100%) 宽度 div 为中心。在页面的下方，我还有另一个固定宽度div（[3] 1510px）。一切在桌面浏览器上看起来都应该：

桌面浏览器

|-----------------------------------------------------|
||---------------------------------------------------||
|| [1]       |-------------------------|             ||
||           | [2]                     |             ||
||           |-------------------------|             ||
||---------------------------------------------------||
|                                                     |
||---------------------------------------------------||
|| [3]                                               ||
||                                                   ||
||                                                   ||
||                                                   ||
||---------------------------------------------------||
|-----------------------------------------------------|

但是当我在 Android 手机上使用 Chrome 访问我的网站时，事情看起来真的很奇怪：

Android 上的 Chrome

（虚线为屏幕边界）

................................
.|-----------------------------.----------------------|
.||-[1]-----------------------|.                      |
.|||-------------------------||.                      |
.||| [2]                     ||.                      |
.|||-------------------------||.                      |
.||---------------------------|.                      |
.|                             .                      |
.||----------------------------.---------------------||
.|| [3]                        .                     ||
.||                            .                     ||
.||                            .                     ||
.||                            .                     ||
.||----------------------------.---------------------||
.|-----------------------------.----------------------|
................................

最奇怪的部分是，当缩小以查看所有 div [3] 时，div [1] 和 [2] 的宽度保持在屏幕宽度，这使得它们在完全缩小的站点上看起来非常奇怪。

将width: 100% 设置为html 和body 并添加

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=1;" />

initial-scale 和 user-scalability 的不同设置无效。

【问题讨论】：

标签： css responsive-design mobile-website fixed-width

【解决方案1】：

最终成功的是：

<meta name="viewport" content="width=1550px, initial-scale=1.0, user-scalable=1;" />

这似乎在 Chrome、Firefox 和 iOS Safari 中都能奏效。 1550px 的值是因为我在 div [3] 的两边都有 20px 的边距。

希望这可以帮助其他有同样问题的人。

【讨论】：