Meta标签中的viewport属性
来源:互联网 发布:邮箱软件哪个好 编辑:程序博客网 时间:2024/05/17 05:11
一、什么是Viewport
通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域,在具体一点,就是浏览器上(也可能是一个app中的webview)用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小。在默认情况下,一般来讲,移动设备上的viewport都是要大于浏览器可视区域的,这是因为考虑到移动设备的分辨率相对于桌面电脑来说都比较小,所以为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站,移动设备上的浏览器都会把自己默认的viewport设为980px或1024px(也可能是其它值,这个是由设备自己决定的),但带来的后果就是浏览器会出现横向滚动条,因为浏览器可视区域的宽度是比这个默认的viewport的宽度要小的。
移动设备默认的viewport是layout viewport
二、常见的meta标签Viewport的写法
<metaname="viewport" content="width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0,user-scalable=no;"/>
参数说明
width
控制 viewport 的大小,可以指定的一个值,如果 600,或者特殊的值,如 device-width 为设备的宽度(单位为缩放为 100% 时的 CSS 的像素)。
height
和 width 相对应,指定高度。
initial-scale
初始缩放比例,也即是当页面第一次 load 的时候缩放比例,为一个数字,可以带小数。
maximum-scale
允许用户缩放到的最大比例,为一个数字,可以带小数。
minimum-scale
允许用户缩放到的最小比例,为一个数字,可以带小数。
user-scalable
用户是否可以手动缩放。
三、关于viewport的一些问题
1、viewport并非只是ios上的独有属性,在android、winphone上同样也有viewport。它们要解决的问题是相同的,即无视设备的真实分辨率,直接通过dpi,在物理尺寸和浏览器之间重设分辨率,这个分辨率和设备的分辨率无关。
比如,你拿个3.5寸-320 * 480的iphone3 gs、3.5寸-640 * 960的iphone4或者9.7寸-1024*768的ipad2,虽然设备的分辨率不同,物理尺寸也不同,但你可以通过设置viewport让它们在浏览器里有相同的分辨率。比如说,你的网站是800px宽,你可以通过设置viewport的width=800,来让你的网站在这三个不同的设备上都刚好满屏显示你的网站。
2、如果不显示地设置viewport,那么width的默认为980。如果页面的所有元素宽度都小于980,此时width为980,如果页面最宽的位置超过980,那么width等于最大宽度。总之,默认能将整个页面从左到右显示出来。
如果设置了viewport,比如,只单纯地设置了user-scalable=no,例如<meta name="viewport" content="user-scalable=no" />,那么ios下width还是按980显示(即默认就会通过dpi缩放),但android和winphone下却不会再缩放了,浏览器分辨率和真实设置分辨率一致。
3、对于ios设备,设置width可以生效,但对于android,设置width并不会生效。ios设备,缩放的比率即dpi是通过你设置的width和设置真实分辨率自动计算的,而android下你设置width无效,你能设置的是一个特殊的字段target-densitydpi。
也就是说,有三个变量:浏览器width、设备真实width、dpi。 我们简单地用个公式来表达它们之间的关系吧(并非真实关系,简单说明用) 设备真实width * dpi = 浏览器width,这里的三个变量,设备真实width是个我们不能操作的已知值,另外两个变量我们可以设置一个来影响另一个,在ios中,我们能改的是浏览器width,dpi自动生成,而在android中,我们能改的是dpi,浏览器width自动生成。对于android,无论我们如何设置width,也不会对浏览器width产生影响。
文章转载自: meta标签中viewport http://www.studyofnet.com/news/835.html
- Meta标签中的viewport属性
- meta标签中的viewport属性
- Meta标签中的viewport属性及含义
- 关于meta标签中的viewport属性
- viewport meta标签属性
- Meta标签中的format-detection和viewport
- viewport meta元标签
- meta标签viewport详解
- viewport Meta标签简介
- <meta>标签之viewport
- meta标签viewport详解
- meta标签之viewport
- HTML5<meta name="viewport"/>标签常见属性及说明
- Html中meta标签的用法及viewport属性简介
- meta中的viewport指令
- meta中的viewport指令
- meta中的viewport指令
- meta中的viewport指令
- mongodb 基本语句
- redis jedis(java)
- TCP 通信过程中各步骤的状态
- 7z 相关类 进度条 回调函数
- 关于HTML5数据存储
- Meta标签中的viewport属性
- 为什安全测试对于汽车行业如此重要?
- java中用StringBuffer写文件实现自动换行
- Xcode怎么查找变量使用位置
- git常用命令和ViM编辑器----源于培训笔记
- matlab中“执行字符串”函数eval在不同情况下的用法(二)
- LeetCode 之 Valid Palindrome — C 实现
- 配置apt-get告诉下载源
- oc中文转字符串