如何让iPhone 4(Retina Screen)和Android手机上的移动网站看起来都不错?

时间:2012-10-22 08:49:31

标签: css mobile-safari mobile-website retina-display android-browser

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

在iPhone 4(Retina Screen)和普通iPhone屏幕上看起来都不错。但是在Android手机上,它放大了太多。如何轻松解决这个问题?

这是viewport标记的样子:

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

1 个答案:

答案 0 :(得分:0)

考虑将宽度转换为百分比而不是像素,然后让它们在较小的设备中缩小。您还可以添加一些媒体查询,以便在较小的尺寸上进行其他布局控制。

使用视口实际上对所有移动设备的页面宽度硬编码为320px - 适用于较旧的iphone,但不适用于许多其他设备。