iPhone响应式布局的一点建议

大家在制作模板响应式布局的时候,做出了不同设备显示的效果,但是并不能达到我们所想要的结果,是什么原因造成的呢?特别是在苹果手机或iPod touch等苹果设备上时,显示的效果还是电脑的样式,并不是我们所要的手机样式,为什么?这是因为苹果的手机上所用的浏览器Safari浏览器。

因为在Safari浏览器在进行页面显示时是将窗口的宽度作为980px进行显示的,并不是我们所想的320px × 480px 。所以即使在页面中,已经写好了在小尺寸手机运行的样式, Safari浏览器也不会使用这个样式, 而是选择窗口宽度为980px时所使用的样式。

怎么解决这个问题,那么我们就需要在移动设备上设置原始大小、显示和是否缩放的声明。在页面的头部<head></head>之间加上下面这样的语句∶

<meta name="viewport" content="width=device-width; initial-scale=1.0" />

meta 标签的viewport属性,是在移动设备上设置原始大小,显示和是否缩放的声明。可以使用的参数设置如下∶

width : viewport的宽度

height : viewport的高度

initial-scale : 初始的缩放比例

minimum-scale : 允许用户缩放到的最小比例

maximum-scale : 允许用户缩放到的最大比例

user-scalable : 用户是否可以手动缩放

上面这条语句是特别重要的,在制作响应是布局时必须要加上这条语句,否则就有可能达不到你所想要的效果!!

看看我网站的效果

    000000000000.jpg

版权声明:若无特殊注明,本文皆为《 苏黎》原创,转载请保留文章出处。
本文链接:http://www.xinha.net/post/134.html - 《 苏黎》 http://www.xinha.net/post/134.html
正文到此结束

发表吐槽

你肿么看?

你还可以输入 250 / 250 个字

 嘻嘻 大笑 可怜 吃惊 抛媚眼 调皮 鄙视 示爱 哭 开心 偷笑 嘘 奸笑 委屈 抱抱 Dog Dog 哆啦a梦

评论信息框

正在拼命提交吐槽中...

(1)个小伙伴在吐槽

Lv.6
威客圈子

27.19.149.94 2015年06月12日 11:35:51
...评论还是那么的亮
Convert from em2zb