HTML5移动端meta标签中viewpoint简介
2016-04-30 00:00
169 查看
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] |
" |
/> |
控制 viewport 的大小,pixel_value表示可以指定的一个值或者特殊的值,而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之间。
为了防止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"/>
相关文章推荐
- APP登录页面设计的几个细节
- 为什么要认识陌生人?陌生人,第一句聊什么?
- 好用到吐血!APP设计利器Sketch
- 只做重要的事情:ElephantBItes任务督促
- Android——文本类控件
- Objective-c_Date 日期对象
- 玩玩Xamarin Evolve 2016带来的新特性(一)-iOS Simulator(for Windows)
- Image Classification: Data-driven Approach, k-Nearest Neighbor, train/val/test splits
- IOS几种定时器
- [Android]使用全局变量传递数据
- Swift之字符串的介绍
- 视频播放 iOS8.0 与iOS 9.0
- myapps快速开发平台常用知识点
- iOS开发之旋转动画及GIF格式图片的播放
- 20145219 《Java程序设计》实验四 Android开发基础设计实验报告
- android悬浮窗口的实现
- 手机端不换行
- ARC下可能的内存泄露
- iOS:导航条滚动透明度随着tableView的滚动而变化
- Android基础知识:常见布局、logcat相关和文件读写