1、像素概念：css中的像素是逻辑上的，不是物理上的，在不同的硬件上，每一个px由不同的硬件像素点来渲染，物理像素点(dp)与css的逻辑像素点之间的比例关系为dpr，物理像素越小，则渲染的效果越好，所谓物理像素分辨率也越高。

2、屏幕分辨率：屏幕的分辨率是可以调节的，屏幕分辨率的宽度是指屏幕可以容纳多少个css的逻辑像素点px，浏览器在缩放的时候会改变，放大时，可容纳的css的px变少了，实质是逻辑px的真实尺寸变大了。

首先明白，同样的网页到了移动端尺寸变小了，是因为移动端的物理像素尺寸小+缩放造成的，尽管高分辨率的设备对一个逻辑像素用更多的物理像素点来渲染（dpr变大了），但这个增量不足以弥补物理像素点本身的缩小，假设px与dp是一一对应的（dpr=1），那么同样尺寸的设备，物理分辨率越高，则渲染出来的效果越小。

移动端的viewport：有三个viewport，layout viewport，布局视口，iphone默认是980px（大概值），会把网页布局在980px宽度的视口上，默认情况会自动缩放，使得980px铺满屏幕。不设置宽度只设置scale=1的话，会出现横向的滑动条（即使我们的网页没有超过device-width）。设置宽度为设备宽度后，只要scale=1，css中没有超过设备宽度的，就不会出现横向的滚动条。可以想象，在meta中scale=1，width不同，float元素换行情况会不同。