css - 如何使移动网站在 iPhone 4(Retina 屏幕)和 Android 手机上看起来都不错？

Question

此移动网站: http://www.tomorroworld.com/instarea/

在 iPhone 4(视网膜屏幕)和普通 iPhone 屏幕上看起来都不错。但是在 Android 手机上，它放大太多了。我怎样才能轻松解决这个问题？

这是 viewport 标签的样子:

<meta name="viewport" content="width=640,initial-scale=0.5,maximum-scale=0.5,user-scalable=0"/>

Answer 1

考虑将您的宽度转换为基于百分比而不是像素，然后让它们在较小的设备中按比例缩小。您还可以添加一些媒体查询以在更小的尺寸下进行额外的布局控制。

像您一样使用视口(viewport)实质上是将所有移动设备的页面宽度硬编码为 320 像素 - 适用于旧款 iPhone，但不适用于许多其他设备。