mobile - 如何在启用 CSS3 的网站上支持更多移动视口(viewport)宽度并强制移动浏览器使用正确的宽度？

Question

我有固定宽度为 1000 像素的网站。我想支持此页面的 2 个较小宽度。我已经通过这样的 CSS 媒体查询成功地做到了这一点:

@media only screen and (min-width : 800px) and (max-width : 999px) {
  #content { width:800px; }
}
@media only screen and (max-width : 799px) {
  #content { width:600px; }
}

现在，当我在 Android 浏览器 (2.3.3) 上测试我的网页时，它使用 1000 像素的视口(viewport)宽度，因此它以全宽显示网站。但如果它选择 800 像素的视口(viewport)宽度会好得多，因为网页会针对具有较小显示屏的设备进行更优化的显示。

我知道我可以设置视口(viewport)宽度，例如:<meta name="viewport" content="width=800px" />或使用以下命令设置对应于设备物理宽度的宽度:<meta name="viewport" content="width=device-width" /> ，但这些都不起作用。因为要么强制所有移动设备在第一种情况下始终使用 800px 视口(viewport)，要么在第二种情况下使用设备上像素的物理宽度，但这也行不通，因为在纵向模式下(大多数人如何浏览移动设备) web 和 use phone) 将是 300px 或最多 400px，这太小了，用户将不得不水平滚动很多。

所以实际上我的问题是 - 我是否可以支持并可能强制移动浏览器根据其实际屏幕尺寸使用不同的视口(viewport)宽度？我不知道我是否解释得足够正确，所以我将举例说明我想要实现的目标:

对于物理宽度为 400px 的移动设备(具有更大显示屏的现代设备)，我想强制视口(viewport)宽度为 800px 并且可能具有 0.5 的比例，因此在第一页访问时将完整显示而不需要水平滚动和用户选项放大页面的某些部分。

对于物理宽度为 300 像素(一些中端和低端设备)或更小的移动设备 - 我想强制视口(viewport)宽度为 600 像素并且可能具有 0.5 的比例，因此在第一次访问时将显示完整或至少大部分显示在屏幕上，几乎不需要水平滚动。当然，用户可以放大页面的某些部分。

是否可以仅使用 CSS 或 CSS3 进行设置？我可以想象 JS 解决方案，但我只想使用 CSS 来实现它。

提前感谢您的帮助。

Answer 1

我确实理解你问题的一部分......我主要在 iPhone/iPad 设备上工作，较少在 Android 设备上工作......

我会推荐使用

<meta name="viewport" content="width=device-width" />

根据设备宽度设置视口(viewport)..

现在即使你说，它不会在方向改变时工作，在 iPhone/iPad 上，无论方向如何，设备宽度总是 768px。

所以至少在那些设备上，设置设备宽度会很好..

对于 Android 设备，我不确定返回的设备宽度是否在每个方向上都不同。 我猜应该是一样的。

能否请您尝试按上述方式设置元标记，看看是否正常。如果没有，我可以建议一些其他方式..

谢谢。