ios x及以上版本H5页面高度100%、100vh自适应滚动条问题

一、问题

在项目实践过程中，会遇到移动端h5页面高度的自适应问题，比如在chrome devtools下的iphonex，默认高度812px，实际高度是852px，倒是在手机端浏览会有滚动条，很烦～

二、方案

height设置 100vh 或者height设置 100% ➕ overflow-y:hidden; 要么会出现滚动条，要么会出现下面出现40px白底

解决方案：在index.html中，meta标签添加 viewport-fit=cover，done～～

<meta name="viewport" content="width=device-width,initial-scale=1.0,viewport-fit=cover">

ios x及以上版本H5页面高度100%、100vh自适应滚动条问题相关推荐

html高度没有滚动条,Div扩展了页面高度，但没有滚动条
我在页面左侧有一个div用于导航链接.点击标题可展开链接的子集.我将此div设置为页面高度的100%,以便列占据页面的整个左侧.当所有子类别都展开时,会出现问题. div的内容在页面底部运行,但不添加 ...
如何设置网页页面高度100%
网页页面高度铺满全屏的方法在设置页面页面铺满的时候,还没开始我就发现了问题,高度是高度不像宽度,是无法设置为100%的: 但是h5融媒体都是铺满全屏的,所以一定是有什么方法的,因此我去度娘了.看到最 ...
监听页面高度变化_Iframe 自适应高度并实时监控高度变化的js代码
不得不用到iframe,且被强烈要求不能让它出现滚动条!嵌入的页面肯定是高度不一的,页面中也不能出现大片空白,所以也不能写死高度!真是麻鬼烦啊! google N次 + 百度M次 + 试验了1605次 ...
解决微信公众号发布新的版本H5页面有缓存的问题
1.在index.html文件 head代码块中添加下面
公众号h5页面高度撑满滚动底部有白边（解决方案）
https://blog.csdn.net/m0_63108819/article/details/123994554https://blog.csdn.net/m0_63108819/article ...
H5图片高度根据宽度自适应
每个图片原始宽高不一样,缩小每个图片到指定的宽度,高度等比例缩小,实现图片高度自适应. 下面看看实现代码: 下面是uniapp的条件编译,如果是小程序场景就使用 mode 属性实现高度自适应,如果是H ...
前端页面高度和宽度自适应怎么做？
在前端页面开发中,我们会希望页面可以根据不同用户的显示比例自动缩放页面,确保用户体验,这就是PC自适应,下面小千就来给大家介绍一下应该怎么做和集中常见的问题解决方案,记得收藏起来遇到问题来看一看. 自 ...
uniapp页面高度100%无效问题
用uniapp写小程序时,给页面设置背景颜色,但是设置高度百分百或者100vh都出现问题,此时可以在App.vue里设置全局css
Vuecli H5页面多屏幕尺寸自适应配置（解决方案）
教你Vue-cli脚手架里如何配置屏幕自适应! 注意:如果项目中没有until.js文件则在vue.config.js文件中进行配置 const { defineConfig } = require ...

ios x及以上版本H5页面高度100%、100vh自适应滚动条问题

一、问题

二、方案

ios x及以上版本H5页面高度100%、100vh自适应滚动条问题相关推荐

最新文章

热门文章