最近折腾一个手机页面,没经验瞎折腾,记录一下。

一开始接到的设计稿是分横竖屏的,但大小是960*640及640*960,没经验,就按的设计大小做了。

结果在iPhone 4上看竖版有点大啊,搜索了下,加上以下代码。

<meta name="viewport" content="width=device-width,user-scalable=no"/>

本来有个 initial-scale=1 ,试了试,发现加上还是大,所以去掉了。

然后看竖版正常了,但为毛横版还是太宽啊?

这时就开始要动设计稿尺寸的主意了,把960*640改为640*426了,当然切的图没改,只是在CSS里改大小,主要用

background-size:cover;

改完之后,iPhone 4横竖都正常了,以为天下太平了……

但事实并非如此。

世界上用户量最大的手机OS是 Android ,目前流行的版本有 4.x 2.x 3.x 1.x ……

在iPhone看效果不错,可在 Android 4.x 手机上玩蛋了,太宽了,横竖屏都是。

这里好好把别人的手机页面看了,终于发现,人家都是做 320 宽……

又是个改啊,这回终于知道为毛要有 initial-scale=1

<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"/>

原来一般(注意这一般二字)手机默认是320宽啊!!!

有了这行,就是按320来显示了,当然这里为了 Ratina ,这里也不用再切图了,还是CSS里把 2X 图写成 1X 的。

然后再去看,竖屏终于正常了。

但横屏怎么TMD又变小了?!!!

原来前面把 960*640改为640*426 的原因,想起来真搞笑,当时这么弄了,还在组里推广经验说横竖屏的宽其实一样宽,都写成一样的好……原来这种情况是在手机有非常好的自动缩放基础上……iPhone你Y做的太好反而不利于我们成长啊!!!

好吧,这里其实只是把横屏的写成 480*320 就好……

到此,一部分的手机横竖屏算是正常了……

但还有很多手机屏幕太小显示不全,还有很手机过高显示有过多留白……

也许自适应才好,也许也许吧……