使用webview的h5游戏在iPhoneX设备全屏的实现

最新推荐文章于 2022-08-01 18:11:42 发布

ch_majia

最新推荐文章于 2022-08-01 18:11:42 发布

阅读量2k

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/ch_majia/article/details/97376475

本文介绍如何解决使用cocosCreator制作的H5小游戏在刘海屏iPhone上出现的安全区显示不全问题。通过修改cocos2dx引擎的UIWebViewImpl-ios.mm文件和在index.html中调整viewport设置，实现游戏在刘海屏设备上的全屏显示。

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

用cocosCreator做的h5小游戏，在有刘海的iphone上无法全屏，出现了安全区问题。

折腾了一下午，主要是对h5和html这些web 的东西很陌生，现在基本解决了问题。

由于我们的前端载体是基于quickcocos3.3的内嵌webview实现，因此还需要找的cpp部分创建uiwebview的代码修改部分。

主要需要修改两处实现：

1.在cocos2dx引擎的UIWebVIewImpl-ios.mm文件中，修改忽略iPhoneX设备的安全区。

- (void)setupWebView {
    if (!self.uiWebView) {
        self.uiWebView = [[[UIWebView alloc] init] autorelease];
            if (@available(iOS 11.0, *)) {
                self.uiWebView.scrollView.contentInsetAdjustmentBehavior = UIScrollViewContentInsetAdjustmentNever;
            } else {
                // Fallback on earlier versions
            }
        self.uiWebView.delegate = self;
    }
    if (!self.uiWebView.superview) {
        auto view = cocos2d::Director::getInstance()->getOpenGLView();
        auto eaglview = (CCEAGLView *) view->getEAGLView();
        [eaglview addSubview:self.uiWebView];
    }
}

2.在cocoscreator导出的h5工程中，修改intex.html

在head标签加入

<meta name='viewport' content='initial-scale=1, viewport-fit=cover'>

在body中加入

<body style="padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);">