html中viewport,viewport是html5新元素吗

  html中viewport,viewport是html5新元素吗

  随着移动终端的普及,在移动终端上重构和开发网站势在必行。但是只有在你知道了移动设备的meta viewport参数之后,我们才能更好地使我们的网页适应或响应各种不同分辨率的移动设备。

  什么是视口?一般来说,viewport是用户网页的可视区域。移动设备上的视窗是设备屏幕上可用于显示网页的区域,具体来说,是浏览器上用于显示网页的区域。然而,视口不限于浏览器可视区域的大小,该可视区域可以大于或小于浏览器的可视区域。

  视口语法如下:

  meta name= viewport content= height=[pixel _ value device-height],width=[pixel _ value device-width],initial-scale=float_value,maximum-scale=float _ value,user-scalable=[yes no],target-density dpi=[dpi _ value device-dpi high-dpi medium-dpi low-dpi /viewport的参数如下:

  width:控制视口的大小。您可以指定一个值或特殊值,例如device-width是设备的宽度(缩放到100%时,单位是CSS的像素)。

  height:对应宽度,指定高度。

  initial-scale:初始缩放。即页面的初始缩放级别。这是一个浮点值,也是页面大小的倍数。例如,如果您将初始缩放设置为“1.0”,则网页将以1:1的目标密度分辨率显示。如果你设置为“2.0”,那么这个页面会放大到2倍。

  minimum-scale:允许用户缩放的最小比例。

  maximum-scale:最大变焦。即允许的最大缩放程度。这也是一个浮点值,表示页面大小相对于屏幕大小的最大倍数。例如,如果您将此值设置为“2.0”,则此页面与目标尺寸相比最多可放大2倍。

  user-scalable:用户调整缩放。即用户是否可以改变页面的缩放级别。如果设置为yes,则允许用户更改;否则为否。默认值为是。如果您将其设置为“否”,那么最小比例和最大比例都将被忽略,因为根本不可能进行缩放。

  target-densitydpi:屏幕每英寸的像素由屏幕分辨率决定,通常定义为每英寸的点数(dpi)。Android支持三种屏幕每英寸像素:低每英寸像素、中每英寸像素和高每英寸像素。每英寸像素低的屏幕每英寸像素少,而每英寸像素高的屏幕每英寸像素多。Android浏览器和WebView默认屏幕是每英寸像素。

  target-densitydpi的取值范围如下:

  device-dpi:使用设备的原始dpi作为目标dp。不会发生默认缩放。

  high-dpi:使用hdpi作为目标dpi。中像素每英寸和低像素每英寸设备相应减少。

  medium-dpi:使用mdpi作为目标dpi。每英寸像素数的设备相应放大,每英寸像素数的设备相应减小。这是默认的目标密度。

  low-dpi:使用mdpi作为目标dpi。中像素每英寸和高像素每英寸设备相应放大。

  value:指定特定的dpi值作为目标dpi。该值必须在70400的范围内。

  为了防止Android浏览器和WebView根据不同屏幕的每英寸像素缩放您的页面,您可以将viewport的target-densitydpi设置为device-dpi。这样做时,页面不会缩放。相反,页面将根据当前屏幕每英寸的像素显示。在这种情况下,您还需要定义viewport的宽度来匹配设备的宽度,以便您的页面能够适应屏幕。

  例如:

  将屏幕宽度设置为设备宽度,并禁止用户手动调整缩放比例:

  meta= viewport content= width=device-width,user-scalable=no /设置屏幕密度为高频、中频、低频自动缩放,禁止用户手动调整缩放:

  meta name= viewport content= width=device-width,target-densitydpi=high-dpi,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no/以上就是浅析HTML5元视区参数的详细内容,更多关于HTML5元视区参数的资料请关注其它相关文章!

郑重声明:本文由网友发布,不代表盛行IT的观点,版权归原作者所有,仅为传播更多信息之目的,如有侵权请联系,我们将第一时间修改或删除,多谢。

留言与评论(共有 条评论)
   
验证码: