关于移动端h5网页在iphoneX的机型，底部留白问题。闲话少叙直接上代码（亲测有效）

最新推荐文章于 2025-06-22 20:56:09 发布

原创最新推荐文章于 2025-06-22 20:56:09 发布 · 1.3k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#前端

本文详细介绍了如何在metaviewport标签中使用viewport-fit=cover属性来优化网页在不同设备上的显示效果，确保内容能够完全覆盖视口。

在meta viewport标签里加属性：viewport-fit=cover；如下

<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" />

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

北刘庄我最帅

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

vue3：解决H5网页苹果ios手机键盘弹起再收回的时候页面会留白问题，页面软键盘弹起后页面下方空白区域，vue3 h5页面在iphone手机上底部会有留白解决办法（兼容微信公众号H5微信内置浏览器）

高级前端工程师

11-01

3116

vue3 H5解决IOS端微信H5页面软键盘弹起后页面下方留白的问题，h5页面在iphone手机上底部会有留白解决办法，vue3 h5页面IOS唤起键盘后--导致页面底部空白问题，vue3移动端解决h5页面在ios端输入框失去焦点后页面底部留白问题，微信浏览器中，微信H5项目，ios端出现了软键盘输完隐藏后页面不会回弹，下方会有一大块留白，iOS Safari浏览器，h5 移动端 iphone键盘弹起再收回的时候，页面会留白，需要手动下拉，ios弹出键盘后，页面位置有一截空白，移动端IOS的H5页面被键盘顶

uniapp - 详细实现移动端公众号 H5 网页授权登录流程及示例代码，申请测试公众号全流程及本地调试无需部署上线服务器就能直接调起微信登陆授权页面，手机移动端h5公众号页面利用微登录拿到用户数据！

🏆 前端领域优质创作者

08-01

4744

uni-app，微信公众号，h5网页，uniapp网页端，手机端H5公众号页面，微信网页登陆，uniApp详细实现公众号的登录，微信授权第三方网站登录，流程及逻辑详细教程，OAuth2.0，公众号网页授权，微信网页授权通过code换取网页授权，redirect_url，参数错误，解决，报错，无法调起，如何申请测试公众号，微信公众平台测试号的申请与使用，获取用户openid手机号昵称头像，利用测试号实现本地调试微信登录授权，本地无法调试怎么办，测试公众号，在开发环境下怎么测试，用项目本地ip地址，微信公众号平

参与评论您还未登录，请先登录后发表或查看评论

safe area

lx583274568的专栏

02-25

455

解决H5页面开发时iPhoneX手机底部和侧面白边问题

weixin_43988116的博客

08-11

917

简单记录如有问题或更优解还请不要吝啬的分享出来，此结。

h5页面在iphone手机上底部会有留白解决办法

dss0225的博客

05-21

4008

在meta viewport标签里加属性：viewport-fit=cover； <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" />

h5页面不满一屏在ios底部有空白

weixin_40879482的博客

08-23

559

我整理的一些关于【iOS,H5,css】的项目学习资料（附讲解～～）和大家一起分享、学习一下：https://d.51cto.com/eDOcp1iOS H5 页面空白问题的解决方案在开发 H5 页面时，我们经常会遇到这样的问题：在 iOS 设备上，如果页面内容没有填满一整屏幕，底部会留有空白。这不仅影响了用户体验，还...

解决网页、H5页面在手机端访问时，底部会有一段莫名其妙的空白，大约有几百像素高的留白

我驾驶汽车从不是为了从A点到达B点，我喜欢去感受汽车，与之交流，与之融为一体。

04-06

2186

仅需要执行下面这段代码即可解决上图空白区域的留白问题。

移动端浏览器上拉上滑地址栏隐藏，页面底部空白解决方案

hochinchan的博客

02-08

3097

解决方案是给容器加上css属性position:fixed 最近在完成一个点击图片显示遮罩，让遮罩占满全屏并禁止页面滚动的功能时，发现禁止滚动后浏览器仍然可以通过上滑和下滑来触发地地址栏的隐藏与显示，导致当上滑触发地址栏时内容可视区高度变大，页面底部出现一小块与地址栏高度一样的区域没有被遮罩层遮到 ...

基于HBuilder X移动端h5毕业设计作品集源码

05-08

基于HBuilder X移动端h5毕业设计作品集源码。熟悉了利用hx h5+的开发转uniapp基本不用再考虑开发工具了，相同血脉几乎相同的套路，曾经的h5+也可以直接混入使用当然仅限APP端。 HBuilderX 版本编译模式：自定义...

H5移动端网页适配iPhone x/iPhone xr/iPhone 11pro/iPhone 11/iPhone 12 机型底部小黑条

chocolate_nan的博客

11-09

3039

iPhone x/iPhone xr/iPhone 11pro/iPhone 11/iPhone 12 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。安全区域指的是一个可视窗口范围，处于安全区域的内容不受圆角（corners）、齐刘海（sensor housing）、小黑条（Home Indicator

uniapp [移动端H5网页] - 强力解决弹起软键盘后页面被挤压变形或页面整体上移问题，点击input输入框键盘弹出底部被上推往上顶遮挡及各种问题（兼容安卓苹果ios手机，微信公众号网页也适用）

热门推荐

weixin_30485379的博客

05-22

2万+

在meta viewport标签里加属性：viewport-fit=cover；如下 <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" /> 转载于:h...

H5 密码调起安全键盘导致页面底部出现留白

IT诗人

09-18

2669

bug情况：使用米8的微信打开登录页，当输入密码时，会调起系统默认的小米安全键盘，偶发性出现键盘已收起，但页面未落下，底部原输入法位置变为空白。如下图：首先尝试通用解决方式，如： https://www.jianshu.com/p/c8f3a4036251 https://blog.youkuaiyun.com/a_small_insect/article/details/85162236 实...

h5适配pc和移动，meta标签的配置

ljhzhd的博客

04-07

2711

h5兼容移动端，为了确保适当的绘制和触屏缩放，需要在meta标签之中添加viewport元数据标签 <meta name="viewport" content="width=device-width,initial-scale=1"> viewport：视口，是浏览器显示页面内容的屏幕区域，视口可以分为布局视口（layout viewport）、视觉视口（visual viewport）和理想视口（ideal viewport）设置meta标签主要是为了让我们布局的视口宽度和设

移动端H5键盘收起底部留白问题解决

清风拂晓

07-27

2553

部分移动设备上存在这个问题，百度搜索千篇一律是window.scroll 这是解决问题的方法，但不是发现问题的根源，你要想解决问题，首先得定位找到发生的情况大部分键盘收起会触发失去焦点事件，那么监听失去焦点事件blur或许不错 $("#input").blur(function(){ setTimeout(function(){ var height = $(window).height(); $(win

H5适配iphoneX底部留白问题

cxz

04-25

1745

问题 iphoneX底部会留白解决 1、首先，给viewport meta 标签添加一个扩展viewport-fit，用于设置网页在手机的可视窗口的布局方式　　属性值有：contain 视窗包含网页　　　　　　　cover 网页覆盖视窗　　　　　　　auto 默认值，同contain效果注意：网页默认不添加扩展的表现是 viewport-fit=contain，需要适配 iPhoneX 必须设置 viewport-fit=cover，这是适配的关键步骤 2、env() 和 constant()

PC端页面布局，在移动端查看头部和底部出现留白

baozisss的博客

07-20

3887

问题出现：body，html未填充满可视区域页面布局： <div class="full"> <div class="margin"> 页面内容 </div> </div> 初始化样式： html, body, div,iframe, p, ul, ol, li, dl, dt, dd, h1, h2, h...

vue&vant移动端h5底部留白问题

1234Wu--前端Blog

02-14

5347

不知道是，vue的原因还是vant的原因，html底部多了一截。每个页面背景不一样也不能给统一的background，给内容div负margin都盖不住这个html的空白。最后试了很多方法，曲线救国，在html最后加了个div就挡住空白了。虽然解决了，我也没搞清楚是什么原因，很奇葩。 .bottom_bg { height: 3rem; width: 100%; backgrou...

移动端H5网页滑动浏览效果实现指南

移动端手机H5网页滑屏效果是现代网页设计中广泛应用于手机端的交互设计之一，它允许用户通过简单的滑动操作来浏览网页内容，而不是传统的通过点击链接或按钮来跳转页面。该技术可极大地提高用户体验，尤其适用于展示...