移动设备分辨率适配及相关问题
2024-04-16 分类： 网站建设
基本知识
px（pixel）的意思是像素。像素是一个虚拟的方格，是数字显示屏的一个基本单位。像素没有物理上的尺寸，一个像素可以和一幅海报一样大，也可以小的连肉眼都无法分辨。 in（inch）是英寸，是计算数字显示设备（手机，显示屏）的长度单位，是物理上的尺寸。1 inch≈2.54cm. 通过计算某个显示设备中像素和英寸的比值，就可以得到每英寸中的像素数（pixels per inch），也就是PPI，你也可以叫它像素密度（pixel density）。PPI在理解上可以与物理上的密度进行类比，物理密度=质量/体积，PPI=像素/英寸。计算方式在此不表。
PPI有两个作用：
1.PPI越高的显示设备，单位长度下显示的像素点就越多，看起来也就越清晰。 2.PPI将虚拟单位和物理单位结合在一起，使得「清晰」的概念明确起来。路人甲给我一个分辨率为1920*1080px的设备，路人乙给我一个5寸的设备，哪个更清晰？不知道。他们给的设备都无法计算出PPI，无法对比。 那么DPI又是什么？PPI是数字设备上的DPI。也就说，这两者其实是一回事儿，只是适用的情况不同。DPI（dots per inch）指的是每英寸的点数，在印刷行业应用广泛，指的是每英寸的油墨点数。它表示的意义和PPI一样，是为了表示单位上长度下有多少个基本单位，那么显示屏上的基本单位是px，而在印刷品上的基本单位是dot。这两种说法本来针对不同情况，但在实际使用中却是混乱的，你懂意思就行。
iPhone的分辨率
说起iPhone的分辨率，就必须牵扯到另外一个单位，pt. 在iPhone 3GS及以前的iPhone，pt和px是一一对应的关系，即1pt=1px，逻辑分辨率为320*480pt，渲染像素即为320px*480px，加上3.5寸的屏幕，计算得出像素密度是163PPI。 随着iPhone 4一起推出的retina屏（视网膜屏），提高了显示屏的精细程度，改变了pt和px之间的关系，1pt=2px。由于逻辑分辨率还是320pt*480pt，从「面积」的角度上来说，原来1个逻辑像素点里有1个渲染像素，现在有4个渲染像素。以iPhone 3GS（左）和iPhone 4（右）举例，右边是尺寸为244px*640px，左边为122px*320px，两者置于同为3.5寸屏幕下，并且在屏幕中所占面积相同。得出retina屏幕在单位面积下容纳的渲染像素更多，也就越清晰。由此，iPhone设备的PPI由原来的163PPI变为326PPI，清晰度大幅提升。
如果以iPhone 3GS中px和pt的对比关系作为基准1x，那么iPhone 4中px和pt的关系即为2x。这实际上是PPI的简化表达方式，这样的表示使得开发人员不用去记住163和326这样的数字，仅限iOS，Android后面再说。
iPhone 4s在屏幕显示的情况和iPhone 4一样。
接着是iPhone 5和5s，5c。iPhone 5的逻辑分辨率宽度上依然是320pt，高度变为568pt，渲染像素变为640px*1136px，视觉上最直接的就是iPhone的屏幕上多了一排图标。尺寸上由3.5寸变为4寸（对角线）。如果你还记得当时嘲弄iPhone 5的段子，那么肯定对iPhone 10神一般的长度记忆犹新。 依然保持2x的好处是原来为iPhone 4和4s设计的控件和图标可以原封不动地直接挪到iPhone5上使用，因为PPI没有改变。改变的是长度变大了，纵向上可容纳的内容增加了。
iPhone 6及iPhone 6s在保持2x的情况下，根据屏幕比例4/4.7=320/375=568/667，逻辑分辨率依照5的比例变为375pt*667pt，渲染像素变为750px*1334px。同样，在2x的情况下，依然可以沿用4s和5s的控件和图标。屏幕变大，可容纳的内容增多。
但是好景不长，分辨率的比例在iPhone 6P这里发生了很大的改变，可以说是开发人员的噩梦。iPhone 6P如果依然使用和其他型号相同的像素密度进行渲染，那它的逻辑分辨率应该是438pt* 780pt（667/780=375/438=4.7/5.5），在2x情况下渲染像素应该是796px*1560px。但这一分辨率对于一个5.5寸的设备来说太小了，于是苹果为iPhone 6P设计了不同的渲染模式：稍微缩小了逻辑分辨率到414pt*736pt（按照比例是5.2寸屏的逻辑分辨率），然后以三倍方式渲染（@3x），也就是渲染像素是1242px*2208px。这样一来，本该在5.2寸上显示的像素被等比例拉大到5.5寸上。紧接着，出于对电池和屏幕亮度的考量，在渲染完成后，经过一个降分辨率的步骤，将图像输出到物理像素为1080px*1920px的屏幕上。
这样先放大后缩小之后有两个后果：
1.@2x和@1x可以有两种理解。 其一是163PPI为基数的倍数，它们所代表的是PPI。@1x下PPI为163，@2x下PPI为326，那么3x下应该为489PPI，正好对应5.2寸下414pt*726pt的情况。从5.2寸拉到5.5寸后PPI降低为460PPI，之后降低渲染分辨率为1080px*1920px，PPI进一步降低为401PPI。从这个角度上来说@3x的意义已经不在了。 其二是在同一个逻辑分辨率里有多少个渲染的像素点，@1x代表一个逻辑像素内有1个渲染像素，@2代表有4个，@3x代表9个。这种意义依然存在。
2.从1242px*2208px降分辨率为1080px*1920px以后，出现了亚像素，就连系统控件也一样。不过这情况在显示屏上看才能观察到，截屏下来在PS内查看依然是1242px*2208px。
根据之前所述，一个图标在@1x和@2x下的设备上显示的肉眼大小是一样的，唯一不同的是变清晰了。在理想的5.2寸和@3x情况下，图标肉眼大小和@2x也是一样的，放大到5.5寸的屏幕上以后，假设原来的一个图标在设备上肉眼放大的倍数为:
1*（5.5/5.2）≈1.05
所以如果在750px*1334px的设计稿上画了一个图标，同时切了@2x和@3x的图，分别放在iPhone 6和iPhone 6p上，iPhone 6p上的图标会比iPhone 6上的大1.05倍左右（相信我，我拿尺子量过）。 那降分辨率为1080px*1920px的怎么没有算进去？这是重点。降分辨率的那部分与设计师无关，反正作为设计师是用1242px*2208px的稿子做设计。至于为什么降分辨率了图标没有相应变小，这是苹果系统层面的上的显示问题，我，并没有搞懂。
关于iPhone的适配，切图和标注
在开发时间和资金都有限的情况下，通常情况是用一套设计稿适配所有的机型（包括iOS的各种机型，以及Android的各种机型）。国内的普遍情况是遵循苹果公司的Human Interface Guidelines出一套iOS设计稿，调节尺寸，切出不同的图进行适配。用iOS风格的设计稿挪到Android平台上向来有很多争议，比如iOS常用的tab导航，用于有虚拟键的Android手的结果是繁复和丑陋；而另一方面tab导航相比于Android上的更常见的Drawer导航，更有利于提高用户活跃度。Anyway，用iOS的设计是主流。
所以，怎么做到一套设计稿适配作用机型？
1.以750px作为基本设计稿，向下适配640px（看起来会偏大一点点），向上适配1242px。
2.用cutterman（或者其他切图软件）切图切出@2x，和@3x。用@2x的切图应用于iPhone 6以下的机型，用@3x的切图应用于iPhone 6p。@3x与@2x的图是严格的1.5倍关系。（或者，为了避免750px切出的@3x有虚边，将750px的图等比例拉大1.5倍，得到1125px*2001px，检视图标的清晰情况，需要调整就微调，切出@3x的图）
3.用750px的图做标注。建议用单位pt做标注，便于开发。
适配规则（来自知乎）[1]
总结起来就一句话：文字流式，控件弹性，图片等比缩放。
控件弹性指的是，navigation、cell、bar等适配过程中垂直方向上高度不变；水平方向宽度变化时，通过调整元素间距或元素右对齐的方式实现自适应。这样屏幕越大，在垂直方向上可以显示更多内容，发挥大屏幕的优势。
按照上述默认适配规则，大中小三种屏幕显示效果均相同。有时候想在大屏幕显示更多内容，需要设计出特殊适配效果。比如App store首页焦点图，从iPhone 6适配到iPhone 6 plus时焦点图尺寸和排版做了特殊处理。底下应用列表也从一排3+个变成一排4+个，真正实现了大屏幕显示更多内容的理念。这些就需要设计师给出相应设计稿。
其他方案
1.如果以640px的图作为设计稿，适配750px和1242px看起来都会偏小一点点。
2.如果脑洞打开以1242px的图作为设计稿，那么问题就特么的来了。
按照道理，在1242上切出@3x的图用于6p，切出@2x的图用于6和5s/5/4s。但是情况是，由于6p的逻辑分辨率（414pt）宽度上比4s和5（320pt）上的大很多，切出@2x用于750的宽度没有问题，用于640px大小上可能会过大。高度上也一样，原来在6p上可以呈现5栏的内容，在5和4s上很可能只有三栏。因此，有人提出的方案是将6p的尺寸等比例缩放1242/640倍，这显然违反了本文的初衷。实为无奈之举。
一些问题
1.为什么用于@3x的切图是@2x的1.5倍，而不是1242px/750px倍？或者不是1242px/640px倍？ 因为6p的界面并不是6或者5s的等比例放大关系。理论上来说，大屏有两个作用：
1.原来的显示内容变得更大。
2.显示更多的内容。
若是切图按照1242px/750px的倍数等比例放大，是纵向上是没法显示更多内容的。违背大屏的设计原则。
2.为什么750px切下来的@2x可以适用于640px，而不是等比例缩小750px/640px倍？ 因为都是@2x，也不是等比例缩小。750px的图标以及控件都和640px的一样大，但是屏幕大了，容纳的东西多了。
适配Android
这个问题我暂时没有很好的解决方案，只能说说我现行的方法。
和iOS上一样，Android上有一个和pt类似的单位，dp（或dip），指device independent pixel。
以MDPI为基准，XHDPI即是Android的@2x。XHDPI下，1dp=2px。 以750px的设计稿，等比例缩小为720px，高度变为1281px，多出1px。以XHDPI的模式切图。
本文来源于成都网站建设公司与成都网站设计制作公司-创新互联成都公司！
px（pixel）的意思是像素。像素是一个虚拟的方格，是数字显示屏的一个基本单位。像素没有物理上的尺寸，一个像素可以和一幅海报一样大，也可以小的连肉眼都无法分辨。 in（inch）是英寸，是计算数字显示设备（手机，显示屏）的长度单位，是物理上的尺寸。1 inch≈2.54cm. 通过计算某个显示设备中像素和英寸的比值，就可以得到每英寸中的像素数（pixels per inch），也就是PPI，你也可以叫它像素密度（pixel density）。PPI在理解上可以与物理上的密度进行类比，物理密度=质量/体积，PPI=像素/英寸。计算方式在此不表。
PPI有两个作用：
1.PPI越高的显示设备，单位长度下显示的像素点就越多，看起来也就越清晰。 2.PPI将虚拟单位和物理单位结合在一起，使得「清晰」的概念明确起来。路人甲给我一个分辨率为1920*1080px的设备，路人乙给我一个5寸的设备，哪个更清晰？不知道。他们给的设备都无法计算出PPI，无法对比。 那么DPI又是什么？PPI是数字设备上的DPI。也就说，这两者其实是一回事儿，只是适用的情况不同。DPI（dots per inch）指的是每英寸的点数，在印刷行业应用广泛，指的是每英寸的油墨点数。它表示的意义和PPI一样，是为了表示单位上长度下有多少个基本单位，那么显示屏上的基本单位是px，而在印刷品上的基本单位是dot。这两种说法本来针对不同情况，但在实际使用中却是混乱的，你懂意思就行。
iPhone的分辨率
说起iPhone的分辨率，就必须牵扯到另外一个单位，pt. 在iPhone 3GS及以前的iPhone，pt和px是一一对应的关系，即1pt=1px，逻辑分辨率为320*480pt，渲染像素即为320px*480px，加上3.5寸的屏幕，计算得出像素密度是163PPI。 随着iPhone 4一起推出的retina屏（视网膜屏），提高了显示屏的精细程度，改变了pt和px之间的关系，1pt=2px。由于逻辑分辨率还是320pt*480pt，从「面积」的角度上来说，原来1个逻辑像素点里有1个渲染像素，现在有4个渲染像素。以iPhone 3GS（左）和iPhone 4（右）举例，右边是尺寸为244px*640px，左边为122px*320px，两者置于同为3.5寸屏幕下，并且在屏幕中所占面积相同。得出retina屏幕在单位面积下容纳的渲染像素更多，也就越清晰。由此，iPhone设备的PPI由原来的163PPI变为326PPI，清晰度大幅提升。
如果以iPhone 3GS中px和pt的对比关系作为基准1x，那么iPhone 4中px和pt的关系即为2x。这实际上是PPI的简化表达方式，这样的表示使得开发人员不用去记住163和326这样的数字，仅限iOS，Android后面再说。
iPhone 4s在屏幕显示的情况和iPhone 4一样。
接着是iPhone 5和5s，5c。iPhone 5的逻辑分辨率宽度上依然是320pt，高度变为568pt，渲染像素变为640px*1136px，视觉上最直接的就是iPhone的屏幕上多了一排图标。尺寸上由3.5寸变为4寸（对角线）。如果你还记得当时嘲弄iPhone 5的段子，那么肯定对iPhone 10神一般的长度记忆犹新。 依然保持2x的好处是原来为iPhone 4和4s设计的控件和图标可以原封不动地直接挪到iPhone5上使用，因为PPI没有改变。改变的是长度变大了，纵向上可容纳的内容增加了。
iPhone 6及iPhone 6s在保持2x的情况下，根据屏幕比例4/4.7=320/375=568/667，逻辑分辨率依照5的比例变为375pt*667pt，渲染像素变为750px*1334px。同样，在2x的情况下，依然可以沿用4s和5s的控件和图标。屏幕变大，可容纳的内容增多。
但是好景不长，分辨率的比例在iPhone 6P这里发生了很大的改变，可以说是开发人员的噩梦。iPhone 6P如果依然使用和其他型号相同的像素密度进行渲染，那它的逻辑分辨率应该是438pt* 780pt（667/780=375/438=4.7/5.5），在2x情况下渲染像素应该是796px*1560px。但这一分辨率对于一个5.5寸的设备来说太小了，于是苹果为iPhone 6P设计了不同的渲染模式：稍微缩小了逻辑分辨率到414pt*736pt（按照比例是5.2寸屏的逻辑分辨率），然后以三倍方式渲染（@3x），也就是渲染像素是1242px*2208px。这样一来，本该在5.2寸上显示的像素被等比例拉大到5.5寸上。紧接着，出于对电池和屏幕亮度的考量，在渲染完成后，经过一个降分辨率的步骤，将图像输出到物理像素为1080px*1920px的屏幕上。
这样先放大后缩小之后有两个后果：
1.@2x和@1x可以有两种理解。 其一是163PPI为基数的倍数，它们所代表的是PPI。@1x下PPI为163，@2x下PPI为326，那么3x下应该为489PPI，正好对应5.2寸下414pt*726pt的情况。从5.2寸拉到5.5寸后PPI降低为460PPI，之后降低渲染分辨率为1080px*1920px，PPI进一步降低为401PPI。从这个角度上来说@3x的意义已经不在了。 其二是在同一个逻辑分辨率里有多少个渲染的像素点，@1x代表一个逻辑像素内有1个渲染像素，@2代表有4个，@3x代表9个。这种意义依然存在。
2.从1242px*2208px降分辨率为1080px*1920px以后，出现了亚像素，就连系统控件也一样。不过这情况在显示屏上看才能观察到，截屏下来在PS内查看依然是1242px*2208px。
根据之前所述，一个图标在@1x和@2x下的设备上显示的肉眼大小是一样的，唯一不同的是变清晰了。在理想的5.2寸和@3x情况下，图标肉眼大小和@2x也是一样的，放大到5.5寸的屏幕上以后，假设原来的一个图标在设备上肉眼放大的倍数为:
1*（5.5/5.2）≈1.05
所以如果在750px*1334px的设计稿上画了一个图标，同时切了@2x和@3x的图，分别放在iPhone 6和iPhone 6p上，iPhone 6p上的图标会比iPhone 6上的大1.05倍左右（相信我，我拿尺子量过）。 那降分辨率为1080px*1920px的怎么没有算进去？这是重点。降分辨率的那部分与设计师无关，反正作为设计师是用1242px*2208px的稿子做设计。至于为什么降分辨率了图标没有相应变小，这是苹果系统层面的上的显示问题，我，并没有搞懂。
关于iPhone的适配，切图和标注
在开发时间和资金都有限的情况下，通常情况是用一套设计稿适配所有的机型（包括iOS的各种机型，以及Android的各种机型）。国内的普遍情况是遵循苹果公司的Human Interface Guidelines出一套iOS设计稿，调节尺寸，切出不同的图进行适配。用iOS风格的设计稿挪到Android平台上向来有很多争议，比如iOS常用的tab导航，用于有虚拟键的Android手的结果是繁复和丑陋；而另一方面tab导航相比于Android上的更常见的Drawer导航，更有利于提高用户活跃度。Anyway，用iOS的设计是主流。
所以，怎么做到一套设计稿适配作用机型？
1.以750px作为基本设计稿，向下适配640px（看起来会偏大一点点），向上适配1242px。
2.用cutterman（或者其他切图软件）切图切出@2x，和@3x。用@2x的切图应用于iPhone 6以下的机型，用@3x的切图应用于iPhone 6p。@3x与@2x的图是严格的1.5倍关系。（或者，为了避免750px切出的@3x有虚边，将750px的图等比例拉大1.5倍，得到1125px*2001px，检视图标的清晰情况，需要调整就微调，切出@3x的图）
3.用750px的图做标注。建议用单位pt做标注，便于开发。
适配规则（来自知乎）[1]
总结起来就一句话：文字流式，控件弹性，图片等比缩放。
控件弹性指的是，navigation、cell、bar等适配过程中垂直方向上高度不变；水平方向宽度变化时，通过调整元素间距或元素右对齐的方式实现自适应。这样屏幕越大，在垂直方向上可以显示更多内容，发挥大屏幕的优势。
按照上述默认适配规则，大中小三种屏幕显示效果均相同。有时候想在大屏幕显示更多内容，需要设计出特殊适配效果。比如App store首页焦点图，从iPhone 6适配到iPhone 6 plus时焦点图尺寸和排版做了特殊处理。底下应用列表也从一排3+个变成一排4+个，真正实现了大屏幕显示更多内容的理念。这些就需要设计师给出相应设计稿。
其他方案
1.如果以640px的图作为设计稿，适配750px和1242px看起来都会偏小一点点。
2.如果脑洞打开以1242px的图作为设计稿，那么问题就特么的来了。
按照道理，在1242上切出@3x的图用于6p，切出@2x的图用于6和5s/5/4s。但是情况是，由于6p的逻辑分辨率（414pt）宽度上比4s和5（320pt）上的大很多，切出@2x用于750的宽度没有问题，用于640px大小上可能会过大。高度上也一样，原来在6p上可以呈现5栏的内容，在5和4s上很可能只有三栏。因此，有人提出的方案是将6p的尺寸等比例缩放1242/640倍，这显然违反了本文的初衷。实为无奈之举。
一些问题
1.为什么用于@3x的切图是@2x的1.5倍，而不是1242px/750px倍？或者不是1242px/640px倍？ 因为6p的界面并不是6或者5s的等比例放大关系。理论上来说，大屏有两个作用：
1.原来的显示内容变得更大。
2.显示更多的内容。
若是切图按照1242px/750px的倍数等比例放大，是纵向上是没法显示更多内容的。违背大屏的设计原则。
2.为什么750px切下来的@2x可以适用于640px，而不是等比例缩小750px/640px倍？ 因为都是@2x，也不是等比例缩小。750px的图标以及控件都和640px的一样大，但是屏幕大了，容纳的东西多了。
适配Android
这个问题我暂时没有很好的解决方案，只能说说我现行的方法。
和iOS上一样，Android上有一个和pt类似的单位，dp（或dip），指device independent pixel。
以MDPI为基准，XHDPI即是Android的@2x。XHDPI下，1dp=2px。 以750px的设计稿，等比例缩小为720px，高度变为1281px，多出1px。以XHDPI的模式切图。
本文来源于成都网站建设公司与成都网站设计制作公司-创新互联成都公司！
文章名称：移动设备分辨率适配及相关问题
文章位置：https://www.cdcxhl.com/news5/323855.html
成都网站建设公司_创新互联，为您提供外贸网站建设、网站制作、搜索引擎优化、用户体验、企业建站、电子商务
声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联
猜你还喜欢下面的内容
- 高端营销型网站建设应该关注那些点？ 2024-04-16
- 外贸网站免费建站 2024-04-16
- 裸机服务器和云服务器的优缺点 2024-04-16
- 如何准备定制网站建设？ 2024-04-16
- 在这个时代做好网络推广意味着什么 2024-04-16
- 江门政府网站哪家强？开平访问量逾3千万人次！ 2024-04-16
- 网站开发语言ASP和ASP.net有什么区别-网站制作 2024-04-16
- 东莞模板网站制作软件有哪些 2024-04-16
- 成都app开发定制一款智能家居APP的开发需要花费多少财力物力？ 2024-04-16
- 成都网站推广告诉你，推广也要有策略 2024-04-16
- 分享建立成都企业网站建站公司的教程！ 2024-04-16
- 医疗器械的网站建设如何才能满足？ 2024-04-16
- 成都做网站不可走捷径：套用模板 2024-04-16
- 看创新互联是如何为您”闪办“400电话 2024-04-16
- 网站建设如何让网站出彩的技巧有哪些 2024-04-16
- 网站降权的诊断和解决方法 2024-04-16
- 长尾关键词理论及相关经验分享 2024-04-16
- 写给大数据开发初学者的话｜附教程 2024-04-16
- 专业布局网站URL的四种模式 2024-04-16