移动端Web系列3 -- viewport
来源:互联网 发布:linux mount nas 编辑:程序博客网 时间:2024/06/06 01:08
写在前面
- 这里就跳过了文档申明知识的介绍了,这么好的机会还不用html5的,你还在等什么?
- 概念了解: device pixels and css pixels
- css像素: 浏览器使用的抽象单位,主要用来在网页上绘制内容
- 设备像素: 显示屏幕的最小物理单位,每个 dp 包含自己的颜色、亮度
- css 1px != device 1px
- 概念了解: screen size and window size
viewport
由来
由于手机屏幕相对桌面显示器要小很多,传统网页上的设计在手机上的体验会很糟糕,阅读性非常差。
为了让手机也能获得良好的网页浏览体验,Apple 在移动版 Safari 中定义了 viewport meta 标签(如果没记错最早提出的话),用于创建一个虚拟窗口(layout viewport),这个虚拟窗口的分辨率接近于桌面显示器,Apple 将其定义为980px。然后将虚拟窗口映射到移动设备的屏幕上,按比例缩放并重新渲染网页。
划分
虚拟窗口(layout viewport)
移动浏览器默认情况下把 viewport 设置为一个比较宽的值(防止太窄而在可视区域中显示错乱)。该默认的 viewport 称为 layout viewport。
宽度可通过 Js 获取(基本所有设备都支持)document.documentElement.clientWidthdocument.documentElement.clientHeight
视觉窗口(visual viewport)
浏览器可视区域大小。可理解为手机物理屏幕。宽度可通过 Js 获取(不支持Android2, Opera Mini, UC8)
window.innerWidthwindow.innerHeight
ideal viewport
由Peter-Paul Koch提出的一种概念,一个完美适配移动设备的 viewport。理想状态是不需要用户缩放和横向滚动条就能正常查看,显示的文字大小合适,不区分分辨率,屏幕密度等。meta viewport
移动端默认使用的是 layout viewport ,而我们想要达到类似 ideal viewport 的效果的话,可以通过 meta 标签来对 viewport 进行控制。移动开发中必出场的定义:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
用来实现 ideal viewport 的效果。
meta viewport 标签属性说明
width: 320 // 设置 layout viewport 的宽度,device-width 为设备宽度height: 800 // 和 width 对应,一般很少用initial-scale: 1 // 设置页面初始缩放值,minimum-scale: 1 // 允许用户的最小缩放值maximum-scale: 1 // 允许用户的最大缩放值user-scalable: yes/no // 是否允可以手动缩放
关于 meta viewport 的各属性还有很多有趣的知识点。视频中可以揭晓~
Tips
- device-width 查询的是设备像素
- 不同浏览器的默认 layout viewport 略有不同
- 事件坐标在移动端各种不兼容
- initial-scale 和 device-width 叠加才能兼容目前的移动设备viewport 匹配
- 缩放值越大,当前 viewport 的宽度就越小,但是,并不是所有设备都能支持 initial-scale=2 的
- 当前缩放值 = ideal viewport 宽度 / visual viewport 宽度
- 当设置宽度值冲突时,浏览器会选择最大值
参考文献
- Mozilla viewport
- Google Developers
- ppk - viewport1
- ppk - viewport2
- ppk - viewport3
- ppk 大神的视频,建议看看。
- 移动端Web系列3 -- viewport
- web移动端开发(2)-viewport
- web移动端viewport的理解
- 移动web-viewport定义
- 移动web开发viewport记录
- 移动WEB viewport 相关知识
- 移动Web开发基础-Viewport
- 移动端字体viewPort
- 移动端viewport
- 移动端viewport
- 移动web开发之——viewport
- 移动web开发viewport深入理解
- 移动web开发中viewport的理解
- 移动web开发之——viewport
- 移动web开发之视口viewport
- 移动端 viewport 概念介绍
- 移动端的meta viewport
- HTML 5 --- 移动端viewport:
- 相关参数--与GrounTruth对应关系
- 积分奖励成为app用户增长的主流渠道
- JVM调优总结 -Xms -Xmx -Xmn -Xss
- Bootstrap学习笔记(实习第2天)
- 使用Java VisualVM监控远程JVM
- 移动端Web系列3 -- viewport
- android的logcat详细用法
- 移动端Web系列4 -- meta
- nginx---增加perl-module
- 移动页面布局方法
- sql
- (5)Linux ----- Shell编程算术运算拓展 ---- ③
- dedecms 自由列表调用代码
- 程序猿最应去的网站有哪些?