【IOS开发】iPhoneX适配 wkWebView屏幕下方有间隙的问题

最新推荐文章于 2023-09-14 14:59:37 发布

店小不二

最新推荐文章于 2023-09-14 14:59:37 发布

阅读量1w

点赞数 1

分类专栏： iOS 文章标签： iPhoneX wkWebView 安全区

本文链接：https://blog.csdn.net/u013190088/article/details/81194066

版权

iOS 专栏收录该内容

1 篇文章

订阅专栏

本文介绍了解决在iOS11及以上版本中，WKWebView在iPhoneX上出现底部间距的方法。通过调整scrollView的contentInsetAdjustmentBehavior属性或在HTML的<meta>标签中设置viewport-fit=cover，可以消除屏幕底部到安全区域之间的额外间距。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在iPhoneX适配时，wkWebView会出现屏幕下方有一定间距的情况，大约是屏幕底部到安全区（safe area）的距离。此时可以用以下方法解决。

if(@available(iOS 11.0, *)) {
	webView.scrollView.contentInsetAdjestmentBehavior = UIScrollViewContentInsetAdjustmentNever;
}

或者

if #available(iOS 11.0, *) {
    webView.scrollView.contentInsetAdjustmentBehavior = .never;
}

在html <meta>标签中加入viewport-fit=cover应该也有同样效果

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

店小不二

关注关注

1
点赞
踩
2

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

iOS代码动态消除iPhone X底部工具条(ToolBar)与键盘间的夹缝

享受开发，颠倒银河

04-23

2238

在App界面底部增加工具条并不少见,在工具条上增加输入框更所谓是"应知应会".下面本猫就向大家介绍如何适配iPhoneX中底部工具条与弹出键盘的相对位置.

ym——android源码大放送（实战开发必备）

热门推荐

陈宇明

08-10

4万+

文件夹 PATH 列表卷序列号为 000A-8F50 E:. │ javaapk.com文件列表生成工具.bat │ 使用说明.txt │ 免费下载更多源码.url │ 目录列表.txt │ ├─android web应用 │ jqmDemo_static.zip │ jqmMobileDemo-master.zip │ jqmMo

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

除去WebView默认存在的一定像素的边距问题

追梦赤子心

07-05

6708

需求：文本编辑器编辑的图文信息，图片显示的宽度要满屏。 WebView不管怎么修改它的属性加载出来的内容都会存在一定的边距 String data="<img src=\"https://ss0.bdstatic.com/-0U0bnSm1A5BphGlnYG/tam-ogel/dd9d1d686cdc814db9653b254e00402e_259_194.jpg\" alt=\\\"显示的图片"

iOS 11 UICollectionView顶部出现白色间隔的问题

weixin_30484739的博客

11-21

306

