cocos2dx-lua在App端展示webview的适配问题

原创已于 2024-06-19 15:06:53 修改 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#js #cocos2d-lua #webview

于 2021-05-21 16:44:45 首次发布

游戏同时被 2 个专栏收录

38 篇文章

订阅专栏

开发语言

35 篇文章

订阅专栏

在cocos2d-x Lua项目中，使用ccui.WebView显示web内容时遇到适配问题。原代码直接将webview大小设置为panel大小，导致在某些高屏手机上显示不全。通过获取手机分辨率并根据比例计算新的webview尺寸，解决了适配问题。调整后的代码能确保webview在不同分辨率设备上正确显示。

在我的项目中：本地app开发的预制体中，展示webview的panel的宽高是750*1338

出现的问题：

但是在使用ccui.webview的时候，直接把webview设置成和panel一样的宽高，在有的手机上是合适的，有的高屏手机就是出现适配问题，显示内容高度比手机屏幕小，宽度是合适的

原代码：直接使用panel的宽高

local winSize = self.contentPanel:getContentSize()
self._webView = ccui.WebView:create()
self._webView:setPosition(winSize.width / 2, winSize.height / 2)
self._webView:setContentSize(winSize.width, winSize.height)
self._webView:loadURL(url)
self._webView:setScalesPageToFit(true)

本来以为是webview端开发的适配问题，后来看是和手机分辨率相关的，

修改后的代码：先获取手机的分辨率，因为宽度750是合适的，所以就根据真实的分辨率和panel的宽高做个计算，最终得到合适的显示高度

panel:750*1338

分辨率：1080*1920

local gl = cc.Director:getInstance():getOpenGLView();

local frameSize = gl:getFrameSize(); -- 得到分辨率

local winSize = self.contentPanel:getContentSize()；--panel的size
--计算真实宽高
local useSize = {width=winSize.width,height=math.ceil(frameSize.height*winSize.width/frameSize.width) } -- 这里使用math.ceif是为了尽可能取高点，防止不能铺满屏幕
self._webView = ccui.WebView:create()
self._webView:setPosition(useSize.width / 2, useSize.height / 2-(useSize.height-winSize.height)) --位置的计算是中心点-真实高度和panel的高度的差值，这是我自己本地项目的调整的合适结果
self._webView:setContentSize(useSize.width, useSize.height)
self._webView:loadURL(url)
self._webView:setScalesPageToFit(true)

最终得到的在手机app上显示的webview可以完美的适配到手机上 ,这里我的webview项目是用cocos creator开发打包的，

注意：webview项目在开发时也要做好适配，把锚点，widget等都设置好，防止适配到app端时

显示的节点位置会偏移