移动端iphone手机简单兼容头部

1.iPhone的适配---安全区域(safe area)

 padding-top: constant(safe-area-inset-top); /* 兼容 iOS < 11.2 */
 padding-top: env(safe-area-inset-top); /* 兼容 iOS >= 11.2 */

<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no,viewport-fit=cover"/>

备注：具体的使用看你的样式如何去用

2.iPhoneX 安全区域

• 屏幕上安全距离: safe-area-inset-top
• 屏幕右安全距离: safe-area-inset-right
• 屏幕下安全距离: safe-area-inset-bottom
• 屏幕左安全距离: safe-area-inset-left

ios 11

padding-top: constant(safe-area-inset-top);
padding-right: constant(safe-area-inset-right);
padding-bottom: constant(safe-area-inset-bottom);
padding-left: constant(safe-area-inset-left);

ios 12++

padding-top: env(safe-area-inset-top);
padding-right: env(safe-area-inset-right);
padding-bottom: env(safe-area-inset-bottom);
padding-left: env(safe-area-inset-left);

  兼容性写法

padding-top: constant(safe-area-inset-top);
padding-top: env(safe-area-inset-top);