zoukankan      html  css  js  c++  java
  • 关于分辨率及图片分辨率的问题

    http://blog.csdn.net/winsdom123456/article/details/48023933

    iPhone 6, 6 Plus一出,给iOS开发者带来了更加头痛的屏幕适配问题。以前的iPhone 5相对于iPhone4仅仅是屏幕增高一些,现在宽高都变了。

    首先我们先了解一下屏幕物理分辨率(暂且这么称呼)与显示分辨率的区别。物理分辨率就是屏幕的宽高像素数。和屏幕大小是完全成正比的。iPhone大小有3.5寸,4.0寸,4.7寸,5.5寸,物理分辨率的宽度分别是320,320,375,414,也就是我们看到的屏幕大小就是物理分辨率大小,屏幕越宽,物理分辨率也越大。可以想象成物理宽度。显示分辨率,就是说在这块屏幕上面能够以最佳效果显示的图片的像素大小。注意是最佳效果,也就是如果图片分辨率再小一些,就会有模糊感,分辨率再大一些,也不会增加清晰度,至少我们人类用肉眼是看不出来清晰度有提升的。这就是最佳效果,这就是屏幕的显示分辨率,可以理解为能够容纳的图片像素。有一个值可以测量二者之间的关系——PPI,百度它的意思就是,每英寸的像素数目,也就是没英寸长度所能够容纳的像素数目。长度对应物理长度,像素对应显示的图片像素。其实这里的物理分辨率就是我们开发过程中用到的坐标数字。

    比如iPhone4以前的屏幕物理分辨率和和显示分辨率都是320480的,也就是把屏幕分成320480个小方块,每个小方块正好可以显示长宽都是1像素的一张小图片。而且是以最佳效果显示,没有拉伸感,即使放入一张22的图片也不会更加清楚。这个是完全由屏幕的材料决定的。这就是@x,1倍图的由来。1倍,是显示分辨率相对于屏幕分辨率得出的一个倍数。
    从iPhone4开始,一直到iPhone6(不包括Plus),屏幕的显示效果得到了很大的提升,iPhone4物理屏幕大小没变,但是显示的图片像素长宽都提升一倍。也就是单位长度里面容纳的像素数目提升一倍,即PPI提升一倍,由原来的163提升到326。图片显示效果比原来提升明显,没有了以前的颗粒感觉。这就是所谓的Retina技术,肉眼已经区分不出来单独的像素“颗粒”。这就是@2x,2倍图的由来。2倍,在我们代码里面设置大小的一个控件,需要一张长宽都是2倍的图片来填充。
    iPhone6 Plus,这个特殊的玩意又变了(用户用上大屏是爽了,我们开发者都恨死它了吧)。如果按照以前2倍的关系。6P的物理宽度是414,那么它的显示宽度应该是828,但是科技发展到现在,各个厂商都在拼参数,苹果也不甘落后,于是引入了新的屏幕,这个新的屏幕的PPI达到了401,也就是同样宽度的屏幕已经比原来容纳的像素数又有了提升,更何况宽度也比原来宽了,这样两个因数相乘:以5为标准,(414/320)
    (401/326)640(这个是基数)约等于1018.49,接近1080。至于1080和PPI401哪个是因,哪个是果,我也不清楚,反正二者的关系就是这么个关系。也就是说6P的显示分辨率的宽度是1080,高度按比例得出1920。也就是说给一张分类率是10801920的图片全屏显示,就会达到最佳效果,再小会拉伸,再大也不会更加清楚(可能还会损失性能)。
    那么问题来了,6P上面到底应该用几倍的图片呢,2倍显然已经不合适了。如果是全屏的话,1080 / 320约为3.37,1080 / 375约为2.88,于是结合iPhone5和iPhone6,采用了3倍的图片。这就是@3x,3倍图的由来。

    尺寸.png

    各屏幕尺寸.jpg

  • 相关阅读:
    Spring MVC 学习笔记3
    Spring MVC 学习笔记2
    Spring MVC 学习笔记1
    jsp 传多个值给后端
    如何使32位Win7支持超过4GB的内存,而不装64位
    Java | 基础归纳 | Gson && Json
    快速矩阵 | 入门 | 矩阵乘法次数计算
    Jquery | 基础 | jQuery表单对象属性过滤选择器
    Jquery | 基础 | 属性过滤选择器
    JSP | 基础 | JSP行为 | incline && forward
  • 原文地址:https://www.cnblogs.com/jyking/p/6737272.html
Copyright © 2011-2022 走看看