长沙尚学堂|十年树人|成就高薪
致力推动IT教育,我们正在行动    咨询热线:0731-83072091

移动前端开发之viewport的深入理解

时间:2016-03-30 14:52:41   来源:长沙尚学堂   阅读:

1. 深入理解概念:CSS像素、设备物理像素、设备独立像素.
    传统的屏幕: 1px CSS像素 == 1个物理像素
    但实际上对于当前移动端的Retina 屏幕: 1px CSS像素  不等于 1个物理像素

 



2. 还有一个因素会引起css中px的变化,那就是用户缩放.
 

3. css中的1px并不是代表屏幕上的1px,你分辨率越大,css中1px代表的物理像素就会越多,devicePixelRatio的值也越大,这很好理解,因为你分辨率增大了,但屏幕尺寸并没有变大多少,必须让css中的1px代表更多的物理像素,才能让1px的东西在屏幕上的大小与那些低分辨率的设备差不多,不然就会因为太小而看不清
 

4. target-densitydpi
特别说明的是,当 target-densitydpi=device-dpi 时, css中的1px会等于物理像素中的1px。
因为这个属性只有安卓支持,并且安卓已经决定要废弃target-densitydpi  这个属性了,所以这个属性我们要避免进行使用 

 

5. 浏览器默认的viewport叫做 layout viewport。这个layout viewport的宽度可以通过 document.documentElement.clientWidth 来获取。

    layout viewport 的宽度是大于浏览器可视区域的宽度的,所以我们还需要一个viewport来代表 浏览器可视区域的大小,ppk把这个viewport叫做 visual viewport。visual viewport的宽度可以通过window.innerWidth 来获取,但在Android 2, Oprea mini 和 UC 8中无法正确获取。

 

现在我们已经有两个viewport了:layout viewport 和 visual viewport。但浏览器觉得还不够,因为现在越来越多的网站都会为移动设备进行单独的设计,所以必须还要有一个能完美适配移动设备的viewport。所谓的完美适配指的是,首先不需要用户缩放和横向滚动条就能正常的查看网站的所有内容;第二,显示的文字的大小是合适,比如一段14px大小的文字,不会因为在一个高密度像素的屏幕里显示得太小而无法看清,理想的情况是这段14px的文字无论是在何种密度屏幕,何种分辨率下,显示出来的大小都是差不多的。当然,不只是文字,其他元素像图片什么的也是这个道理。ppk把这个viewport叫做 ideal viewport,也就是第三个viewport——移动设备的理想viewport。

标签:前端
分享:0
开班计划
热门文章
视频下载
猜你喜欢