折腾手机页面

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

一开始接到的设计稿是分横竖屏的，但大小是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 就好……

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

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

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