移动端适配一像素和视口

[Anderson-James-oss]

适配

想要理解适配必须先理解 像素和 视口

像素

一般写CSS单位时我们直接写多少px，可是这个px写上之后发生了什么呢？

对于像素分为**设备像素(物理像素)**和 设备独立像素(CSS像素)

• 设备像素(物理像素)

这个我们很常见，比如买手机的时候，Apple店家告诉你，这是iPhone 6 Pluse，1920X1080高清像素，5.5寸大屏。这里的1920*1080其实就是 设备像素，也称为屏幕的物理像素。任何设备屏幕的物理像素的数量都是固定不变的，单位是pt。

• CSS像素

这就是我们平时CSS里面写的像素，单位px，CSS像素也可以称为设备独立像素(device-independent pixels)，简称为dips，单位是dp；

  width:200px;

对于这个CSS属性，很明显表示这个元素横跨了200个CSS像素。那么这200个CSS像素相当于多少个设备像素(或者说物理像素)呢？

这取决于两个条件：
1:页面是否缩放
2:屏幕是否为高密度

1.

视口

• 布局视口
• 视觉视口
• 理想视口

布局视口
桌面浏览器中，浏览器窗口就是布局视口，html的宽度就是浏览器的宽度。

浏览器厂商为了让用户在小屏幕下网页也能够显示地很好，所以把视口宽度设置地很大，一般在 768px ~ 1024px 之间，最常见的宽度是 980px。iPhone4的Safari默认是以980px来渲染网页的。

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

meta标签设置视口宽度：

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

媒体查询与布局视口:
700px 指的是布局视口的宽度

@media (min-width: 700px){
    ...
}

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

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

手机可以看到的区域，视觉视口

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

参考链接1
参考链接2