html5 viewport使用方法示例详解


Posted in HTML / CSS onDecember 02, 2013

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”/>
HTML / CSS 相关文章推荐
CSS3 渐变(Gradients)之CSS3 径向渐变
Jul 08 HTML / CSS
CSS3 实用技巧:实现黑白图像效果示例代码
Jul 11 HTML / CSS
CSS3用@font-face实现自定义英文字体
Sep 23 HTML / CSS
详解CSS 3 中的 calc() 方法
Jan 12 HTML / CSS
CSS3 实现footer 固定在底部(无论页面多高始终在底部)
Oct 15 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
Sep 12 HTML / CSS
基于HTML5 audio元素播放声音jQuery小插件
May 11 HTML / CSS
使用spring mvc+localResizeIMG实现HTML5端图片压缩上传的功能
Dec 16 HTML / CSS
canvas实现滑动验证的实现示例
Aug 11 HTML / CSS
网站性能延迟加载图像的五种技巧(小结)
Aug 13 HTML / CSS
详解使用 CSS prefers-* 规范提升网站的可访问性与健壮性
May 25 HTML / CSS
CSS元素定位之通过元素的标签或者元素的id、class属性定位详解
Sep 23 HTML / CSS
html5实现的便签特效(实战分享)
Nov 29 #HTML / CSS
HTML5+JS实现俄罗斯方块原理及具体步骤
Nov 29 #HTML / CSS
HTML5样式控制示例代码
Nov 27 #HTML / CSS
HTML5 Video/Audio播放本地文件示例介绍
Nov 18 #HTML / CSS
HTML5画渐变背景图片并自动下载实现步骤
Nov 18 #HTML / CSS
HTML5在IE10、火狐下中文乱码问题的解决方法
Nov 18 #HTML / CSS
HTML5 UTF-8 中文乱码的解决方法
Nov 18 #HTML / CSS
You might like
用PHP和ACCESS写聊天室(三)
2006/10/09 PHP
php中var_export与var_dump的区别分析
2010/08/21 PHP
PHP中list()函数用法实例简析
2016/01/08 PHP
PHP-X系列教程之内置函数的使用示例
2017/10/16 PHP
SwfUpload在IE10上不出现上传按钮的解决方法
2013/06/25 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
2013/09/02 Javascript
js中prototype用法详细介绍
2013/11/14 Javascript
JavaScript利用append添加元素报错的解决方法
2014/07/01 Javascript
js中直接声明一个对象的方法
2014/08/10 Javascript
JavaScript设计模式之抽象工厂模式介绍
2014/12/28 Javascript
JavaScript中的console.assert()函数介绍
2014/12/29 Javascript
浅谈EasyUI中编辑treegrid的方法
2015/03/01 Javascript
JavaScript实现在标题栏上显示当前日期的方法
2015/03/19 Javascript
Bootstrap3制作自己的导航栏
2016/05/12 Javascript
Augularjs-起步详解
2016/07/08 Javascript
详细总结Javascript中的焦点管理
2016/09/17 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
Vue.js 和 MVVM 的注意事项
2016/11/07 Javascript
关于 jQuery Easyui异步加载tree的问题解析
2016/12/06 Javascript
AngularJS过滤器filter用法总结
2016/12/13 Javascript
NodeJS遍历文件生产文件列表功能示例
2017/01/22 NodeJs
JS表单数据验证的正则表达式(常用)
2017/02/18 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
vue 组件之间事件触发($emit)与event Bus($on)的用法说明
2020/07/28 Javascript
用Python编写分析Python程序性能的工具的教程
2015/04/01 Python
Spring http服务远程调用实现过程解析
2020/06/11 Python
解决pip install psycopg2出错问题
2020/07/09 Python
Python+Xlwings 删除Excel的行和列
2020/12/19 Python
Python .py生成.pyd文件并打包.exe 的注意事项说明
2021/03/04 Python
应届生文秘专业个人自荐信格式
2013/09/21 职场文书
大学生自我鉴定范文模板
2014/01/21 职场文书
20年同学聚会邀请函
2014/02/04 职场文书
二年级班级文化建设方案
2014/05/10 职场文书
评奖评优个人先进事迹材料
2015/11/04 职场文书
详解apache编译安装httpd-2.4.54及三种风格的init程序特点和区别
2022/07/15 Servers
python playwrigh框架入门安装使用
2022/07/23 Python