一、为什么移动端网站需要适配?
假如你开发了一款PC端的网站,宽度为定宽980px,在PC端打开显示没有任何问题,那么如果这时候你用手机打开这个网站,页面会出现什么情况呢?
**明明说:**我认为手机屏幕变小了,应该会出现横向滚动条,我们可以滑动屏幕浏览页面。
** 静静说:**我认为手机屏幕变小了,可视窗口也变小了,元素会被挤开,布局也会出现错乱。
**李华说:**你们说的都不对,我用手机打开网站后,并没有出现滚动条,看到是一个完整的网站,并且布局 也没有乱掉。只是字体和所有元素都变小了,像是被缩放了一样。傻傻分不清楚。
**楼主解释:**这是为什么呢?
** 楼主解释:**原因是这样的,在PC端浏览器下,视口(CSS在浏览器上的实际布局区域)和设备独立像素(浏览器的可视区域,同一款手机该值为固定值,例如:iphone6的横向独立像素为750px)是个1:1的关系,而在移动端视口却比设备独立像素要大很多。这是因为移动端浏览器厂商在设计浏览器时,考虑到PC端网站会在移动端浏览的情况,为了避免产生布局混乱的效果,所以他的视口要比设备独立像素要大得多。又考虑到如果正常显示布局区域,可能会出现横向滚动条,所以,浏览器对视口做了缩放,让他正好铺满整个可视区域。(如若不理解,请继续往下看)
**结论:**这并不是我们想要看到的效果,我们想要看到的应该是和我们UI设计稿上一样完美,视觉上毫无缩放感(相对于设计稿来说的,并不是真的没有缩放)的界面。
二、设备像素和设备独立像素的区别
设备像素: 简单说,设备像素就是咱们买手机时关注的那个“手机分辨率”,又称为物理像素,是个固定值,iphone6的设备像素是1334×750;
设备独立像素: