【CSS】移动端设计、开发尺寸问题，常用的手机型号的屏幕大小，设备像素比计算

1,什么是移动端:

手机，iPad,智能手表，手环等等可以进行移动携带的智能设备都是移动端
但是在前端开发当中大部分说的还是手机和平板。

2,如何进行移动端的模拟开发。

工具:谷歌浏览器当中的移动端模拟工具。

3,设计稿的获取可以通过模拟器截取设计稿

4,了解一些手机型号的屏幕大小与分辨率

iPhone SE（4英寸）：320 x 568像素，163ppi
iPhone 6/6s/7/8（4.7英寸）：1334 x 750像素，326ppi
iPhone XR（6.1英寸）：1792 x 828像素，326ppi
iPhone 11/12/13（6.1英寸）：1792 x 828像素，326ppi

5，罗列一些手机型号对应的设计稿大小

iphone4 640960 设计稿是手机屏幕的2倍
iphone5 6401136 设计稿是手机屏幕的2倍
iphone678 7501334 设计稿是手机屏幕的2倍
iphone678s 12422208 设计稿是手机屏幕的3倍

6，之所以UI设计师在设计的时候按照手机尺寸的2倍或者3倍来做是为了

满足手机的高清屏显示。
高清屏是iphone4以后有苹果公司提出的后面所有手机统一进行使用的概念
就是所原本1像素就是1像素，随着手机越来越高清，分辨率越来越高，从而
过去的1像素可以在现在显示4个像素点形成高清屏。

7,设备像素比（dpr）

dpr=物理像素/css像素
设备像素比= 设计稿尺寸/手机屏幕
iphone4 iphone5 iphone678 dpr=2
iphone678s dpr=3

问：iphone678设计稿放到ps当中测量一个宽度为500问实际应该写到代码当中的值是多少？
500/dpr=250px

8,如果常规设定一个超出移动端宽度的块放到视口当中会出现可以显示的情况而且是根据pc端显示方法来显示的，这种显示是错误的，不利于开发的

借助理想视口来解决问题