手机屏幕分辨率

1、问：什么是手机屏幕分辨率？

答：手机厂商公布的屏幕物理像素点，一般在手机"设置"->"关于手机"里可以查看,如iPhone 6的屏幕分辨率750*1334(px)

2、问：那屏幕尺寸是？

答：屏幕对角线的长度，单位是英寸，如iPhone 6为4.7英寸

3、问：什么是英寸，为什么用英寸？

答：英制单位，1英寸等于2.54厘米。用英寸为单位是行业惯例。
// 14世纪时，英皇爱德华二世颁布了“标准合法英寸”。其规定为：从大麦穗中间选择三粒最大的麦粒头对头排成一行的长度就是一英寸。

4、问：移动端开发时，是参照手机屏幕分辨率吗？

答：参照的是手机的逻辑分辨率(CSS像素)

5、问：？

答：逻辑分辨率是手机系统设置的显示分辨率，单位:IOS是pt(point)，android是dp。物理分辨率单位px(pixel)。

6、问：怎么理解？

答：假设有一块画板，有7501334个小方格(像素点)。我为了循环利用，找了一张画纸，也是7501334个小方格，放在画板上面画画。画板的尺寸是手机屏幕的物理像素点，分辨率是物理分辨率。画纸的尺寸是手机系统的像素点，分辨率是逻辑分辨率。

7、问：这两个可能不一样？

答：网上有一个故事，乔布斯搞了iphone 3，让比尔开发了word用在iphone上。后来要发布iphone 4，物理分辨率变大了，导致原word显示的时候让人感觉变小了。乔布斯头大了，让比尔再开发一个适配iphone 4?word再开发了，其他软件是不是也重新搞一个版本？乔布斯搞了retina视网膜屏幕，把IOS系统也搞了个分辨率，在IOS系统上显示就按这个分辨率，也叫逻辑分辨率。这个时候物理分辨率和逻辑分辨率就出现差异了,iphone 4的物理分辨率比iphone 3大，但是两者的逻辑分辨率一样，软件显示的时候UI保持一致。

8、问：那两者是不是存在比例关系？

答：用DPR(devicePixelRatio)来表示两者的比例关系，即设备像素比。画板和画纸大小不变，画板的像素变大了，画纸的一个像素点原先对应画板的一个像素点，现在对应画板的多个像素点。手机上，一张图画的逻辑像素点不变，渲染它的物理像素点变多了，图像更加清晰，但UI不变。

9、问：如何知道手机的逻辑分辨率？

答：一、网上搜索iOS开发手机尺寸。
二、Flutter中，可以打印渲染树，debugDumpRenderTree()，可以看到window size(物理分辨率)、device pixel ratio(设备像素比)，configuration里有逻辑分辨率。
三、cmd上，adb(Android Debug Bridge)命令获取android设备屏幕信息

10、问：逻辑分辨率是否可以修改？

答：我这款honor 30里，可以通过"开发者选项"->"绘图"->"最小宽度"修改逻辑分辨率，通过"显示和亮度"->"屏幕分辨率"修改物理分辨率。还有一个屏幕密度的概念，density，每英寸的像素点数。ios的屏幕物理密度(ppi),屏幕逻辑密度(dpi，常见163)。android的屏幕物理密度(dpi)，屏幕逻辑密度(ipi，常见160)。两者的比例是缩放因子，@3x表示的是3倍的比率。

11、问：设计师是按照哪个尺寸设计的？

答：目前，大多数移动端设计稿都是采取 iPhone 12 尺寸 即：375 x 812 的逻辑分辨率。

12、问：怎么做前端适配？

答：一般把375pt(css像素为375px)分为7.5份(即屏幕宽度分为7.5rem)，每份50px(以下皆为css像素)      
    @media screen and (min-width: 375px){
        /*
        750 / 7.5 = 100
        375 / 7.5 = 50
        iphone12:
        */
        html{
            font-size: 50px;  // 1rem
        }
   
    // 其他尺寸设备的适配       
    @media screen and (max-width: 320px){
        /*
        750 / 7.5 = 100
        320 / 7.5 = 42.67
        iphone5:
        */
        html{
            font-size: 42.67px; // 1rem
        }
    // 375设计稿上，20px*20px的div        
    .box{
        width:20/50rem;
        height:20/50rem;
    }
    // 当这个div在iphone 5上显示时，0.4rem*42.67=17.068px
    // 网页的各个元素实现等比例缩放

13、问：标签里的viewport有什么用？

答：强制让文档与文档在设备中的宽度保持1：1,对页面设置不能进行缩放。我试了下，在有meta时，文档内容不缩放，宽度超出部分可以滑动查看。如果删除meta,文档的宽度为设备的宽度，整个文档进行了压缩。

14、问：web端是不是也需要适配？

答：显示器屏幕尺寸也存在差异，只是台式电脑笔记本的 物理分辨率 = 逻辑分辨率，需要做响应式布局。