HTML5的viewport使用
viewport 语法介绍:
01 <!-- html document --> 02 <meta name="viewport" 03 content=" 04 height = [pixel_value | device-height] , 05 width = [pixel_value | device-width ] , 06 initial-scale = float_value , 07 minimum-scale = float_value , 08 maximum-scale = float_value , 09 user-scalable = [yes | no] , 10 target-densitydpi = [dpi_value | device-dpi | high-dpi | medium-dpi | low-dpi] 11 " 12 />
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之间。
1 <!-- html document --> 2 <meta name="viewport" content="target-densitydpi=device-dpi" /> 3 <meta name="viewport" content="target-densitydpi=high-dpi" /> 4 <meta name="viewport" content="target-densitydpi=medium-dpi" /> 5 <meta name="viewport" content="target-densitydpi=low-dpi" /> 6 <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的范围之内。
例:
(设置屏幕宽度为设备宽度,禁止用户手动调整缩放)
<meta name="viewport" content="width=device-width,user-scalable=no" />
(设置屏幕密度为高频,中频,低频自动缩放,禁止用户手动调整缩放)
<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"/>
转载于:https://www.cnblogs.com/jyybeam/p/5801552.html
HTML5的viewport使用相关推荐
- HTML5之Viewport详解
做移动Web开发也有一年多的时间了,虽然手机上浏览器对于PC上来说很友好了,但是手机各种设备的显示尺寸分辨率大小不一也要花大心思兼容它们. 关于HTML5中Viewport的文章Google,百度一搜 ...
- [转] 移动平台Html5的viewport使用经验
[转] 移动平台Html5的viewport使用经验 转自:http://blog.csdn.net/wuruixn/article/details/8591989 问题描述 web页面采用html5 ...
- HTML5 viewport 标签与 CSS3 background-size 属性 使图片完全适应区域内容
要使一张图片不论在移动端还是在桌面端都能适应区域内容,可以使用 HTML5 的 viewport 标签结合 CSS3 的 background-size 属性. 适应区域内容是指图片的宽或高的长度满足 ...
- cocos2d-js 入门 (主要是HTML5)
cocos2d-js是cocos2d-x的JavaScript版本,真正跨全平台的游戏引擎,采用原生JavaScript语言,可发布到包括Web平台,iOS,Android,Windows Phone ...
- html galgame引擎,cocos2d-js 入门 (主要是HTML5)
原贴地址:http://www.cnblogs.com/kenkofox/p/4153848.html cocos2d-js是cocos2d-x的JavaScript版本,真正跨全平台的游戏引擎,采用 ...
- html页面一个屏幕大小不一样,关于web页自动适配屏幕大小
一.先了解下html5的viewport使用 随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的 ...
- 移动端多页面APP(MPA)开发体验
移动端多页面APP(MPA)开发体验 什么是移动端应用 多页面应用和单页面应用 开发环境准备 安装和配置Git VsCode中配置简体中文语言环境和git(windows环境) 建立MPA项目 开发示 ...
- 使用js动态控制html页面缩放
今天拿到的需求:pad版本的页面在手机上要适配,我真是一口老血 最快的方法是缩放页面,核心问题: js动态控制html页面缩放 搜到别人写的 js控制页面缩放_江-月*夜的博客-CSDN博客_js 控 ...
- 移动端多页面应用(MPA)的开发(一)
移动端多页面应用(MPA)的开发(一) 移动端应用技术概况 什么是移动端应用 移动应用开发技术演化 原生app(native-app)开发 web-app开发 即通过浏览器访问 混合式app(Hybr ...
最新文章
- zabbix生成资源性能报表+邮件自动发送
- Object类型转换为long或者Long
- Ubuntu 16.04设置Redis为开机自动启动服务
- java调用spark_spark中的并行方法调用以及传递方法中使用spark会话
- android studio工程特点,Android Studio的重要特性
- vue 实现页面静态化
- [Leedcode][JAVA][第72题][动态规划]
- 【Python 必会技巧】copy 模块中 copy() 与 deepcopy() 函数的区别
- linux防火墙ddos,Linux iptables防火墙详解 + 配置抗DDOS***策略实战
- 一图解惑SQL JOINS
- java sql注入 过滤器_java 过滤器filter防sql注入 | 学步园
- cs1.6联机服务器没有响应,cs1.6联机问题解说
- Centos7部署kubernetes集群CA证书创建和分发(二)
- Axure 设计原型图 使用总结
- 【Unity数据持久化】Ixmllserializable接口的使用
- [解决方案] LaTeX公式中的多行大括号 (如涵盖多个不等式)
- PMBOK6相关方:权利利益方格
- nginx 实现备案域名的配置 + 跨域配置
- 实现运动目标检测(opencv3)(一)
- Android中通过来电转移实现“电话已关机”,“此号码已停机”等