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. C# 中DataGridView 绑定List<T>做数据源的操作问题

    若想将 List<T>作为DataGridView的数据源,然后后续还想继续操作的话,需要将List<T>赋值给BindingList对象, 然后直接将BindingList赋 ...

  2. ASP.NET的SEO:SEO Hack --- Html注入和Nofollow

    ASP.NET的SEO:目录 黑帽(black hat)SEO主要是指采取"不怎么道德"(暂时就这么形容吧!)的方式进行搜索引擎优化. 1. 注入攻击,包括Sql注入和Html注入 ...

  3. 修改VS解决方案及工程名,解决如何打开高/版本VS项目

    对于VS2008等低版本与高版本VS之间的转换问题: 对照下面2个版本的不同点自由修改,切换到相应的版本文件(红字修改,灰色删除) ---------------------------------- ...

  4. PPTP --VPN配置

    测试:1:根据上面的步骤4,在路由器里查看状态:2:手机热点,共享给你电脑,电脑拨号,进行测试.   参考:http://jingyan.baidu.com/article/90808022ddd6a ...

  5. oracle11g ORA-12505

    对于这个问题我前一天还可以用的,第二天打开就报这个错误了. 我在网上找了很多方法,大多为修改/listener.ora这个文件里的SID,修改后也没弄好. 我的解决方法很简单, 打开Oracle Ne ...

  6. css3为图片添加鼠标移入放大效果

    只需要为添加效果的图片定义一个伪类 img.zoom-img:hover { -webkit-transform: scale(1.15); -webkit-transition-timing-fun ...

  7. 新手浅谈C#关于abstract和interface

    abstract:抽象类,是对某一类对象的抽象,继承抽象类的类和抽象类是属于关系 interface:接口,可以说是一种规范,继承接口的类表达则是,我继承了这个接口,我能做什么 举个常用的例子:抽象一 ...

  8. 在PHP项目中使用Standford Moss代码查重系统

    Standford Moss 系统是斯坦福大学大名鼎鼎的代码查重系统,它可以查出哪些同学提交的代码是抄袭别人的,从而将提交结果拒之门外.它对一切希望使用该系统的人都是开放的,那么在PHP的项目中如何使 ...

  9. Web调用ExE

    把这个文件导入注册表,那么我们在浏览器中输入PrintLabel://1022,那么就会自动调用C:\\Program Files\\xxx有限公司\\Sellercube Label Maker\\ ...

  10. Java垃圾回收基础