html5 viewport应用方式示例详解

日期:2020-12-11 类型:科技新闻 

关键词:ps网页版在线制作,静态网页制作方法,微云网页版,怎么制作一个网页,django网页模板

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 的尺寸,能够特定的1个值或独特的值,如 device-width 为机器设备的宽度(企业为放缩为 100% 时的 CSS 的像素)。

height
—-和 width 相对性应,特定高宽比。

target-densitydpi
—-1个显示屏像素密度是由显示屏辨别率决策的,一般界定为每英寸点的数量(dpi)。Android适用3种显示屏像素密度:低像素密度,中像素密度,高像素密度。1个低像素密度的显示屏每英寸上的像素点更少,而1个高像素密度的显示屏每英寸上的像素点更多。Android Browser和WebView默认设置显示屏为中像素密度。

下面是 target-densitydpi 特性的赋值范畴
device-dpi: 应用机器设备本来的 dpi 做为总体目标 dp。 不容易产生默认设置放缩。
high-dpi: 应用hdpi 做为总体目标 dpi。 中等像素密度和低像素密度机器设备相应变小。
medium-dpi: 应用mdpi做为总体目标 dpi。 高像素密度机器设备相应变大, 像素密度机器设备相应变小。 这是默认设置的target density.
low-dpi: 应用mdpi做为总体目标 dpi。中等像素密度和高像素密度机器设备相应变大。
<value>: 特定1个实际的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个浮点值,是网页页面尺寸的1个乘数。比如,假如你设定原始放缩为“1.0”,那末,web网页页面在呈现的情况下就会以target density辨别率的1:1来呈现。假如你设定为“2.0”,那末这个网页页面就会变大为2倍。

maximum-scale
—-最大放缩。即容许的最大放缩水平。这也是1个浮点值,用以指出网页页面尺寸与显示屏尺寸相比的最大乘数。比如,假如你将这个值设定为“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”/>