如何在所有移动浏览器上正确显示网页答案

【问题标题】：How to display properly a web page on all mobile browsers如何在所有移动浏览器上正确显示网页
【发布时间】：2012-07-29 09:48:02
【问题描述】：

我分享了这张截图，向你展示它在所有安卓浏览器上的显示方式：

我使用了<meta name="viewport" content="width=device-width, initial-scale=0.3">，但它似乎只适用于安卓默认浏览器。

我整理了一个link for testing

正确的视图应该像 Android 默认浏览器一样，在垂直或水平模式下调整 100% 的宽度。

【问题讨论】：

可能是 firefox 和 chrome 的用户配置导致了问题。我知道 Opera for android 有一个名为“单列视图”的选项，它有时会极大地改变页面的布局。也许 chrome 和 firefox 有类似的选择。尝试将两者的配置重置为默认值。

【解决方案1】：

解决此问题的一种方法是将视口设置为文档的宽度。每个浏览器和设备都有不同的可显示区域或默认像素宽度。将视口更改为以下内容：

<!-- When viewing your css and live widths I got 944 wrapper width,
update if incorrect -->
<meta name="viewport" content="width=944" />

使其显示相同的唯一其他方法是使用移动文档类型而不是 html5。但这可能会破坏某些功能。

<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN" "http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

【讨论】：