1. head标签的meta添加 viewport-fit=cover 详情如下；

<meta content="viewport-fit=cover" >

2.给最外部标签添加以下css样式：

body,html{

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

    padding-left: constant(safe-area-inset-left);

    padding-right: constant(safe-area-inset-right);

    padding-bottom: constant(safe-area-inset-bottom);

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

    padding-left: env(safe-area-inset-left);

    padding-right: env(safe-area-inset-right);

    padding-bottom: env(safe-area-inset-bottom);

}

css 兼容苹果x更高机型触控条(安全区域)
1. head标签的meta添加 viewport-fit=cover 详情如下； 2.给最外部标签添加以下css...
mpvue实现对苹果X安全区域的适配
mpvue实现对苹果X安全区域的设配一、业务背景最近在利用mpvue+ts开发小程序的过程中，由于苹果X等手机...
CSS 变量使用详解
这篇文章你将学到以下内容： CSS 变量 CSS 常用函数 iPhone X 系列机型适配 CSS At-rule...
MacBooster 8 for Mac 共享版 – Mac系统
地址：系统兼容性：需要OS X 10.9或更高版本（与macOS Catalina兼容） MacBooster8...
macOS Big Sur发布了！看看你的Mac兼容不兼容
苹果公司针对所有兼容的Mac机型发布了最新版本的操作系统macOS Big Sur！截至昨晚，苹果公司向Mac所...
蛋有点小疼__Andriod向下兼容的坑
Material Design水波纹触控效果 MaterialDesign 水波纹触摸效果，兼容版本 12 ！M...
vue适配iphoneX底部安全区域
vue适配iphoneX底部安全区域index.html css 设置
3D Touch功能实现
3D Touch 3D Touch的触控技术，被苹果称为新一代多点触控技术。其实，就是此前在Apple Watch...
3Dtouch
3DTouch简介 3D Touch的触控技术，被苹果称为新一代多点触控技术。其实，就是此前在Apple Watc...
3DTouch到底是个什么梗?
简介:3D Touch的触控技术，被苹果称为新一代多点触控技术。其实，就是此前在Apple Watch上采用的Fo...