Web 技术研究所

我一直坚信着,Web 将会成为未来应用程序的主流

给Mobile网页指定合适的viewport

  首先,我们啥也不设置,直接来个最基本的网页 <html>
  <body>
    次碳酸钴
  </body>
</html>
  普通的PC端浏览器是根据浏览器的窗口大小来计算网页大小的,而很多Mobile设备的操作系统没有窗口的概念。为了解决这个问题引入了viewport来替代这个网页大小的计算。由于Mobile设备的屏幕大小问题,viewport并不直接以屏幕的尺寸来计算宽度,而是有一个默认的宽度。这样它就能兼容上普通PC端的网页了。所以上面的代码在Mobile设备上显示会很蛋疼,因为默认的viewport宽度是很宽的(大概960px左右,足以容纳普通的PC端网页了,具体没了解,可能也有浏览器差异)。根据不同的浏览器一般会有两种显示方式,一种是viewport是默认缩放是100%的,则会出现滚动条。另一种是viewport的默认宽度是设备宽度的,则会把网页内容缩小的很惨。掺入了缩放的概念,和就意味着viewport这东西是可以缩放的。一般的Mobile都可以使用两个手指触屏来实现缩放(双击也有缩放功能)。这样就让viewport和玩意儿变得更繁琐起来。
  为了让网页在移动设备上正常显示,我们就需要设置这个viewport的参数来指定它的行为。可以使用HTML标签中的META标签来设置 <meta name="viewport" content="参数名称=参数值(多个参数用逗号隔开)" />   主要参数有下面几个:
    maximum-scale:用户可以缩放的最大值
    minimum-scale:用户可以缩放的最小值
    initial-scale:viewport的默认缩放大小
    width:固定viewport的宽度
    height:固定viewport的高度
    user-scalable:是否允许用户缩放
  前三个参数都是缩放相关的,它们的值是viewport的缩放大小,他们仅仅改变缩放大小,并不是改变viewport的实际大小。比如要让网页加载时候显示两倍大小就可以加上这个 <meta name="viewport" content="initial-scale=2" />   之后就是width和height,修改这俩东西就和我们在PC上访问网页时候用鼠标拖动浏览器来改变大小一样。或者说是浏览器(页面区域)在屏幕上的默认大小。可以是具体的数值,也可以用“device-width”和“device-height”把它设置成浏览器屏幕的大小。比如要把页面宽度固定到浏览器的屏幕上,防止出现横向滚动条就可以使用 <meta name="viewport" content="width=device-width" />   最后一个是指定是否允许用户自己缩放,也就是用户通过两个手指触屏来缩放的方式。默认都是允许的值为1,如果要禁止可以把它的值设置为0。就像下面这样 <meta name="viewport" content="user-scalable=0" />   设置了这个属性以后两个手指在屏幕上把它摸到高潮它也不会缩放。上面这些属性只要设置就可以让网页在Mobile设备下好好显示,我一般会禁止横向滚动条和用户缩放,就像下面这样 <meta name="viewport" content="width=device-width" />   最后一个是指定是否允许用户自己缩放,也就是用户通过两个手指触屏来缩放的方式。默认都是允许的值为1,如果要禁止可以把它的值设置为0。就像下面这样 <meta name="viewport" content="width=device-width,user-scalable=0" />   只要把他们用逗号隔开就可以了,不过有些浏览器不支持width和height设置固定数值(我这充话费送的破手机的默认浏览器就不支持)所以最好别用那个。
  其他也没啥啦,就是这样,喵~
  参考:
  https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
网名:
3.84.186.*
电子邮箱:
仅用于接收通知
提交 悄悄的告诉你,Ctrl+Enter 可以提交哦
神奇海螺
[查看全部主题]
各类Web技术问题讨论区
发起新主题
本模块采用即时聊天邮件通知的模式
让钛合金F5成为历史吧!
次碳酸钴的技术博客,文章原创,转载请保留原文链接 ^_^