浅析HTML5 meta viewport参数
|
跟着移动端的风行，在移动端对网站举办重构和开拓势在必行。可是你只有相识了移动装备的meta viewport参数之后，才气更好地让我们的网页适配或相应各类差异判别率的移动装备。
viewport是什么？普通的讲，viewport是用户网页的可视地区。移动设惫亓?viewport就是装备的屏幕上能用来表现我们的网页的那一块地区，详细来说，就是赏识器上用来表现网页的那部门地区，但viewport又不范围于赏识器可视地区的巨细，它也许比赏识器的可视地区要大，也也许比赏识器的可视地区要小。 viewport语法如下： <meta name="viewport" content=" height = [pixel_value | device-height] , width = [pixel_value | device-width ] , initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value , user-scalable = [yes | no] , target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi " /> viewport的参数具体信息如下： width：节制 viewport 的巨细，可以指定的一个值可能非凡的值，如 device-width 为装备的宽度（单元为缩放为 100% 时的 CSS 的像素）。 height：和width相对应，指定高度。 initial-scale：初始缩放。即页面初始缩放水平。这是一个浮点值，是页面巨细的一个乘数。譬喻，假如你配置初始缩放为“1.0”，那么，web页面在揭示的时辰就会以target density判别率的1:1来揭示。假如你配置为“2.0”，那么这个页面就会放大为2倍。 minimum-scale：应承用户缩放到的最小比例 maximum-scale：最大缩放。即应承的最大缩放水平。这也是一个浮点值，用以指出页面巨细与屏幕巨细对比的最大乘数。譬喻，假如你将这个值配置为“2.0”，那么这个页面与target size对比，最多能放大2倍。 user-scalable：用户调解缩放。即用户是否能改变页面缩放水平。假如配置为yes则是应承用户对其举办改变，反之为no。默认值是yes。假如你将其配置为no，那么minimum-scale和maximum-scale都将被忽略，由于基础不行能缩放。 target-densitydpi：一个屏幕像素密度是由屏幕判别率抉择的，凡是界说为每英寸点的数目（dpi）。Android支持三种屏幕像素密度：低像素密度，中像素密度，高像素密度。一个低像素密度的屏幕每英寸上的像素点更少，而一个高像素密度的屏幕每英寸上的像素点更多。Android Browser和WebView默认屏幕为中像素密度。 个中target-densitydpi的取值范畴如下： device-dpi：行使装备本来的 dpi 作为方针 dp。不会产生默认缩放。 high-dpi：行使hdpi 作为方针 dpi。中等像素密度和低像素密度装备响应缩小。 medium-dpi：行使mdpi作为方针 dpi。高像素密度装备响应放大， 像素密度装备响应缩小。这是默认的target density。 low-dpi：行使mdpi作为方针 dpi。中等像素密度和高像素密度装备响应放大。 value：指定一个详细的dpi值作为target dpi。这个值的范畴必需在70–400之间。 为了防备Android Browser和WebView 按照差异屏幕的像素密度对你的页面举办缩放，你可以将viewport的target-densitydpi 配置为 device-dpi。当你这么做了，页面将不会缩放。相反，页面会按照当前屏幕的像素密度举办展示。在这种气象下，你还必要将viewport的width界说为与装备的width匹配，这样你的页面就可以和屏幕相顺应。 譬喻： 配置屏幕宽度为装备宽度，榨取用户手动调解缩放： <meta name="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"/> （编辑：湖南网） 【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容! |
