viewport 语法介绍:

01

02

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。中等像素密度和高像素密度设备相应放大。

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的范围之内。

例:

(设置屏幕宽度为设备宽度,禁止用户手动调整缩放)

(设置屏幕密度为高频,中频,低频自动缩放,禁止用户手动调整缩放)

viewport使用 html5的更多相关文章

  1. html5 canvas 画图移动端出现锯齿毛边的解决方法

    使用HTML5的canvas元素画出来的.在移动端手机上测试都发现画图有一点锯齿问题 出现这个问题的原因应该是手机的宽是720像素的, 而这个canvas是按照小于720像素画出来的, 所以在720像 ...

  2. 深入浅出 Viewport 设计原理

    Viewport 是 HTML5 针对移动端开发新增的一个 meta 属性, 它的作用是为同一网页在不同设备的呈现,提供响应式解决方案.这篇文章尝试通过循序渐进的方式,逐层探索 Viewport 的设 ...

  3. 有关CSS中字体响应式的设置

    在进行页面响应式设计中,往往需要根据屏幕分辨率来显示不同大小的字体.通常的做法是通过media queries给不同的分辨率指定不同的字体样式,例如: body { font-size: 22px; ...

  4. CSS中字体响应式的设置

    在进行页面响应式设计中,往往需要根据屏幕分辨率来显示不同大小的字体.通常的做法是通过media queries给不同的分辨率指定不同的字体样式,例如: body { font-size: 22px; ...

  5. HTML5开发手机应用--viewport的作用

    在用HTML5开发手机应用或手机网页时,<head>部分总会有如下一段代码,这段代码到底什么意思呢.在网上,大家会得到很多答案.我从网上搜集了部分介绍,整理一下,以留备用. <met ...

  6. html5开发之viewport使用

    随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择.然而,每一款手机有不同的分辨率,不同屏幕 ...

  7. HTML5[2]:使用viewport控制手机浏览器布局

    基本 <meta name="viewport" content="width=device-width, initial-scale=1">192 ...

  8. HTML5 Viewport Meta Tag

    https://developer.apple.com/library/ios/documentation/AppleApplications/Reference/SafariWebContent/U ...

  9. HTML5 viewport 标签与 CSS3 background-size 属性 使图片完全适应区域内容

    要使一张图片不论在移动端还是在桌面端都能适应区域内容,可以使用 HTML5 的 viewport 标签结合 CSS3 的 background-size 属性. 适应区域内容是指图片的宽或高的长度满足 ...

随机推荐

  1. 【MySQL】数据导出导入成CSV格式

    一.自动输出中文字符集 select * from db into outfile 'test.csv' CHARACTER SET gbk fields terminated by ',' opti ...

  2. ado.net工厂模式DbProviderFactories

    DbProviderFactory f = DbProviderFactories.GetFactory(System.Configuration.ConfigurationManager.Conne ...

  3. 空间session失效的解决方法

    今天访问自己的网站的时候(by thinkphp),突然发现身份验证失效了,Session无法跨页,而且登陆的时候总是提示验证码错误(验证码也是通过Session传递的),才意识到可能是Session ...

  4. c#操作xml增删改查

    1.首先新建一个xml文件(Root是我写上的) 2. 3.直接上代码,更直观 (1)初始化xml /// <summary> /// 初始化xml /// </summary> ...

  5. C#局域网桌面共享软件制作(三)

    到周末了,继续做这个桌面共享软件,下面是前两篇的链接, 链接 C#局域网桌面共享软件制作(一) 链接 C#局域网桌面共享软件制作(二) 通过对图片进行压缩以后,每张图片大小38K左右(win7/102 ...

  6. Map(双列集合)

    出现的原因:现实生活中有些数据成对存在. 特点:键不可重复,值可以重复. ----------|Map                数据都是以键值对的形式存在,键唯一,值可重复. --------- ...

  7. delphi 基础之四 delphi 组织结构

    delphi 组织结构 在Delphi中,一个正在开发的应用程序可以被称作项目或者工程.一般地,一个项目主要由dpr(项目).pas(单元)和dfm(窗体)三种文件组成,另外还有一些附属文件,如res ...

  8. C# 代码重启windows服务

    ServiceController service = new ServiceController("EnergyRecordService"); protected void b ...

  9. JAVA里的字符串,String 类简单介绍

    http://www.360doc.com/content/14/1107/23/17130779_423471141.shtml

  10. Oracle 分区表的统计信息实例

    ORACLE的统计信息在执行SQL的过程中扮演着非常重要的作用,而且ORACLE在表的各个层次都会有不同的统计信息,通过这些统计信息来描述表的,列的各种各样的统计信息.下面通过一个复合分区表来说明一些 ...