中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
如何在多设备的情况下自适应指定页面?
微信扫码分享
目前可以通过修改ua的方式来自适应不同设备,UserAgent的内容可以参考默认UserAgent定义,可以通过deviceType识别设备类型用于不同设备上的页面显示。
所以在多设备情况下,可以通过读取设备的UserAgent并将该值设置给webview,使得页面可以通过读取自己UserAgent并设置正确的设备类型,从而完成在不同设备上的页面显示。
参考代码
import web_webview from '@ohos.web.webview'; @Entry @Component struct WebComponent { controller: web_webview.WebviewController = new web_webview.WebviewController(); userAgent : string = ''; phone_ua : string = "Mozilla/5.0 (Phone; Android; OpenHarmony 5.0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36 ArkWeb/4.1.6.1 Mobile" build() { Column() { Web({ src: 'www.xxx.com', controller: this.controller }) .width('100%') .mixedMode(MixedMode.All) .onControllerAttached(() => { this.controller.setCustomUserAgent(this.phone_ua); }) } } }
目前可以通过修改ua的方式来自适应不同设备,UserAgent的内容可以参考默认UserAgent定义,可以通过deviceType识别设备类型用于不同设备上的页面显示。
所以在多设备情况下,可以通过读取设备的UserAgent并将该值设置给webview,使得页面可以通过读取自己UserAgent并设置正确的设备类型,从而完成在不同设备上的页面显示。
参考代码