iOS11 UICollectionView顶到屏幕顶端会出现一个20高度的白色间隔，是由于UICollectionView的自动调整功能为状态栏留出的位置只需在创建UICollectionView时加入如下代码关闭自动调整：该属性是iOS11新加入的，所以一定要在前面加上判断！！！！！ if (@available(iOS 11.0, *)) { self.mainC...

ios -WKWebView 高度准确,留有空白的解决方案

weixin_30859423的博客

03-30

1158

#import "ViewController.h" #import <WebKit/WebKit.h> @interface ViewController ()<WKNavigationDelegate> @property (nonatomic, strong)WKWebView *webView; @end @implementati...

IOS下浏览器顶部出现1条白线或间隙解决方法

qq_22146195的博客

03-10

820

因元素position:fixed;后，IOS下浏览器滚动造成顶部出现1条白线或间隙。可以使用transform:translate3d(0,-1px,0);

UIWebView的间距和加载iFrame的坑

u1031的专栏

09-14

4234

UIWebView的间距和加载iFrame的坑最近换了工作，新的项目中遇到了很多关于UIWebView的坑，所以就在这里简单说一下，以便以后填坑： HTML标签加载 Style配置和Font变换 iFrame的设置和停止播放 UITableView中的UIWebView 简单介绍 UIWebView是iOS中用来显示网页(H5页面)的控件，一般使用loadHTMLString

iPhone X刘海屏适配HTML5：解决顶部间隙问题

开发者需要密切关注Apple的人机界面指南（HumanInterfaceGuidelines – iPhoneX），以便确保其应用在不同设备上的视觉一致性。通过这些技术，可以有效地解决全屏显示时可能出现的美观和功能性问题。

【性能提升】：优化适配过程，减少iPhone X小黑条对页面加载的影响（急迫性）

[【性能提升】：优化适配过程，减少iPhone X小黑条对页面加载的影响（急迫性）](https://ucc.alicdn.com/pic/developer-ecology/8ab5cd11d33d46eb81cf646331eb7962.png?x-oss-process=image/resize,s_500,m_lfit) ...

【代码实践】：编写完美适应iPhone X底部安全区域的H5页面（实用型）

随着iPhone X的发布，其独特的底部安全区域设计对H5页面的适配提出了新的挑战。本文首先概述了iPhone X底部安全区域的概念及其设计理念，然后深入探讨了设计特点和视觉布局，以及如何通过H5页面的结构和元素进行适配...

iPhoneX 适配方案

cxz

04-08

692

前言 iPhoneX 取消了物理按键，改成底部小黑条，这一改动导致网页出现了比较尴尬的屏幕适配问题。对于网页而言，顶部（刘海部位）的适配问题浏览器已经做了处理，所以我们只需要关注底部与小黑条的适配问题即可（即常见的吸底导航、返回顶部等各种相对底部 fixed 定位的元素）。比如一些需要贴在底部的按钮，和呼起的tabBar和底部弹出框，在iphoneX上就会出现被小黑条遮挡内容，或者页面上出现白色空隙的问题。处理前后截图如下所示基本了解 viewport-fit iOS11 新增特性，苹果公司为了适配

解决小程序view之间默认的空隙

weixin_43566049的博客

04-17

5113

初衷是先写出几个盒子，盒子里再加上image和picker啥的，但加了view之后发现它会自动进行页面居中。比如三个盒子就会把除了盒子们设置好的高度之外剩下的那部分平均分成他们之间的间隙：百度了一堆办法，包括： body{ margin:0; font-size: 0; } display: flex; flex-wrap: wrap; justify-content: space-around; 最后的解决办法： display: flex; justify-content

解决 iOS 11 webview 顶部空白条的问题

weixin_34023982的博客

12-31

1608

在 iOS 11 使用 webview 发现顶部会有一个空白条，怎么也去不掉，通过设置 contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever 就可以解决了，具体的代码如下：// //ViewController.m //webView // //Createdbyexc...

iOS webView 网页位置下移/偏移

UFO00001的博客

09-06

8552

问题描述： webview大小位置是正确 webview加载的网页却下移了使得webview的底部露出解决办法：添加如下代码即可 self.automaticallyAdjustsScrollViewInsets = NO //oc self.automaticallyAdjustsScrollViewInsets = false //swift 原因：

OC - WebView使用之获取 WebView 实际内容高度及其中一种导致WebView展示不全的bug

LJ·杨的博客

01-05

5028

最近项目中，有一个模块，需要大量的图表。而且产品明确表明，图表只有一个要求，就是要好看，座椅使用原生控件，画的话，费时费力不说，还不一定好看。所以呢，我们就用了ECharts插件，iOS直接使用webView调用H5界面。产品的需求是在不同的屏幕上展示的图表要和谐(重点是好看)，所以喽，这就导致了，我们要在调用html链接生成之前，要把不同屏幕所要展示的WebView的高度传入链接中。在实际的展示

ios webView h5页面覆盖底部安全区域小黑条

思琦

12-14

2997

vue h5页面适配 ios底部安全区域小黑条问题

IOS底部安全距离配置（uniapp）