移动端网页开发所要具有的基础知识二（视口）

 

　　作移动端网页，首先必须了解一些基本的概念。

　　最重要的是了解像素和视口。

　　我在上一篇文章中已经介绍了像素，此次咱们再来谈谈视口。

　　视口

　　桌面浏览器中，浏览器窗口就是约束你的css布局视口（又称初始包含块）。它是全部css百分比宽度推算的根源，它的做用是给css布局限制了一个最大宽度，视口的宽度和浏览器视口宽度一致。

　　可是在移动端，状况就很复杂了。

　　1️⃣布局视口（layout viewport）

　　浏览器厂商为了让用户在小屏幕下网页也能很好地显示，因此把视口宽度设置地很大，通常在768px~1024px之间，最多见的宽度是980px。

　　因此，在手机上，视口与移动端浏览器屏幕宽度再也不是相关联，是彻底独立的，这个浏览器厂商定的视口被称为布局视口。

　　

　　超过屏幕宽度将出现横向滚动条。

　　能够这样设置布局视口的宽度：

　　<meta name="viewport" content="width=640">

　　document.documentElement.clientWidth/Height返回布局视口的尺寸。

　　

　　视觉视口（visual viewport）

　　视觉视口是用户正在看到的网页的区域，大小是屏幕中css像素的数量。

　　

　　window.innerWidth/Height返回视觉视口的尺寸。

　　

　　理想视口

　　布局视觉明显对用户是不友好的，彻底忽略了手机自己的尺寸。因此苹果引入了理想视口的概念，它是对设备来讲最理想的布局视口尺寸。理想视口对用户来讲是最理想的，用户进入页面的时候不须要缩放。

　　所谓的（最理想的宽度）多少合适呢？其实，若是咱们把布局视口的宽度改为屏幕的宽度就不用缩放了，能够这样设置告诉浏览器使用它的理想视口：

　　<meta name="viewport" content="width=device-width">

　　定义理想视口是浏览器的事情，并不能简单地认为是开发者定义的，开发者只能使用。

　　screen.width/height返回理想视口的尺寸，有严重兼容性问题的，可能返回两种值：

　　一、理想视口的尺寸（下载浏览器）

　　二、屏幕的设备像素尺寸（内置浏览器）

　　Screen size tests和Understanding viewport能够测试你的设备的screen.width值，同一设备的不一样浏览器返回的值多是不同的。这一状况主要发生在默认浏览器和下载浏览器（如UC、Chrome）之间。

　　下载浏览器所有返回的都是理想视口尺寸。

　　

　　缩放

　　缩放与设备像素、css像素的关系

　　缩放是在放大或缩小css像素，好比一个宽度为200px的元素不管放大多少，仍是200个css像素。可是由于这些像素被放大了，因此css像素也就跨越了更多的设备像素，缩小则相反。

　　

　　缩放与视口

　　缩放会影响视觉视口的尺寸。

　　页面被用户放大，视觉视口内css像素数量减小，被用户缩小，视觉视口内css像素数量增多。

　　用户缩放不会影响布局视口。

 

　　缩放比例

　　咱们在开发者工具中能够在这里查看缩放比例：

　　

　　这里的0.3是相对于理想视口的。

　　在下载浏览器中，能够这么算（理想视口与视觉视口的比）

　　zoom level=screen.width/window.innerWidth

　　

　　禁止缩放

　　<meta name="viewport" content="user-scalable=no">

 

　　设置缩放

　　<meta name=viewport" content="initial-scale=2">

　　使用initial-scale有一个反作用：同时也会将布局视口的尺寸设置为缩放后的尺寸。因此initial-scale=1与width=device-width的效果是同样的。

　　

　　完美视口

　　解决各类浏览器兼容问题的理想视口设置

　　<meta name="viewport" content="width=devive-width,initial-scale=1">

　　

　　设备像素比

　　在谈到像素的时候，讲到除了缩放，屏幕是否为高密度也会影响设备像素和css像素的关系。

　　在缩放程度为100%时，他们的比例叫作设备像素比（device pixel ratio）:

　　dpr=设备像素/css像素

　　能够经过JS获得：window.devecePixelRatio

　　设备像素比也和视口有关：

　　dpr=屏幕横向宽度/理想视口宽度

　　

　　最后打个广告，欢迎加入本人建立的前端qq群399627992，谢谢