webapp之路--理解viewport的使用
随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择。然而,每一款手机有不同的分辨率,不同屏幕大小,如何使我们开发出来的应用或页面大小能适合各种高端手机使用呢?学习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"/>
webapp之路--理解viewport的使用的更多相关文章
- webapp之路--之必备知识
移动设备的用户越来越多,每天android手机的激活量都已经超过130万台,所以我们面向移动终端的WebAPP也开始跟进了.本文主要介绍webapp的开发与调试的相关知识和经验,以及给出几种可选的解决 ...
- 深入理解viewport(转)
在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewport了,只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用,才能更好地让我们的网页适配或 ...
- SVG 入门——理解viewport,viewbox,preserveAspectRatio
工欲善其事必先利其器,没有真正搞懂SVG里的viewport,viewbox, preserveAspectRatio这三个属性,就很容易遇到坑,最近写项目用到svg这三个属性被我一眼就略过 ,后来发 ...
- 深入理解viewport
这篇文章我已写成pdf,建议直接下载浏览. 链接:https://pan.baidu.com/s/1c4cwd7E 密码:jty1 <对viewport标签的理解> --版权所有 @RYZ ...
- 可视化svg深入理解viewport、viewbox、preserveaspectradio
直接运行此例子 深入理解svg的viewport.viewbox.preserveaspectradio实例 <!DOCTYPE html> <html lang="en& ...
- HTML-HTML5+CSS3权威指南阅读(五、深入理解viewport)
1.手机浏览器与桌面浏览器的不同 现在手机浏览器的显示分辨率与桌面浏览器差不多,但是手机的尺寸比电脑要小很多.一个没做过响应式处理的网站,在手机和电脑上显示完全一样的内容, 不可避免的会出现字体被缩小 ...
- 通透理解viewport
摘自:https://blog.csdn.net/u014787301/article/details/44466697 在移动设备上进行网页的重构或开发,首先得搞明白的就是移动设备上的viewpor ...
- Android OpenGL ES和OpenGL一起学(二)------理解Viewport(视口)和坐标系Android OpenGL ES篇(转帖)
来自:http://www.cnblogs.com/xiaobo68688/archive/2011/12/01/2269985.html 首先我们在屏幕中心显示一个矩形,效果如图: // 代 ...
- webapp之路--meta标签format-detection、apple-mobile-web-app-capable
1. format-detection翻译成中文的意思是“格式检测”,顾名思义,它是用来检测html里的一些格式的,那关于meta的format-detection属性主要是有以下几个设置: meta ...
随机推荐
- angular跨域访问的问题
CORS跨域资源共享 跨域资源共享(CORS )是一种网络浏览器的技术规范,它为Web服务器定义了一种方式,允许网页从不同的域访问其资源. Form responseHeaders = (Form) ...
- 工控中的windows
今后的windows如何在工业应用中发展,之前的windows如何保证安全的运行,如果只专注于消费,生产上是否还需要windows,如果那样,windows真的只有windows了
- php非阻塞
PHP非阻塞模式 让PHP不再阻塞当PHP作为后端处理需要完成一些长时间处理,为了快速响应页面请求,不作结果返回判断的情况下,可以有如下措施: 一.若你使用的是FastCGI模式,使用fastcgi_ ...
- IMP指针
可能大家一直看到有许多朋友在Runtime相关文章中介绍IMP指针的概念,那么IMP究竟有什么实际作用呢?让我们先从一个函数看起来. Method Swizzling 如果对Runtime有一定了解的 ...
- linux command----vi
vi命令是UNIX操作系统和类UNIX操作系统中最通用的全屏幕纯文本编辑器.Linux中的vi编辑器叫vim,它是vi的增强版(vi Improved),与vi编辑器完全兼容,而且实现了很多增强功能. ...
- js框架——angular.js(3)
1. 过滤filter 过滤就是将内容进行筛选或者转换或者两者都有,一般的表示方式就是在变量后面添加"|",然后加上过滤条件,如—— {{name|currency}} 这个cur ...
- HDU 1532 Drainage Ditches (最大网络流)
Drainage Ditches Time Limit : 2000/1000ms (Java/Other) Memory Limit : 65536/32768K (Java/Other) To ...
- POJ 1236 Network of Schools(tarjan算法 + LCA)
这个题目网上有很多答案,代码也很像,不排除我的.大家的思路应该都是taijan求出割边,然后找两个点的LCA(最近公共祖先),这两个点和LCA以及其他点构成了一个环,我们判断这个环上的割边有几条,我们 ...
- 3398: [Usaco2009 Feb]Bullcow 牡牛和牝牛
3398: [Usaco2009 Feb]Bullcow 牡牛和牝牛 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 243 Solved: 167[S ...
- 使用for循环还是foreach循环?
很多时候我们很自然的认为,for循环的时候使用foreach和原来的for循环用下标的方式遍历是相同的. 而且因为foreach循环写法简单,很容易理解,而且少去了很多麻烦的变量,所以估计在学会使用f ...