背景
开发移动端H5页面
面对不同分辨率的手机
面对不同屏幕尺寸的手机
视觉稿
在前端开发之前，视觉MM会给我们一个psd文件，称之为视觉稿。
对于移动端开发而言，为了做到页面高清的效果，视觉稿的规范往往会遵循以下两点：
首先，选取一款手机的屏幕宽高作为基准(以前是iphone4的320×480，现在更多的是iphone6的375×667)。
对于retina屏幕(如:
dpr=2)，为了达到高清效果，视觉稿的画布大小会是基准的2倍，也就是说像素点个数是原来的4倍(对iphone6而言：原先的375×667，就会变成750×1334)。
问题：
对于dpr=2的手机，为什么画布大小×2，就可以解决高清问题
对于2倍大小的视觉稿，在具体的css编码中如何还原每一个区块的真实宽高(也就是布局问题)
带着问题，往下看
一些概念
在进行具体的分析之前，首先得知道下面这些关键性基本概念(术语)。
物理像素(physical pixel)
一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。
设备独立像素(density-independent pixel)
设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如:
css像素)，然后由相关系统转换为物理像素。
所以说，物理像素和设备独立像素之间存在着一定的对应关系，这就是接下来要说的设备像素比。
设备像素比(device pixel ratio )
设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到：
设备像素比 = 物理像素 / 设备独立像素 // 在某一方向上，x方向或者y方向
在javascript中，可以通过windowdevicePixelRatio获取到当前设备的dpr。
在css中，可以通过-webkit-device-pixel-ratio，-webkit-min-device-pixel-ratio和
-webkit-max-device-pixel-ratio进行媒体查询，对不同dpr的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。
综合上面几个概念，一起举例说明下：
以iphone6为例：
设备宽高为375×667，可以理解为设备独立像素(或css像素)。
dpr为2，根据上面的计算公式，其物理像素就应该×2，为750×1334。
用一张图来表现，就是这样(原谅我的盗图)：
上图中可以看出，对于这样的css样式：
width: 2px;
height: 2px;
在不同的屏幕上(普通屏幕 vs
retina屏幕)，css像素所呈现的大小(物理尺寸)是一致的，不同的是1个css像素所对应的物理像素个数是不一致的。
在普通屏幕下，1个css像素 对应 1个物理像素(1:1)。 在retina 屏幕下，1个css像素对应 4个物理像素(1:4)。
位图像素
一个位图像素是栅格图像(如：png, jpg,
gif等)最小的数据单元。每一个位图像素都包含着一些自身的显示信息(如：显示位置，颜色值，透明度等)。
谈到这里，就得说一下，retina下的展示情况
理论上，1个位图像素对应于1个物理像素，才能得到完美清晰的展示。
在普通屏幕下是没有问题的，但是在retina屏幕下就会出现位图像素点不够，从而导致模糊的情况。
用一张图来表示：
如上图：对于dpr=2的retina屏幕而言，1个位图像素对应于4个物理像素，由于单个位图像素不可以再进一步分割，所以只能就近取色，从而导致模糊(注意上述的几个颜色值)。
所以，对于高清问题，比较好的方案就是两倍(@2x)。
如：200×300(css pixel)img标签，就需要提供400×600的。
如此一来，位图像素点个数就是原来的4倍，在retina屏幕下，位图像素点个数就可以跟物理像素点个数形成 1 :
1的比例，自然就清晰了(这也解释了之前留下的一个问题，为啥视觉稿的画布大小要×2)。
这里就还有另一个问题，如果普通屏幕下，也用了两倍，会怎样呢
很明显，在普通屏幕下，200×300(css
pixel)img标签，所对应的物理像素个数就是200×300个，而两倍的位图像素个数则是200×3004，所以就出现一个物理像素点对应4个位图像素点，所以它的取色也只能通过一定的算法(显示结果就是一张只有原图像素总数四分之一，我们称这个过程叫做downsampling)，肉眼看上去虽然不会模糊，但是会觉得缺少一些锐利度，或者是有点色差(但还是可以接受的)。
用一张来表示：
针对上面的两个问题，我做了一个demo(内网访问)狂戳这里。
demo中，100×100的，分别放在100×100，50×50，25×25的img容器中，在retina屏幕下的显示效果。
条形图，通过放大镜其实可以看出边界像素点取值的不同：
图1，就近取色，色值介于红白之间，偏淡，看上去会模糊(可以理解为拉伸)。
图2，没有就近取色，色值要么是红，要么是白，看上去很清晰。
图3，就近取色，色值介于红白之间，偏重，看上去有色差，缺少锐利度(可以理解为挤压)。
爱字图，可以通过看文字”爱”来区分模糊还是清晰。
(ps：如果看上去不明显，可以用手机扫码网页(内网地址)或者点击原图看会更直观点。
几个问题
这里说一下，移动端H5开发，在不同分辨率，不同屏幕手机下会遇到的几个经典问题。
retina下，高清问题
这个问题上面已经介绍过解决方案了：两倍(@2x)，然后容器缩小50%。
如：大小，400×600;
1img标签
width: 200px;
height: 300px;
2背景
width: 200px;
height: 300px;
background-image: url(image@2xjpg);
background-size: 200px 300px; // 或者: background-size: contain;
这样的缺点，很明显，普通屏幕下：
同样下载了@2x的，造成资源浪费。
由于downsampling，会失去了一些锐利度(或是色差)。
所以最好的解决办法是：不同的dpr下，加载不同的尺寸的。
不管是通过css媒体查询，还是通过javascript条件判断都是可以的。
那么问题来了，这样的话，不就是要准备两套了嘛(@1x 和@2x)
我想，做的好的公司，都会有这么一个服务器，通过url获取参数，然后可以控制质量，也可以将裁剪成不同的尺寸。
所以我们只需上传大图(@2x)，其余小图都交给服务器处理，我们只要负责拼接url即可。
如，这样一张原图：
https://imgalicdncom/tps/TB1AGMmIpafXpXXjpg // 原图
可以类似这样，进行裁剪：
// 200×200
https://imgalicdncom/tps/TB1AGMmIpafXpXXjpg_200x200jpg
// 100×100
https://imgalicdncom/tps/TB1AGMmIpafXpXXjpg_100x100jpg
(ps: 当然裁剪只是对原图的等比裁剪，得保证的清晰嘛~)
retina下，border: 1px问题
这大概是设计师最敏感，最关心的问题了。
首先得说一下，为什么存在retina下，border: 1px这一说
我们正常的写css，像这样border: 1px;，在retina屏幕下，会有什么问题吗
先来，来看看下面的图：
上面两张图分别是在iphone3gs(dpr=1)和iphone5(dpr=2)下面的测试效果，对比来看，对于1px的border的展示，它们是一致的，并无区别。
那么retina显示屏的优势在哪里，设计师为何觉得高清屏下(右图)这个线条粗呢明明和左右一样的~
还是通过一张图来解释(原谅我再次盗图)：
上图中，对于一条1px宽的直线，它们在屏幕上的物理尺寸(灰色区域)的确是相同的，不同的其实是屏幕上最小的物理显示单元，即物理像素，所以对于一条直线，iphone5它能显示的最小宽度其实是图中的红线圈出来的灰色区域，用css来表示，理论上说是05px。
所以，设计师想要的retina下border: 1px;，其实就是1物理像素宽，对于css而言，可以认为是border:
05px;，这是retina下(dpr=2)下能显示的最小单位。
然而，无奈并不是所有手机浏览器都能识别border:
05px;，ios7以下，android等其他系统里，05px会被当成为0px处理，那么如何实现这05px呢
最简单的一个做法就是这样(元素scale)：
scale{
position: relative;
}
scale:after{
content:"";
position: absolute;
bottom:0px;
left:0px;
right:0px;
border-bottom:1px solid #ddd;
-webkit-transform:scaleY(5);
-webkit-transform-origin:0 0;
}
我们照常写border-bottom: 1px solid #ddd;，然后通过transform:
scaleY(5)缩小05倍来达到05px的效果，但是这样hack实在是不够通用(如：圆角等)，写起来也麻烦。
当然还有其他好多hack方法，网上都可以搜索到，但是各有利弊，这里比较推荐的还是页面scale的方案，是比较通用的，几乎满足所有场景。
对于iphone5(dpr=2)，添加如下的meta标签，设置viewport(scale 05)：
这样，页面中的所有的border: 1px都将缩小05，从而达到border: 05px;的效果。
有人担心页面scale后会影响性能，@妙净同学做过性能测试，见这里(内网地址)。
看一下实现后的效果图对比(右图为优化过的)：
(ps: 被压缩过，可能看上去并不明显，可以用手机扫码或者点击这里(内网地址)对比看看)
然而，页面scale，必然会带来一些问题：
字体大小会被缩放
页面布局会被缩放(如: div的宽高等)
这两个问题后面讲到
多屏适配布局问题
移动端布局，为了适配各种大屏手机，目前最好用的方案莫过于使用相对单位rem。
基于rem的原理，我们要做的就是: 针对不同手机屏幕尺寸和dpr动态的改变根节点html的font-size大小(基准值)。
这里我们提取了一个公式(rem表示基准值)
rem = documentdocumentElementclientWidth dpr / 10
说明：
乘以dpr，是因为页面有可能为了实现1px border页面会缩放(scale) 1/dpr 倍(如果没有，dpr=1),。
除以10，是为了取整，方便计算(理论上可以是任何值)
所以就像下面这样，html的font-size可能会：
iphone3gs: 320px / 10 = 32px
iphone4/5: 320px 2 / 10 = 64px
iphone6: 375px 2 / 10 = 75px
对于动态改变根节点html的font-size，我们可以通过css做，也可以通过javascript做。
css方式，可以通过设备宽度来媒体查询来改变html的font-size：
html{font-size: 32px;}
//iphone 6
@media (min-device-width : 375px) {
html{font-size: 64px;}
}
// iphone6 plus
@media (min-device-width : 414px) {
html{font-size: 75px;}
}
/
缺点：通过设备宽度范围区间这样的媒体查询来动态改变rem基准值，其实不够精确，比如：宽度为360px 和
宽度为320px的手机，因为屏宽在同一范围区间内(
javascript方式，通过上面的公式，计算出基准值rem，然后写入样式，大概如下(代码参考自kimi的m-base模块)
var dpr, rem, scale;
var docEl = documentdocumentElement;
var fontEl = documentcreateElement('style');
var metaEl = documentquerySelector('meta[name="viewport"]');
dpr = windowdevicePixelRatio || 1;
rem = docElclientWidth dpr / 10;
scale = 1 / dpr;
// 设置viewport，进行缩放，达到高清效果
metaElsetAttribute('content', 'width=' + dpr docElclientWidth + ',initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=no');
// 设置data-dpr属性，留作的css hack之用
docElsetAttribute('data-dpr', dpr);
// 动态写入样式
docElfirstElementChildappendChild(fontEl);
fontElinnerHTML = 'html{font-size:' + rem + 'px!important;}';
// 给js调用的，某一dpr下rem和px之间的转换函数
windowrem2px = function(v) {
v = parseFloat(v);
return v rem;
};
windowpx2rem = function(v) {
v = parseFloat(v);
return v / rem;
};
windowdpr = dpr;
windowrem = rem;
这种方式，可以精确地算出不同屏幕所应有的rem基准值，缺点就是要加载这么一段js代码，但个人觉得是这是目前最好的方案了。
因为这个方案同时解决了三个问题：
border: 1px问题
高清问题
屏幕适配布局问题
说到布局，自然就得回答一下最初的留下的那个问题：如何在css编码中还原视觉稿的真实宽高
前提条件：
拿到的是一个针对iphone6的高清视觉稿 750×1334
采用上述的高清方案(js代码)。
如果有一个区块，在psd文件中量出：宽高750×300px的div，那么如何转换成rem单位呢
公式如下：
rem = px / 基准值;
对于一个iphone6的视觉稿，它的基准值就是75(之前有提到);
所以，在确定了视觉稿(即确定了基准值)后，通常我们会用less写一个mixin，像这样：
// 例如: px2rem(height, 80);
px2rem(@name, @px){
@{name}: @px / 75 1rem;
}
所以，对于宽高750×300px的div，我们用less就这样写：
px2rem(width, 750);
px2rem(height, 300);
转换成html，就是这样：
width: 10rem; // -> 750px
height: 4rem; // -> 300px
最后因为dpr为2，页面scale了05，所以在手机屏幕上显示的真实宽高应该是375×150px，就刚刚好。
倘若页面并没有scale 05，我们的代码就得这样：
px2rem(width, 375);
px2rem(height, 150);
这样的宽高，我们往往是这样得来的：
将750×1334的视觉稿转成375×667的大小后，再去量这个区块的大小(感觉好傻)。
在750×1334量得区块宽高是750×300px后，再口算除以2(感觉好麻烦)。
最后给出一张没有布局适配(上图)和用rem布局适配(下图)的对比图：
(上面的手机分别是：iphone3gs, iphone5, iphone6)
很明显可以看出，rem适配的各个区块的宽高都会随着手机屏宽而改变，最最明显的可以看一下列表那部分，最后一张图视觉稿要求只出现一点点，rem布局在任何屏幕下都显示的很好。
字体大小问题
既然上面的方案会使得页面缩放(scale)，对于页面区块的宽高，我们可以依赖高清视觉稿，因为视觉稿本来就×2了，我们直接量就可以了，那么对于字体该如何处理呢
对于字体缩放问题，设计师原本的要求是这样的：任何手机屏幕上字体大小都要统一，所以我们针对不同的分辨率(dpr不同)，会做如下处理：
font-size: 16px;
[data-dpr="2"] input {
font-size: 32px;
}
(注意，字体不可以用rem，误差太大了，且不能满足任何屏幕下字体大小相同)
为了方便，我们也会用less写一个mixin：
px2px(@name, @px){
@{name}: round(@px / 2) 1px;
[data-dpr="2"] & {
@{name}: @px 1px;
}
// for mx3
[data-dpr="25"] & {
@{name}: round(@px 25 / 2) 1px;
}
// for 小米note
[data-dpr="275"] & {
@{name}: round(@px 275 / 2) 1px;
}
[data-dpr="3"] & {
@{name}: round(@px / 2 3) 1px
}
// for 三星note4
[data-dpr="4"] & {
@{name}: @px 2px;
}
}
(注意：html的data-dpr属性就是之前js方案里面有提到的，这里就有用处了)
根据经验和测试，还是会出现这些奇奇葩葩的dpr，这里做了统一兼容~
用的时候，就像这样：
px2px(font-size, 32);
当然对于其他css属性，如果也要求不同dpr下都保持一致的话，也可以这样操作，如：
px2px(padding, 20);
px2px(right, 8);
最后
上面对移动端H5高清和多屏适配的一些方案总结，和知识讲解，不对的地方，还请指出来，新浪微博 - Lovesueee。
来源：http://wwwcnblogscom/lovesueee/p/4618454html。
iphone照片分辨率设置可以按照以下iPhone6sd的方法操作，大同小异：
1、在iPhone6s手机界面找到设置选项。
2、点击设置进入，并向上滑动，找到“相机”。
3、点击相机进入，选择“录制视频”选项。
4、点击进入后你会看到有许多选项，根据你的需要进行选择即可。
适配iphone5的话 需要适配1136640的分辨率 如果你什么都不改 虽然iphone5会兼容，但是会出现上下都是黑边（看**的）那种模式。。。这并不是适配如果想在iphone5全屏 就要做适配工作 添加一张1136640的default启动大图，然后程序有320 480的地方得改成动态获取的 比如[UIScreen mainscrell]boundswidth 或height。。。。
1 苹果手机拍照不能调整像素。手机在拍照的时候，系统默认的拍照照片大小是一定的。
2 苹果不同于安卓，会自动开启最高像素。但是在使用相机拍照的时候，可以通过放大或者是缩小的功能，来调整拍摄照片。在拍照照片的界面，两个手指在屏幕上扩大或者是缩小就可以调整拍摄的距离，从而调整拍照的范围。
3 苹果默认的相机拍照是没有设置的，全部都是自动的，800W像素拍多少就是多少，系统没有调节设置选项。能手动操作的就是闪光灯、焦距、还有一个全景模式（需要60以上系统）或者可以后期拍摄完毕之后用手机自带的软件才裁剪。
4 手机像素都是固定的，下载的软件都是对照片做处理的，不能提高像素。
5 摄像头拍出来的效果也不会变，该模糊的还是模糊，像素和镜头没有任何关系，只和感光元件有关。
6 由于苹果的感光元件是封装在机身内无法更换的，所以就别指望提高像素了
以近期上市的三星S9/S9+手机为例，调整屏幕分辨率方法：设置-显示-屏幕分辨率-HD+1480×720、FHD+2220×1080、WQHD+2960×1440-应用。
更改屏幕分辨率时，可能会关闭当前运行的部分应用程序。
前期准备工作——获取ROOT权限
1、安卓手机通过调整LCD密度可以实现类似电脑调整屏幕分辨率的效果，但前提是手机已经取得ROOT权限。如果你的手机还没有获取ROOT权限，可以按照下面的方法获取
2、首先在电脑下载并安装腾讯手机管家，下载地址：http://sjqqcom/
3、依次进入设置→应用程序→开发，打开手机上的USB调试，再将手机用数据线与电脑连接，运行腾讯手机管家，根据提示安装好手机对应的驱动程序，驱动下载过程需要保持网络畅通
4、驱动安装完成后，再点击腾讯手机管家上的“工具箱”，再点击下面“第三方工具”列表中的“一键ROOT”，将ROOT工具安装好
5、如果手机连接正常，ROOT工具安装完成后会进入ROOT界面，先勾选下面的“同意”，并点击下一步
6、第二个界面是检测手机当前的状态是否具备ROOT条件，如果两项均打勾，则点击“开始ROOT”
7、点击“开始ROOT”后就不要随便乱动手机，等待ROOT过程结束，此过程大约需要1分钟时间
8、ROOT成功后，软件会弹出ROOT成功的界面，手机会自动重启;如果一键ROOT失败，软件会搜索对应的ROOT教程，以手动完成ROOT。
安装必备软件并进行修改
1、要想修改手机屏幕的LCD密度必须对系统文件进行修改，因此必须安装一个RE文件管理器，方法如下：
2、将手机用数据线与电脑连接，打开腾讯手机管家，点击“应用”，在搜索框输入“RE文件管理器”，再直接点击“安装”，将RE文件管理器安装到手机
3、手机端运行刚刚安装的RE文件管理器，首次运行会提示要获取ROOT权限，点击“允许”即可
4、RE文件管理器ROOT权限获取成功后，进入system文件夹，再点击上面的“挂载为读写”
5、再对着buildprop文件长按，选择“使用文本编辑器打开”，进入编辑状态
6、在编辑状态找到sosflcd_density=240,将240修改为其他数值即可实现LCD密度的调整。一般平板都是设置的160，Google Galaxy Nexus默认为320。我的三星I9023为4寸屏，屏幕分辨率为800480，修改为180时效果不错，如果再低于该数值则影响使用，大家可以根据实际进行调整
如果刷的第三方系统，有更加简单方法
1、如果你的手机跟我一样，刷的第三方ROM系统，那么就可以更加简单的调整LCD密度。
2、进入设置→ROM设置→常规界面→LCD密度，里面可以直接进行修改，修改完成后重启手机即可。
注意事项
修改LCD密度要根据手机屏幕的实际情况进行设置最佳值，不能太低也不能太高，以免影响正常使用
修改完成后要重启手机才会生效
智能手机屏幕尺寸和分辨率一览表
28英寸分辨率为640x480(VGA) 像素密度286PPI
32英寸分辨率为480x320(HVGA) 像素密度167PPI
33英寸分辨率为854x480(WVGA) 像素密度297PPI
35英寸分辨率为480x320(HVGA) 像素密度165PPI
35英寸分辨率为800x480(WVGA) 像素密度267PPI
35英寸分辨率为854x480(WVGA) 像素密度280PPI
35英寸分辨率为960x640(DVGA) 像素密度326PPI(苹果 iphone4)
37英寸分辨率为800x480(WVGA) 像素密度252PPI
37英寸分辨率为800x480(WVGA) 像素密度252PPI
37英寸分辨率为960x540(qHD) 像素密度298PPI
40英寸分辨率为800x480(WVGA) 像素密度233PPI
40英寸分辨率为854x480(WVGA) 像素密度245PPI
40英寸分辨率为960x540(qHD) 像素密度275PPI
40英寸分辨率为1136x640(HD) 像素密度330PPI(苹果 iphone5)
42英寸分辨率为960x540(qHD) 像素密度262PPI
43英寸分辨率为800x480(WVGA) 像素密度217PPI
43英寸分辨率为960x640(qHD) 像素密度268PPI
43英寸分辨率为960x540(qHD) 像素密度256PPI
43英寸分辨率为1280x720(HD) 像素密度342PPI
45英寸分辨率为960540(qHD) 像素密度245PPI
45英寸分辨率为1280x720(HD) 像素密度326PPI
45英寸分辨率为1920x1080(FHD) 像素密度490PPI
47英寸分辨率为1280x720(HD) 像素密度312PPI
47英寸分辨率为1280x720(HD) 像素密度312PPI
47英寸分辨率为1280x720(HD) 像素密度312PPI
48英寸分辨率为1280x720(HD) 像素密度306PPI
50英寸分辨率为480x800(WVGA) 像素密度186PPI
50英寸分辨率为1024x768(XGA) 像素密度256PPI
50英寸分辨率为1280720 像素密度294PPI
50英寸分辨率为1920x1080(FHD) 像素密度441PPI
53英寸分辨率为1280x800(WXGA) 像素密度285PPI
53英寸分辨率为960x540(qHD) 像素密度207PPI
60英寸分辨率为854×480 像素密度163PPI
60英寸分辨率为1280 X 720 像素密度245PPI
60英寸分辨率为2560×1600 像素密度498ppi
70英寸分辨率为800x480(WVGA) 像素密度128PPI
70英寸分辨率为1024600 像素密度169PPI
70英寸分辨率为1280800 像素密度216PPI
97英寸分辨率为1024x768(XGA)，像素密度132ppi
97英寸分辨率为2048x1536， 像素密度264PPI
101 英寸分辨率为1920X1200， 像素密度224ppi
101 英寸分辨率为2560x1600 像素密度297ppi
如果是购买的行货手机且还在保修期，ROOT前请慎重考虑，以免影响官方的保修
诚然，理论上讲，在屏幕大小一定的情况下，高分辨率的屏幕通常会获得更加优异的显示效果。但请记住一点：手机屏幕最终是要给人看的，而不是给专业仪器测试用的。对于人眼而言，辨识像素点的能力与百微这样的微距镜头相比相去甚远，而且，人在观看手机屏幕的时候并不是贴在屏幕前看而是有一定的距离，距离越大，辨识像素点的能力就越弱。因此，对于人眼而言，高分辨率的屏幕未必就一定在显示效果上远远领先低分辨率，当卖场的导购不遗余力向您宣传“高分辨率清晰论”的时候，一定要三思而后行。
iPhone手机像素与内部元件相关，只能利用软件处理，软件也无法提高像素。像素高低取决感光元件，感光元件 直接装在机身内，是没有办法更换的。
所以像素无法调整。
回答不容易,希望能帮到您,满意请帮忙采纳一下，谢谢 !
欢迎分享，转载请注明来源：品搜搜测评网
微信扫一扫
支付宝扫一扫
