H5页面全面屏设置底部安全距离

在head中添加：

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

meta标签加入viewport-fit=cover

使用：

@supports (bottom: constant(safe-area-inset-bottom)) or (bottom: env(safe-area-inset-bottom)) {/* 如果浏览器支持安全区域底部距离，则可以为需要吸底的元素单独规定样式，如果该 class 还有其它样式，要将本段代码放在其它样式后面！*/.bottom{padding-bottom: constant(safe-area-inset-bottom);padding-bottom: env(safe-area-inset-bottom);background-color:  #fff;//安全距离的背景色}
}

H5页面全面屏设置底部安全距离相关推荐

H5页面在iphone手机底部出现留白的情况
今天在测试的时候,发现自己的h5页面在iphone手机上,有刘海儿和底部弧形时,底部出现了留白,解决方案是: 找到整个项目的public,index.html,找到其中的meta,加入viewport ...
Android 小米全面屏手势底部虚拟按键的适配
在项目的开发过程中,发现小米部分手机有一个全面屏手势功能,该功能可隐藏底部虚拟按键,通过手势的方式来实现返回和Home功能. 效果如下所示: 当开启全面屏手势的时候,就会存在一个问题,我们通过以下代码 ...
小程序对IPhone全面屏手机底部黑线的安全区域处理
自建博客文章链接:http://www.heblogs.cn/articleDetails/60f829a8fcae932a86eeaf33 前几天在对自己写的小程序项目进行优化时发现IPhone全面 ...
html页面全面屏手机,全面屏也有不同实现方式_一加 6（6GB RAM/全网通）_手机评测-中关村在线...
在整体材质上,一加6和小米8采用了双玻璃+金属中框的"三明治"结构设计,同时也都采用了全面屏的设计,但是玻璃的质感却孑然不同.黑鲨则要特殊的多,金属为主配合复合材料以及背后的发光l ...
简单粗暴隐藏h5页面在微信端底部出现的白色导航条
前言相信很多写H5的小伙伴,在H5页面跳转的时候底部会出现微信里自带的导航栏,说实话没什么用处,主要还占用了高度,这时候写的页面和UI就有点出入.这是因为新版微信在苹果iOS 端的h5页面如果有路由 ...
html页面全面屏手机,/* js 判断手机是否全面屏 */
/**判断屏幕大小 */ function judgeBigScreen() { //,这里根据返回值 true 或false ,返回true的话则为全面屏 let result = false; ...
iframe嵌套其它网站页面全屏设置
今天在使用iframe时,发现嵌套页面中有个[全屏]功能,不好使,查了一下,发现iframe还有1个属性allowfullscreen设置,可以设置是否支持全屏,默认是false,现在把iframe的 ...
关于android 7.0全面屏，底部虚拟导航键适配问题
上图为没适配之前 // 在setContentView之后,适配顶部状态栏 getWindow().addFlags(WindowManager.LayoutParams.FLAG_TRANSLUCE ...
Android全面屏导航栏高度,Android10全面屏开启底部手势横条，弹窗留白问题
public static boolean isShowNavBar(Context context) { if (null == context) { return false; } /** * 获 ...

H5页面全面屏设置底部安全距离

H5页面全面屏设置底部安全距离相关推荐

最新文章

热门文章