iPad设计尺寸与前端适配解析
iPad 的设计尺寸一直是前端适配绕不开的一关。是你在做响应式布局或 App 混合开发时，搞清楚设备的分辨率和像素密度真的挺关键。不同代的 iPad 屏幕尺寸和分辨率差异还蛮大的，比如 iPad mini 和 iPad Pro，差距就挺。你在布局上要注意像素比，不然界面一放大会模糊，体验直接打折扣。
iPad 的设计尺寸一直是前端适配绕不开的一关。是你在做响应式布局或 App 混合开发时，搞清楚设备的分辨率和像素密度真的挺关键。不同代的 iPad 屏幕尺寸和分辨率差异还蛮大的，比如 iPad mini 和 iPad Pro，差距就挺。你在布局上要注意像素比，不然界面一放大会模糊，体验直接打折扣。
多人会习惯性查device-width和device-height，但别忘了，还有scale，也就是设备的缩放比。像 iPad Pro 12.9 英寸，用的是2048x2732的分辨率，@2x 的比例，实际开发时你要用的是一半的逻辑像素。布局不准，率是搞混了这俩。
顺带提一下，如果你也做iPhone适配，可以看看iPhone 分辨率对比大全，挺全的。还有搞Android的同学，可以看看Android 屏幕物理分辨率获取实例，两边思路其实挺像。
实用建议是，设计稿最好按1024x1366这种逻辑像素来做，方便你做主流尺寸的 iPad 适配。想偷懒？那就考虑用media query加上viewport灵活控制宽度，兼容性也还不错。
如果你还在卡适配逻辑，不妨用下 Chrome 的设备模拟器，配合真实设备调试，效率提升不少。毕竟，尺寸懂得早，踩坑就少～
文件大小：224.89KB
评论区