欢迎光临杨雨的个人博客站!

杨雨个人网站-杨雨个人博客-杨照佳

杨雨个人博客网站

关注互联网和搜索引擎的个人博客网站

首页 > WEB开发 > html5案例分享 >

Html5 viewport行使要领示例详解

发布时间:2016-12-06  编辑:杨雨个人博客网站   点击:   

viewport 语法先容:



代码如下:
<!– Html document –>
<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]

/>

参数表明:

width
—-节制 viewport 的巨细,可以指定的一个值可能非凡的值,如 device-width 为装备的宽度(单元为缩放为 100% 时的 CSS 的像素)。

height
—-和 width 相对应,指定高度。

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之间。



代码如下:
<!– Html document –>
<meta name=”viewport” content=”target-densitydpi=device-dpi” />
<meta name=”viewport” content=”target-densitydpi=high-dpi” />
<meta name=”viewport” content=”target-densitydpi=medium-dpi” />
<meta name=”viewport” content=”target-densitydpi=low-dpi” />
<meta name=”viewport” content=”target-densitydpi=200″ />

为了防备Android Browser和WebView 按照差异屏幕的像素密度对你的页面举办缩放,你可以将viewport的target-densitydpi 配置为 device-dpi。当你这么做了,页面将不会缩放。相反,页面会按照当前屏幕的像素密度举办展示。在这种气象下,你还必要将viewport的width界说为与装备的width匹配,这样你的页面就可以和屏幕相顺应。

initial-scale
—-初始缩放。即页面初始缩放水平。这是一个浮点值,是页面巨细的一个乘数。譬喻,假如你配置初始缩放为“1.0”,那么,web页面在揭示的时辰就会以target density判别率的1:1来揭示。假如你配置为“2.0”,那么这个页面就会放大为2倍。

maximum-scale
—-最大缩放。即应承的最大缩放水平。这也是一个浮点值,用以指出页面巨细与屏幕巨细对比的最大乘数。譬喻,假如你将这个值配置为“2.0”,那么这个页面与target size对比,最多能放大2倍。

user-scalable
—-用户调解缩放。即用户是否能改变页面缩放水平。假如配置为yes则是应承用户对其举办改变,反之为no。默认值是yes。假如你将其配置为no,那么minimum-scale 和 maximum-scale都将被忽略,由于基础不行能缩放。

全部的缩放值都必需在0.01–10的范畴之内。

例:1.配置屏幕宽度为装备宽度,压迫用户手动调解缩放



代码如下:
<meta name=”viewport” content=”width=device-width,user-scalable=no” />

2.配置屏幕密度为高频,中频,低频自动缩放,压迫用户手动调解缩放



代码如下:
<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”/>

本文地址:http://itbyc.com/web/html5/14890.html
转载请注明出处。
分享是一种快乐,也是一种美德:
评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)
博客首页 | WEB开发 | 网站运营 | CMS使用教程 滇ICP备14002061号-1