移动端适配

移动端与PC端有以下特点

①系统：PC：windows/mac(区别不大)，移动端：ios/andriod/windows(有区别)；②  浏览器：PC：区别很大，移动端：区别不大；③分辨率(尺寸)：PC：区别不大，移动端：区别很大；

设备独立像素

屏幕的大小、屏幕的尺寸（别名叫点，是个单位）；获取：window.screen.width/window.screen.height；注意：①横竖屏切换的时候，真机里的这个值不会变，但在模拟器里是会切换的；②在一个点里，可以放下多个像素；③这个值是可以被改变的（通过后面讲的缩放）；

设备独立像素是可以被修改的，分辨率是没办法被修改的。比例缩放适配就是把所有手机的宽度设置成统一的宽度。另一种适配方案就是把它的宽度设置成屏幕的分辨率。那我们切图的时候就根据分辨率来切。

设备像素（物理像素）

屏幕分辨率（实际放的像素值），买手机的时候厂家告诉你的分辨率。这个值是虚拟的，无法获取。

像素比（DPR，这个值无法修改）

缩放的比例=设备像素/设备独立像素； 获取：window.devicePixelRatio;

iphone6

375*667           设备独立像素、屏幕尺寸

750*1334         设备像素、屏幕分辨率

2                       像素比

什么叫高清屏，它们的区别是什么？   它们的区别就是像素比。 PPI：每一英寸当中，显示的像素的数量。PPI的值越大，表示你的手机像素越多，屏幕越清晰。 viewport(视口)：如果不设置，它会认为你并不是拿手机去打开网页，而是拿浏览器（PC）去打开的。

适配

在不同尺寸的手机设备上，页面相对性的达到合理的展示（自适应）或者保持统一效果的等比缩放（看起来差不多）。适配的元素：①字体；②宽高；③间距；④图像（图片、图标），这个比较复杂。

适配的方法：①百分比适配；②比例缩放适配；③viewport适配；④rem适配；⑤弹性布局适配。

百分比适配问题

①百分比的值不好计算；②需要确定父级的大小，因为要根据父级的大小进行计算；③宽度可以设置，但是高度不好设置。

一般情况下，百分比布局是需要配合其它的布局而用。

比例缩放适配

把所有机型的设备独立像素设置成一致的（以前淘宝用的是这种方法）。①viewport需要通过JS动态的设置（不能把直接device的值设置成数值）；②通过设置比例（初始比例以及缩放比例），把宽度缩放成一致的。    注意：viewport里给了缩放的值以后，最终的页面的宽度是拿原来的值除以缩放比例，而不是乘以缩放比例。

缺点：①就像在讲viewport设置宽度的时候，可以把宽度设置成一个固定值一样，会出现所有的手机看上去都是同样的大小，没有分别了，不太好。②算出的值在一些有小数的情况下可能会出现误差（无关紧要），因为设备独立像素不能有小数。

根据dpi的值，把视口进行缩放，缩放的物理像素，也就是把屏幕的尺寸直接设置成它对应的物理像素。淘宝在用，不过它只处理了dpi为2 的几个设置，以及iphone6 plus；

缺点：①这种方法有时候不准确，比如dpi不为整数的时候，会出现除不尽的情况，那缩放的倍数就会出现很长的小数，再去算物理像素的时候就会有误差。②如果屏幕的分辨率是非标准的，那么算出来的物理像素也是非标准的。

PaintCode - Turn your drawings into Objective-C or Swift drawing code/news

移动端Web页面适配方案 - Web前端-困知记 - SegmentFault 思否