最近折腾一个手机页面,没经验瞎折腾,记录一下。
一开始接到的设计稿是分横竖屏的,但大小是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横竖都正常了,以为天下太平了……
继续阅读“折腾手机页面”