头部左侧文字
头部右侧文字
当前位置:网站首页 > 网络经验 > 正文

iPhone响应式布局的一点建议

作者:苏黎 日期:2015-06-11 分类:网络经验

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

已有1位网友发表了看法:

欢迎 发表评论: