iOS iPhoneX-WebView适配问题

最新推荐文章于 2022-11-29 15:15:54 发布
原创 最新推荐文章于 2022-11-29 15:15:54 发布 · 6.9k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#iOS #ios开发 #布局 #君凯商联网

前言:


iOS11之后引入了安全区域的概念，对此的影响主要表现在scrollview的子类，但是在适配安全区域的时候发现了一些不科学的现象。


最低0.47元/天 解锁文章

200万优质内容无限畅学
iOS开发之对iOS11安全区域对探索以及解决适配问题
Simona_1973的博客
03-06 849
iOS9 Storyboard引用了一个新的安全区域UILayoutGuide的概念，假设我们需要使用storyboard，并且同时向下适配iOS8，隐藏navigationbar的vc该怎么处理没有间距呢？ 1.storyboard向下适配iOS8， 首先要去掉勾选的Use Safe Area Layout Guides,如图所示 2.代码隐藏navigationbar - (void)vie...
H5页面WebView在iPhoneX的适配
热门推荐
如鱼得水的专栏
05-03 1万+
1.  iPhoneX的介绍屏幕尺寸    我们熟知的iPhone系列开发尺寸概要如下：△ iPhone各机型的开发尺寸转化成我们熟知的像素尺寸：△ 每个机型的多维度尺寸倍图其实就是像素尺寸和开发尺寸的倍率关系，但这只是外在的表现。倍图核心的影响因素在于PPI（DPI），了解屏幕密度与各尺寸的关系有助于我们深度理解倍率的概念：《基础知识学起来！为设计师量身打造的DPI指南》iPhone8在本次升级...
iPhone12打开webview闪退或者白屏
吃瓜群众的博客
07-26 1353
解决办法：排除法 1、先测试iPhone12打开其他嵌入的webview页面，无问题，继续下一步 2、修改嵌入的webview代码，删除无用代码，然后重新部署测试，无问题，继续下一步 3、检查包裹webview组件的代码，最后一个删除测试，找到是SafeAreaView导致，删除SafeAreaView的包裹代码后能正常打开。 ...
iOS UIWebview加载URL静态页面部分手机加载不出界面
u012371575的博客
11-20 1620
前几天，测试时发现有一台（其他手机都没问题） 手机用UIWebview加载静态界面的时候加载不出来，后来发现是又由于 没有对url 字符串地址进行utf-8转码造成的，将 pathstring 转码后 就可以访问了 NSString* pathString =@"xxxxxxxxxx"; NSURL* url = [NSURLURLWithString:pathString]; NSURL* url2 = [NSURLURLWithString:[pathStringstringByAddingPe
使用webview的h5游戏在iPhoneX设备全屏的实现
ch_majia的博客
07-26 2041
用cocosCreator做的h5小游戏，在有刘海的iphone上无法全屏，出现了安全区问题。 折腾了一下午，主要是对h5和html这些web 的东西很陌生，现在基本解决了问题。 由于我们的前端载体是基于quickcocos3.3的内嵌webview实现，因此还需要找的cpp部分创建uiwebview的代码修改部分。 主要需要修改两处实现： 1.在cocos2dx引擎的UIWebVIewI...
iOS的WebView展示H5不能全屏展示
回梦游仙
04-17 1665
iOS的WebView展示H5不能全屏展示办法一方法二 办法一 直接在原生端配置UIWebView配置属性 if (@available(iOS 11.0, *)) { g_web.scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever; } else { self.edgesForExtendedLayout = UIRectEdgeNone; }
iOS11&iPhoneX适配&Xcode9打包注意事项
08-29
iOS11&iPhoneX适配是最新的iOS系统和iPhoneX设备的适配问题，涉及到UITableView、UIScrollView、网页加载、iPhoneX屏幕适配、Xcode9打包等多个方面。 首先，在UITableView适配中，需要注意iOS11的变化。在iOS11中，...
小程序以及H5页面上IphoneX底部安全区域小黑条适配问题
03-29
公司项目开发中，发现iPhoneX上吸底元素存在被小黑条遮挡的问题 原因 在苹果 iPhoneX 、iPhone XR等机型上，物理Home键被取消，改为底部小黑条替代home键功能,从而导致吸底元素会被小黑条遮挡覆盖的问题 解决方案 ...
iOS16适配
u012938194的专栏
09-23 5596
苹果在9月13号凌晨（北京时间）发布 iOS 16，该系统的设备可能会因为各种原因，导致功能不可用和UI错乱等问题，我们需要做好适配iOS 16。
解决ipad uiwebview显示网页超过屏幕宽度
co_diy的专栏
09-11 6524
从来没有开发过网页，工作需要写了个用户消息管理列表，这个网页在浏览器上可以全屏显示， 但是在ipad上显示超过全屏了，今天花了好长时间把它解决，做个记录。          解决方法：                   在头标签里添加一句                      最重要的是把user-scalable=0 其他几个属性参考 http://blog.youkuaiyun.com/
iOS WKWebView适配（实战篇）
06-22 1812
一、Cookie适配 1.现状 WKWebView适配中最麻烦的就是cookie同步问题 WKWebView采用了独立存储控件，因此和以往的UIWebView并不互通 虽然iOS11以后，iOS开放了WKHTTPCookieStore让开发者去同步，但是还是需要考虑低版本的 同步问题，本章节从各个角度切入考虑cookie同步问题 2.同步cookie(NSHTTPCookieStorage->WKHTTPCookieStore) iOS11+ 可以直接使用WKHTTPCookieStore遍历方式设值
webview H5 兼容性汇总(持续更新中)
zl_Alien的博客
06-22 1432
webview H5 兼容性汇总(持续更新中) 1 IOS问题：position:fixed固定定位抖动问题 问题背景：在业务场景中,在ios终端环境下运行H5页面，需要用到fixed定位，并且fixed定位需要上下移动（y轴移动） 网上解决方案： ① 给顶级元素设置heightL100% ( 并没有奏效 ) 。 ② 增加transform: translate(0) 属性 （ 并没有奏效 ） ③ 改变布局由fixed 定位,改成absolute定位，滚动条基于自身。（ 能够从根本上解决偶尔跳屏的问题，但
【移动端适配一】移动端Web页面的ios安全区适配
hzxOnlineOk的博客
11-29 1237
我们上下预留的占位空间就是为了防止我们页面的内容被这些元素遮挡，但是如果你做的页面只是放在一些浏览器（微信内置浏览器）内传播，一般我们也不需要处理顶部刘海问题，顶部一般就是原生的标题栏了，不用我们管。但如果你的页面会被内嵌在 APP 展示且 APP 是全屏展示的，那么这个问题还是得处理一下。这其实说白了就是 iphoneX 之后的苹果手机，在页面上，你需要对顶部和底部多预留一点空间。造成这个问题的主要原因就是苹果手机在屏幕上出现了所谓的刘海屏，而且更是在屏幕下方加了一条小黑条。
UIScrollView scrollView.contentInset属性深入
fanxiaochuan的专栏
12-11 1万+
#import "ViewController.h" @implementation ViewController - (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil {     self = [super initWithNibName:nibNameOr
Xcode9 iOS11适配 iPhoneX适配 heightForHeaderInSection、contentInset失效解决 contentInsetAdjustmentBehavior详解
ihoudf
09-21 1万+
针对项目中出现的问题，一一列出解决。 iphoneX适配官方指南:https://developer.apple.com/ios/human-interface-guidelines/overview/iphone-x/ 1.iPhoneX启动图尺寸 1125px × 2436px(即 375pt × 812pt @3x)) 2.MJRefresh错位等 使用UIScr
【IOS开发】iPhoneX适配 wkWebView屏幕下方有间隙的问题
店小不二的博客
07-24 1万+
在iPhoneX适配时，wkWebView会出现屏幕下方有一定间距的情况，大约是屏幕底部到安全区（safe area）的距离。此时可以用以下方法解决。 if(@available(iOS 11.0, *)) { webView.scrollView.contentInsetAdjestmentBehavior = UIScrollViewContentInsetAdjestmentNev...
iOS 11 中scrollview布局往下偏移问题automaticallyAdjustsScrollViewInsets、contentInsetAdjustmentBehavior（iOS 11
西瓜的博客
01-09 2800
// // ViewController.m // #import "ViewController.h" @interface ViewController () @property (nonatomic,strong)UIScrollView * scrollView; @end @implementation ViewController - (UIScrollView *)scrol...
WKWebView 和 UIWebView 的适配问题
lin_transform的博客
08-30 1171
webView 适配问题
Unity UniWebView5.3.0版本适配IOS 刘海屏问题
最新发布
06-10
<think>我们正在解决UnityUniWebView5.3.0版本在iOS刘海屏上的适配问题。在iOS设备上，刘海屏（或称凹口屏）是指具有非矩形屏幕的设备，如iPhoneX及以后的型号。这些设备的屏幕顶部有一个凹口（刘海），因此需要特殊的适配以确保内容不被遮挡。问题分析：UniWebView是一个Unity插件，用于在Unity应用内显示网页内容。在刘海屏设备上，可能出现以下问题：-WebView内容被刘海或圆角遮挡-状态栏（时间、电池等）与WebView重叠-在横屏模式下，安全区域未正确识别解决方案：我们需要设置UniWebView组件的安全区域，避免内容被遮挡。UniWebView5.3.0提供了适配刘海屏的API，特别是针对iOS的安全区域。步骤：1.设置WebView的Insets（边距）以避开安全区域。2.监听屏幕方向变化并更新安全区域。3.处理状态栏的显示与隐藏（如果需要）。具体操作：1.获取安全区域的Insets：在iOS设备上，我们可以通过`UniWebViewSafeAreaInsets`结构来获取安全区域的边距。这个结构包含了四个方向的边距（上、下、左、右）。2.设置WebView的Frame：将WebView的Frame设置为全屏，然后根据安全区域的Insets调整其内容边距。3.代码示例：首先，确保在Unity中已导入UniWebView插件，并且版本为5.3.0。然后，在创建WebView后，设置安全区域适配：```csharpusingUniWebViewNamespace;publicclassWebViewManager:MonoBehaviour{privateUniWebViewwebView;voidStart(){GameObjectwebViewGameObject=newGameObject("UniWebView");webView=webViewGameObject.AddComponent<UniWebView>();//设置全屏webView.Frame=newRect(0,0,Screen.width,Screen.height);//设置安全区域varsafeArea=UniWebViewSafeArea.Get();//设置内边距，以避开安全区域webView.SetContentInsets(safeArea.top,safeArea.left,safeArea.bottom,safeArea.right);//注意：SetContentInsets的参数顺序为：上、左、下、右//加载URLwebView.Load("https://example.com");webView.Show();}}```4.处理屏幕旋转：当屏幕旋转时，安全区域可能会改变。因此，我们需要监听屏幕方向的变化，并更新WebView的安全区域。```csharpvoidUpdate(){//监听屏幕方向变化if(screenOrientation!=Screen.orientation){screenOrientation=Screen.orientation;//更新安全区域UpdateSafeArea();}}voidUpdateSafeArea(){if(webView!=null){varsafeArea=UniWebViewSafeArea.Get();webView.SetContentInsets(safeArea.top,safeArea.left,safeArea.bottom,safeArea.right);//如果需要，也可以重新设置FramewebView.Frame=newRect(0,0,Screen.width,Screen.height);}}```5.状态栏处理：如果需要显示或隐藏状态栏，可以使用iOS原生的方式，但Unity中通常使用`Screen.fullScreen`来设置。在iOS中，状态栏的显示会影响安全区域。注意：在设置全屏时，状态栏可能会被隐藏，从而导致安全区域变化。根据你的需求决定是否显示状态栏。6.横屏模式下的安全区域：横屏时，左右的安全区域（即刘海所在侧）会变成左右两侧的边距，而顶部和底部则变为无刘海的一侧。所以上述代码在横屏时也会自动调整。7.使用安全区域UI组件：如果上述方法不适用或者需要更精细的控制，UniWebView5.3.0还提供了另一种方式：`UniWebViewSafeAreaUI`组件。我们可以将`UniWebViewSafeAreaUI`组件添加到WebView游戏对象上，它会自动调整WebView的安全区域。-在Inspector窗口中添加`UniWebViewSafeAreaUI`组件-或者通过代码添加：```csharpwebViewGameObject.AddComponent<UniWebViewSafeAreaUI>();```这样，WebView就会自动根据设备的安全区域调整位置和大小。8.注意事项：-确保在Xcode项目中已设置好安全区域，通常使用Storyboard启动时自动处理。如果使用Unity的默认启动方式，UniWebView会自动处理。-测试时，务必在真机上进行，因为模拟器可能无法准确反映安全区域。结论：以上步骤可以解决UniWebView在iOS刘海屏设备上的适配问题。通过设置安全区域边距，我们可以确保WebView的内容不会被刘海或圆角遮挡，同时避免与状态栏重叠。如果遇到问题，还可以参考UniWebView的官方文档：https://docs.uniwebview.com相关问题：1.在Android全面屏设备上如何适配UniWebView？2.如何动态改变UniWebView的尺寸？3.如何解决UniWebView在iOS上输入框被键盘遮挡的问题？4.UniWebView是否支持与Unity场景中的其他UI元素混合显示？</think> ### Unity UniWebView 5.3.0 iOS 刘海屏适配解决方案 解决 UniWebView 在 iOS 刘海屏设备（iPhone X 及更新机型）的适配问题，需要处理两个关键方面：**安全区域避让**和**状态栏适配**。以下是完整实现方案： #### 核心适配代码 ```csharp using UniWebViewNamespace; using UnityEngine; public class WebViewAdapter : MonoBehaviour { UniWebView webView; void Start() { // 创建WebView实例 webView = gameObject.AddComponent<UniWebView>(); // 1. 设置安全区域 ApplySafeAreaInsets(); // 2. 状态栏适配 AdaptStatusBar(); webView.Load("https://your-url.com"); webView.Show(); } void ApplySafeAreaInsets() { #if UNITY_IOS // 获取iOS安全区域边距 var insets = UniWebViewSafeArea.Get(); // 应用安全区域避让（避开刘海区域） webView.SetContentInsetsForScreenEdges( insets.top, // 顶部：避开传感器区域 insets.left, // 左侧：圆角区域 insets.bottom, // 底部：Home指示条 insets.right // 右侧：圆角区域 ); #endif } void AdaptStatusBar() { #if UNITY_IOS // 隐藏iOS状态栏（可选） UniWebView.SetAllowAutoShowToolbar(false); // 自定义状态栏背景色（匹配WebView） webView.SetShowToolbar(true, true, false, Color.white); // 启用工具栏半透明（避免刘海穿透） webView.SetToolbarTranslucent(false); #endif } // 屏幕旋转处理 void Update() { if (Screen.orientation != currentOrientation) { currentOrientation = Screen.orientation; ApplySafeAreaInsets(); } } } ``` #### 关键适配点说明 1. **安全区域处理** $\text{UniWebViewSafeArea.Get()}$ - 自动识别设备刘海区域尺寸 - 通过 `SetContentInsetsForScreenEdges()` 应用边距避让 - 解决内容被刘海/圆角遮挡问题 2. **状态栏控制** $\text{SetAllowAutoShowToolbar()}$ - 禁用默认工具栏避免布局冲突 - 自定义背景色确保与WebView融合 - 禁用半透明防止内容穿透 3. **横竖屏自适应** - 在屏幕旋转时更新安全区域 - 需处理设备物理旋转感应 #### 额外注意事项 1. **Xcode工程设置**： ```xml <!-- Info.plist 添加 --> <key>UIViewControllerBasedStatusBarAppearance</key> <true/> ``` 2. **刘海设备判断**： ```csharp bool isNotchedScreen = UniWebViewSafeArea.Get().top > 40; ``` 3. **Unity UI整合**： - 若需要叠加Unity UI元素，使用 `Canvas.GetSafeAreaRect()` 对齐安全区域 4. **特殊设备适配**： - iPad Pro需额外处理侧边圆角 - iPhone 14 Pro系列需验证动态岛区域 > **性能提示**：在 $60\text{Hz}$ 刷新率设备上，避免每帧调用安全区域计算[^1] #### 效果验证清单 1. 在 iPhone X/11/12/13/14 系列真机测试 2. 验证竖屏/横屏模式下内容避让 3. 检查全屏视频播放时的安全区域 4. 测试弹出键盘时的布局偏移 5. 确认状态栏文本颜色与背景对比度 可通过 UniWebView 官方文档查看最新的安全区域处理API：https://docs.uniwebview.com/api/UniWebViewSafeArea.html [^2] --- ###
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值