初识viewport
来源:互联网 发布:收银机什么软件好 编辑:程序博客网 时间:2024/05/18 02:37
viewport相关的几个概念
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
device pixel和css pixel
前者是物理的,后者是逻辑的。
device pixel是设备的像素/分辨率,通过screen.width/height可以取到。
而我们为特定元素指定的width:24px,这样的像素则是css pixel。
在浏览器未缩放时(100%显示),两个像素大小相等。如果放大,则css pixel的面积会变大(比如200%时,1个css pixel包含4个device pixel)。
screen size和window size
screen size是显示屏大小。
window size是浏览器的client区大小(window.innerWidth 和window.innerHeight)。
桌面浏览器的viewport
桌面浏览器的viewport size等于window size(可视区域大小)。
就是说viewport的物理大小是确定的,所以缩放的话,viewport的css pixel size实际上是变化的。
比如下面的代码,blue元素(width:100%),继承了viewport的size;red元素(width:1200px)固定为1200 css pixel。结果blue元素在缩放时css pixel大小是变化的。
<html> <head> <script type="text/javascript"> function show() { alert('blueblue.width=' + document.getElementById('blue').clientWidth); alert('redred.width=' + document.getElementById('red').clientWidth); } </script> </head> <body> <div id="blue" style="background-color:blue;width:100%;"> <input type="button" value="show" onclick="show();" > </div> <div id="red" style="background-color:red;width:1200px;"> test </div> </body> </html>
移动浏览器的viewport
按照quirksmode上的说法,移动浏览器上有两种概念的viewport。一个layout viewport,一个visual viewport。visual viewport是可视区域的viewport,分横竖两种。layout viewport跟桌面版的有些类似。
移动浏览器load页面的过程,大概可以理解成:移动浏览器会先按照桌面浏览器那样,把layout布局好,然后再框上一个visual viewport供用户查看其中一部分。portrait和landscape的切换,只会导致visual viewport的变化,而layout viewport不会重新计算。
移动浏览器的layout viewport根据不同厂家而不同,不过值貌似是固定的,宽800px到1000px不等。显然这个数字比device pixel的320px要大得多,所以实际显示出来内容就很小了,但是layout的话跟desktop上的差别并不大。
meta viewport语句
可以调整layout viewport。会继承此viewport的width,然后开始布局。
过程的话,貌似和桌面浏览器把宽度拉到320px之后的效果一样。
如果桌面浏览器把宽度拉到320px之后仍能够正常显示,那移动设备上应该可以正常显示吧。
sacle指的是缩放比例,即layout viewport和visual viewport的对应关系。user-scalable:用户是否可以手动缩放。
dpi
Their text will be smooth and crisp, but their bitmap images will probably not take advantage of the full screen resolution.
听起来针对不同dpi的设备,只需要处理好图片就可以了。
参考文档:
http://www.quirksmode.org/mobile/viewports.html
http://www.quirksmode.org/mobile/viewports2.html
https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag
- 初识viewport
- viewport
- ViewPort
- Viewport
- Viewport
- viewport
- viewport
- viewport
- viewport
- viewport
- viewport
- viewPort简介
- viewport编程
- Ext_Ext.ViewPort
- TabPanel Viewport
- Ext_Ext.ViewPort
- 八、Viewport
- viewport基础
- 笔记39 | Android线程之Looper.prepare()+Looper.loop()和HandlerThread()
- RedHat 增加开机启动服务
- Mysql备份功能
- ipython notebook 修改一开始打开的文件夹路径
- 依赖注入(Dependence Injection)
- 初识viewport
- 取消a标签在移动端点击时的背景颜色 && 去除ios手机端input输入框上方有阴影
- 梁胜博士:写给程序员的话(节选)
- 表间的关系一对多/一对一/多对多关系是怎样建立的?
- equals 和==的区别
- SGU315:The Highway Belt(DP)
- 全面认识区块链——私有区块链
- js实现分享功能
- http 学习笔记