解决Iphonex 底部按钮fixed,bottom:0 底部留白问题

注意:
配合viewport-fit=“cover”使用

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

解决方案：

<div class="wrapper"><div class="main-wrapper">我是中间区域</div><div class="btn-wrapper">我是fixed按钮</div>
</div>
// css 区域
.wrapper{position: relative;padding-bottom: 100px;box-sizing: border-box;
}
.main-wrapper{overflow: auto;
}
.btn-wrapper{width: 100%;height: 100px;position: fixed;left: 0;bottom: 0;
}
// iphonex 系列 需增加样式
//iphoneX、iphoneXs
@media only screen and (device-width: 375px) and (device-height: 812px) and (-webkit-device-pixel-ratio: 3) {.wrapper{height: 100vh;overflow: hidden;}.main-wrapper{height: 100%;}
}
//iphone Xs Max
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:3) {.wrapper{height: 100vh;overflow: hidden;}.main-wrapper{height: 100%;}
}
//iphone XR
@media only screen and (device-width: 414px) and (device-height: 896px) and (-webkit-device-pixel-ratio:2) {.wrapper{height: 100vh;overflow: hidden;}.main-wrapper{height: 100%;}
}

解决Iphonex 底部按钮fixed,bottom:0 底部留白问题相关推荐

uni-app.05.底部按钮fixed定位后被软键盘推起的解决办法
底部按钮fixed定位后被软键盘推起的解决办法问题引出解决方案解决思路代码实现效果问题引出昨天在测试app的时候,测试提出新增个人信息界面底部的input框在输入的时候会被软键盘遮挡而看 ...
vue 手机键盘把底部按钮顶上去
背景:在写提交订单页面时候,底部按钮当我点击输入留言信息的时候, 底部提交订单按钮被输入法软键盘顶上去遮挡住了. h5 ios输入框与键盘兼容性优化实现原理:当页面高度发生变化的时候改变底部but ...
android软键盘弹出底部有黑色闪出,vue移动端安卓软键盘弹出底部按钮顶起
在做一个基于企业微信的h5移动页面时,当软键盘弹出时,底部fixed定位在ios上没事,安卓手机上,底部按钮会被顶起到软键盘,查看原应时由于软键盘顶起时,安卓设备的视图会变小.造成固定定位按钮呗顶起. ...
移动端，fixed bottom问题
//不显示 .bar {position:fixed;bottom:0;z-index:99; }//显示 .bar{position:fixed;bottom:calc(90vh); /*当前屏幕高 ...
html网页底部弹窗,【HTML】底部弹窗插件代码
点滴记忆欢迎访问点滴记忆!请收藏本站域名:https://www.cnblogs.com/HGNET/ 立即查看 .layui-icon { font-family: layui-icon!impo ...
小程序底部按钮兼容 iPhone X（解决底部横杠遮挡问题）
解决方式:底部增加 34px 的高度,使元素不被横杠遮挡. 效果图: 常规效果 iPhone X 效果源码: index.wxml <view class="intro"& ...
h5 底部按钮兼容 iPhone X（解决底部横杠遮挡问题）
iOS特性方法(推荐),小程序也可用 padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/ padding-bott ...
vue中使用指令解决iphonex底部的适配问题
vue中使用指令解决iphonex底部的适配问题 1.全局自动化加载指令 1.1 在src新建directives文件夹,并且新建index.js 1.2 在main.js引入directives/i ...
小程序解决iPhone机型屏幕下边横杠遮住底部按钮问题
解决思路: 首先在app.js的onLaunch方法中获取到设备信息,根据设备信息判断设备屏幕下边是否有横杆并设置到全局变量: 在页面中获取到该变量,为true时就动态改变底部按钮高度,使按钮弹起一定 ...
Android9.0设置AlertDialog修改底部按钮居中等
在小米9se版本,发现应用升级的对话框按钮都偏向左,讲真一开始就考虑是小米又特立独行了. 下面再介绍下出现情况的解决方案,代码如下,两种处理方案: if (downloadDialog != null ...

解决Iphonex 底部按钮fixed,bottom:0 底部留白问题

解决Iphonex 底部按钮fixed,bottom:0 底部留白问题相关推荐

最新文章

热门文章