meta标签中viewport属性的含义

更新时间:2019-09-03 12:15:21 来源:青锋建站 作者:青锋建网站
  使用meta中的viewport可以控制手机网站移动端显示的比例,从而制作出更适合用户体验的网站,以下是青锋建站给大家分享的meta标签中viewport属性的含义与使用方法。

利用meta标签对viewport进行控制

     移动设备默认的viewport是layout viewport,但在进行移动设备网站开发时,我们需要的是ideal viewport。这就使用meta标签来设置移动端显示的比例。
  我们在开发手机网站移动端网站时,最常见的的一个动作就是把下面这个东西复制到我们的head标签中:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
  该meta标签的作用是让当前viewport的宽度等于设备的宽度,同时不允许用户手动缩放。如果在进行移动端开发时不这样的设定的话,那就会使用那个比屏幕宽的默认viewport,网站在手机端显示时会出现横向滚动条。
        meta viewport 标签首先是由苹果公司在其safari浏览器中引入的,目的就是解决移动设备的viewport问题。后来安卓以及各大浏览器厂商也都纷纷效仿,引入对meta viewport的支持,事实也证明这个东西还是非常有用的。

meta viewport 属性

在苹果的规范中,meta viewport 有6个属性(暂且把content中的那些东西称为一个个属性和值),如下:
width 设置layout viewport  的宽度,为一个正整数,或字符串"width-device"
initial-scale 设置页面的初始缩放值,为一个数字,可以带小数
minimum-scale 允许用户的最小缩放值,为一个数字,可以带小数
maximum-scale 允许用户的最大缩放值,为一个数字,可以带小数
height 设置layout viewport  的高度,这个属性对我们并不重要,很少使用
user-scalable 是否允许用户进行缩放,值为"no"或"yes", no 代表不允许,yes代表允许
这些属性可以同时使用,也可以单独使用或混合使用,多个属性同时使用时用逗号隔开就行了。

把当前的viewport宽度设置为 ideal viewport 的宽度

  要得到ideal viewport就必须把默认的layout viewport的宽度设为移动设备的屏幕宽度。因为meta viewport中的width能控制layout viewport的宽度,所以我们只需要把width设为device-width这个特殊的值就行了。
  <meta name="viewport" content="width=device-width">
  要把当前的viewport宽度设为ideal viewport的宽度,既可以设置 width=device-width,也可以设置 initial-scale=1,但这两者各有一个小缺陷,就是iphone、ipad以及IE 会横竖屏不分,通通以竖屏的ideal viewport宽度为准。所以,最完美的写法应该是,两者都写上去,这样就 initial-scale=1 解决了 iphone、ipad的毛病,width=device-width则解决了IE的毛病:
  以下是青锋建站给大家分享的meta标签中viewport属性的含义与使用方法。青锋建站,提供专业的高品质网站制作服务,包括网站建设,SEO,网络营销,PHP开发,网站建设知名品牌,全国接单,专业做优化型网站,为企业构建营销平台。

转载请注明来源网址:青锋建站-http://www.sjzphp.com/webdis/viewport.html

电话 15632335515 | 邮箱 943703539@qq.com | QQ 943703539 | 微信 qingfengjianzhan

Copyright © 2016-2026 青锋建站 版权所有