如何在启用CSS3的网站上支持更多移动视口宽度并强制移动浏览器使用适当的宽度？

Question

我的网站固定宽度为1000px.我想支持此页面的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)上测试我的网页时,它使用1000px的视口宽度,因此它以全宽显示网站.但如果选择视口宽度为800px会更好,因为网页会针对具有较小显示的设备显示更优化.

我知道我可以使用例如:<meta name="viewport" content="width=800px" />或设置视口宽度,或者使用:设置相应于设备物理宽度的宽度<meta name="viewport" content="width=device-width" />,但这些都不起作用.因为它会强制所有移动设备在第一种情况下总是使用800px视口,或者它会在第二种情况下使用设备上的像素的物理宽度,但这也不会有效,因为在纵向模式下(大多数人如何冲浪移动设备)网络和使用手机)将是300px或最多400px,这是太小,用户将不得不水平滚动很多.

所以实际上我的问题是 - 我可以支持并可能强制移动浏览器使用不同的视口宽度,具体取决于它们的实际屏幕大小吗？我不知道我是否足够正确地解释了它,所以我将得到我想要实现的例子:

对于物理宽度为400px的移动设备(具有更大显示器的现代设备),我想强制800px宽度的视口,并且可能具有0.5,因此在第一页访问时将显示完整而无需水平滚动并且具有用户选项以放大到页面的一部分.

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

这可能只使用CSS或CSS3设置吗？我可以想象JS解决方案,但我想用CSS实现它.

感谢您提前提供的任何帮助.

Answer 1

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

我建议使用

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

根据设备宽度设置视口..

现在，即使你说它不适用于方向更改，但在 iPhone/iPad 上，无论方向如何，设备宽度始终为 768px。

所以至少在这些设备上，设置设备宽度就可以了。

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

您能否尝试按照上面的方式设置元标记，看看是否可以正常工作。如果没有，我可以建议其他方法..

谢谢。