【免费】移动前端开发之viewport的深入理解1资源-CSDN文库

需积分: 0 69 浏览量 2022-08-03 19:11:15 上传评论收藏 1.02MB PDF 举报

资源详情

资源评论

资源推荐

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

在移动设备上进⾏⽹页的重构或开发，⾸先得搞明⽩的就是移动设备上的

viewport了，只有明⽩了viewport的概念以及弄清楚了跟viewport有关的meta

标签的使⽤，才能更好地让我们的⽹页适配或响应各种不同分辨率的移动设

备。

⼀、viewport的概念

通俗的讲，移动设备上的viewport就是设备的屏幕上能⽤来显⽰我们的⽹页

的那⼀块区域，在具体⼀点，就是浏览器上(也可能是⼀个app中的webview)

⽤来显⽰⽹页的那部分区域，但viewport又不局限于浏览器可视区域的⼤

⼩，它可能⽐浏览器的可视区域要⼤，也可能⽐浏览器的可视区域要⼩。在

默认情况下，⼀般来讲，移动设备上的viewport都是要⼤于浏览器可视区域

的，这是因为考虑到移动设备的分辨率相对于桌⾯电脑来说都⽐较⼩，所以

为了能在移动设备上正常显⽰那些传统的为桌⾯浏览器设计的⽹站，移动设

备上的浏览器都会把⾃⼰默认的viewport设为980px或1024px（也可能是其它

值，这个是由设备⾃⼰决定的），但带来的后果就是浏览器会出现横向滚动

条，因为浏览器可视区域的宽度是⽐这个默认的viewport的宽度要⼩的。下

图列出了⼀些设备上浏览器的默认viewport的宽度。

⼆、css中的1px并不等于设备的1px

在css中我们⼀般使⽤px作为单位，在桌⾯浏览器中css的1个像素往往都是

对应着电脑屏幕的1个物理像素，这可能会造成我们的⼀个错觉，那就是css

中的像素就是设备的物理像素。但实际情况却并⾮如此，css中的像素只是⼀

个抽象的单位，在不同的设备或不同的环境中，css中的1px所代表的设备物

理像素是不同的。在为桌⾯浏览器设计的⽹页中，我们⽆需对这个津津计

较，但在移动设备上，必须弄明⽩这点。在早先的移动设备中，屏幕像素密

度都⽐较低，如iphone3，它的分辨率为320x480，在iphone3上，⼀个css像素

确实是等于⼀个屏幕物理像素的。后来随着技术的发展，移动设备的屏幕像

⾸先，移动设备上的浏览器认为⾃⼰必须能让所有的⽹站都正常显⽰，即

使是那些不是为移动设备设计的⽹站。但如果以浏览器的可视区域作为

viewport的话，因为移动设备的屏幕都不是很宽，所以那些为桌⾯浏览器设

计的⽹站放到移动设备上显⽰时，必然会因为移动设备的viewport太窄，⽽

挤作⼀团，甚⾄布局什么的都会乱掉。也许有⼈会问，现在不是有很多⼿机

分辨率都⾮常⼤吗，⽐如768x1024，或者1080x1920这样，那这样的⼿机⽤来

显⽰为桌⾯浏览器设计的⽹站是没问题的吧？前⾯我们已经说了，css中的

1px并不是代表屏幕上的1px，你分辨率越⼤，css中1px代表的物理像素就会

越多，devicePixelRatio的值也越⼤，这很好理解，因为你分辨率增⼤了，但

屏幕尺⼨并没有变⼤多少，必须让css中的1px代表更多的物理像素，才能让

1px的东西在屏幕上的⼤⼩与那些低分辨率的设备差不多，不然就会因为太

⼩⽽看不清。所以在1080x1920这样的设备上，在默认情况下，也许你只要

把⼀个div的宽度设为300多px（视devicePixelRatio的值⽽定），就是满屏的

宽度了。回到正题上来，如果把移动设备上浏览器的可视区域设为viewport

的话，某些⽹站就会因为viewport太窄⽽显⽰错乱，所以这些浏览器就决定

默认情况下把viewport设为⼀个较宽的值，⽐如980px，这样的话即使是那些

为桌⾯设计的⽹站也能在移动浏览器上正常显⽰了。ppk把这个浏览器默认

的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中⽆法正确获取。

剩余13页未读，继续阅读

评论0

内容反馈

Crazyanti

粉丝: 16
资源: 303

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈

feedback-tip