如何使H5页面适配多设备?

如何在多设备的情况下自适应指定页面?

HarmonyOS
2024-07-23 11:14:28
1.2w浏览
收藏 0
回答 1
回答 1
按赞同
/
按时间
友人FA

目前可以通过修改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); 
        }) 
    } 
  } 
}
  • 1.
  • 2.
  • 3.
  • 4.
  • 5.
  • 6.
  • 7.
  • 8.
  • 9.
  • 10.
  • 11.
  • 12.
  • 13.
  • 14.
  • 15.
  • 16.
  • 17.
  • 18.
  • 19.
  • 20.
  • 21.
分享
微博
QQ
微信
回复
2024-07-23 18:37:22


相关问题
HarmonyOS h5页面是否可以适配Harmony OS
1045浏览 • 1回复 待解决
HarmonyOS h5页面缩放问题
1538浏览 • 1回复 待解决
如何在HarmonyOS中调试h5页面
1447浏览 • 1回复 待解决
HarmonyOS H5页面加载缓存机制
921浏览 • 1回复 待解决
HarmonyOS H5页面localstorage为null
594浏览 • 1回复 待解决
HarmonyOS webview H5页面事件监听
815浏览 • 1回复 待解决
HarmonyOS 通过webview改变H5页面字体
589浏览 • 1回复 待解决
HarmonyOS Web组件加载在线H5页面
699浏览 • 1回复 待解决
HarmonyOS 在h5页面怎样判断当前环境?
566浏览 • 1回复 待解决
HarmonyOS H5页面使用alert函数不生效
403浏览 • 1回复 待解决
HarmonyOS H5页面保存图片到本地相册
529浏览 • 1回复 待解决
HarmonyOS 外部H5页面,拉起手机银行app
538浏览 • 1回复 待解决