【PandaTsui】深入浅出理解移动端适配（一）：大背景和小概念

一、为什么移动端网站需要适配？

　　假如你开发了一款PC端的网站，宽度为定宽980px,在PC端打开显示没有任何问题，那么如果这时候你用手机打开这个网站，页面会出现什么情况呢？

　　 **明明说：**我认为手机屏幕变小了，应该会出现横向滚动条，我们可以滑动屏幕浏览页面。

　　** 静静说：**我认为手机屏幕变小了，可视窗口也变小了，元素会被挤开，布局也会出现错乱。

　　 **李华说：**你们说的都不对，我用手机打开网站后，并没有出现滚动条，看到是一个完整的网站，并且布局 也没有乱掉。只是字体和所有元素都变小了，像是被缩放了一样。傻傻分不清楚。

　　 **楼主解释：**这是为什么呢？

　　** 楼主解释：**原因是这样的，在PC端浏览器下，视口（CSS在浏览器上的实际布局区域）和设备独立像素（浏览器的可视区域，同一款手机该值为固定值，例如：iphone6的横向独立像素为750px）是个1:1的关系，而在移动端视口却比设备独立像素要大很多。这是因为移动端浏览器厂商在设计浏览器时，考虑到PC端网站会在移动端浏览的情况，为了避免产生布局混乱的效果，所以他的视口要比设备独立像素要大得多。又考虑到如果正常显示布局区域，可能会出现横向滚动条，所以，浏览器对视口做了缩放，让他正好铺满整个可视区域。（如若不理解，请继续往下看）

　　**结论：**这并不是我们想要看到的效果，我们想要看到的应该是和我们UI设计稿上一样完美，视觉上毫无缩放感（相对于设计稿来说的，并不是真的没有缩放）的界面。

二、设备像素和设备独立像素的区别

　　设备像素： 简单说，设备像素就是咱们买手机时关注的那个“手机分辨率”，又称为物理像素，是个固定值，iphone6的设备像素是1334×750；

　　设备独立像素：

转载于:https://my.oschina.net/PandaTsui/blog/840925