当前位置:首页 » 网络经验 » 正文

分类页和文章页“当前位置”下方广告(PC版)
分类页和文章页“当前位置”下方广告(移动版)

iPhone响应式布局的一点建议

1398 人参与  2015年06月11日 22:06  分类 : 网络经验  评论

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

来源:新哈网(微信/QQ号:897698882),转载请保留出处和链接!

本文链接:http://www.xinha.net/post/134.html

文章底部广告(PC版)
文章底部广告(移动版)
百度分享获取地址:http://share.baidu.com/

本文标签:响应式  布局  模板  

百度推荐获取地址:http://tuijian.baidu.com/,百度推荐可能会有一些未知的问题,使用中有任何问题请直接联系百度官方客服!
<< 上一篇 下一篇 >>
评论框上方广告(PC版)
评论框上方广告(移动版)

  • 评论(1)
  • 相关文章

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

我是标题

    内容的形式各种各样,可以是文本,也可以是各种广告等。

网络推广 | 网络营销 | 本站主题 | 网络创业 | 电子商务