设置页面大小为100vh出现的问题

问题：100vh=当前视口可见高度，种情况下工具栏的高度是不包含在100vh里面的，所以设置高度为100vh在浏览器中打开会出现滚动条的问题或者页面被工具栏遮挡
解决方式：

calc(100vh - 75px) //ios可能不准确

或采用下面的100%替代

方式一：设置页面高度为100%

将vh换成100%会将底部地址栏的高度算进去，100%等同于window.innerHeight
注意需要将当前页面以及其所有上级容器都设置为100%

方式二：postcss-100vh-fix

需要postcss大于8

//npm install --save-dev postcss postcss-100vh-fix
module.exports = {plugins: [require('postcss-100vh-fix')]
}

方式三：resize+window.innerHeight

const appHeight = () => {const doc = document.documentElementdoc.style.setProperty('--app-height', `${window.innerHeight}px`)
}
window.addEventListener('resize', appHeight)
appHeight()//css
:root {--app-height: 100%;
}html,
body {padding: 0;margin: 0;overflow: hidden;width: 100vw;height: 100vh;height: var(--app-height);
}

方式四：height: -webkit-fill-available;

height: -webkit-fill-available; //注意可会造成页面内滚动组件无法滚动的问题

H5 兼容底部地址栏、搜索栏相关推荐

h5 android底部导航栏,安卓微信端h5 页面增加底部导航栏总结
Aphorism grow in errors overview 最近在写一个移动端的 jsp 项目, 应项目需求须在安卓机器上实现一个 ios 微信h5页面底部的导航条想到的实现方案: 通过 ...
H5兼容问题及解决方法
Meta基础知识: H5页面窗口自动调整到设备宽度,并禁止用户缩放页面 //一.HTML页面结构 <meta name="viewport" content="wi ...
小程序webview嵌入h5兼容iphone安全区域
在苹果 iPhoneX及以上设备上,可以看到物理Home键被取消,改为底部小黑条替代home键功能.微信小程序和 h5 网页需要针对这种情况进行适配,否则可能会遇到底部按钮或选项卡栏与底部黑线重叠的情 ...
html页面底部白条,用cookie解决新版微信中H5页面底部白条问题
5月23日微信更新6.6.7版本,新加的文章缩小浮窗功能确实很赞.不过,有一处更新颇使H5开发者感到困扰,就是在iPhone上H5页面最底部多了一个白色的前进后退控制栏,即下图底部的那个白条, 分析 ...
uni-app前端H5页面底部内容被tabbar遮挡的问题解决方案
转载https://cloud.tencent.com/developer/article/1609256 使用 uni-app 框架开发的一个项目,发现 H5 端页面底部的内容被导航栏(Tabbar ...
uni-app H5兼容ios问题+微信扫一扫、微信支付等常用api代码封装
最近公司需要用uni开发一个项目,项目中遇到的问题记录一下,方便下次不采坑场景: 使用wx自带sdk完成,扫一扫.微信登录.微信支付引用方式: // index.html引入 &l ...
H5: 关于底部导航使用“fixed”会遮住网页最下面内容的解决办法！
Bug 写完界面之后发现跑起来是这样的: 同学和我说可以考虑加一个空的<div>占住底部导航栏的位置.这样确实可行,但是会无缘无故多出一个标签,我感觉这很罪恶! Solution 果然下班 ...
iphoneX的safari浏览器操作栏隐藏时兼容底部Home键
iphoneX系列手机底部都有一个home键(横杠),safari浏览器会在页面滚动时隐藏底部的操作栏,许多应用都有在底部放置导航栏的需求.网上的帖子一般都是通过给底部导航栏元素添加内补34像素来处理 ...
vue 实现扫条形码与二维码 H5 兼容苹果IOS
1.注意 vue-qrcode-reader采用摄像头解析,浏览器为了安全,只有https协议下或者本地localhost可访问摄像头,所以代码需要部署所在的服务器需要https 2.具体实现① 安装 ...

H5 兼容底部地址栏、搜索栏

文章目录

设置页面大小为100vh出现的问题

方式一：设置页面高度为100%

方式二：postcss-100vh-fix

方式三：resize+window.innerHeight

方式四：height: -webkit-fill-available;

H5 兼容底部地址栏、搜索栏相关推荐

最新文章

热门文章