目录
1.背景介绍
2.知识剖析
3.常见问题
4.解决方案
5.编码实战
6.扩展思考
7.参考文献
8.更多讨论
首先,什么是viewport
通俗的讲,移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域
再具体一点,就是浏览器上用来显示网页的那部分区域,但viewport又不局限于浏览器可视区域的大小,它可能比浏览器的可视区域要大,也可能比浏览器的可视区域要小。
为了能在移动设备上正常显示那些传统的为桌面浏览器设计的网站,移动设备上的浏览器都会把自己默认的viewport设为980px或1024px(也可能是其它值,这个是由设备自己决定的)
css中的px:
在桌面浏览器:1px(下面我们读成‘css像素’)代表1个物理像素,也就是1css像素 = 1物理像素
没有加meta viewport标签时候:移动端viewport宽度为980px或者1024px,这时候1css像素不确定是几个物理像素(根据分辨率来算)
写个20px的文字看看效果(见演示)
在加了meta viewport标签以后呢?我们引入另外一个单位:密度独立像素dp/dip
dp/dip是在不同设备都显示为同一大小的单位(见演示)
简单理解,在使用了
添加meta标签后20px的文字(见演示)
设备的独立像素都是可以查到的
dp移动设备的分辨率:
说到移动设备分辨率,这里先提另一个单位dpi(dot per inch)
dpi/ppi是表示一个每inch多少个物理像素dot的单位
在最开始是160dpi/ppi
后来因为技术的提高,为了追求高清屏幕,有了320dpi/ppi以上等等的屏幕
下面继续说移动设备分辨率
我们可以理解分辨率就是长宽分别有多少个物理像素dot
但是设备大小就那么大,所以同样大小的设备,分辨率越高,物理像素堆得越多,屏幕越清晰,也就是dpi越高(见演示)
UI口中的‘像素’
UI图中的像素,也就是psd中我们量出来的像素,比如说任务中psd图的宽度为750px或者640px(见演示)
UI口中的像素是移动设备分辨率
不负责任的说法:除以2写到css里
更不负责任的说法:使用js动态控制viewport,这个这次就不讲了,自己查
1.如何使用js动态控制viewport
2.如何理解其他vw、vh等单位
感谢大家观看
By关楠