Skip to main content
 首页 » 网络经验

iPhone响应式布局的一点建议

2年前 (2015-06-11)11041百度未收录

大家在制作模板响应式布局的时候,做出了不同设备显示的效果,但是并不能达到我们所想要的结果,是什么原因造成的呢?特别是在苹果手机或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 : 用户是否可以手动缩放

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

看看我网站的效果

    iPhone响应式布局的一点建议-新哈博客

评论列表1条评论
威客圈子
威客圈子回复 ...评论还是那么的亮
发表评论