HarmonyOS 鸿蒙Next webview如何设定打开的网页的ViewportFit，目前打开一个PC端的网址，显示的是PC版样式，需要设置ViewportFit模式，使之显示成移动端的样式

发布于 1周前 作者 nodeper 来自 鸿蒙OS

HarmonyOS 鸿蒙Next webview如何设定打开的网页的ViewportFit，目前打开一个PC端的网址，显示的是PC版样式，需要设置ViewportFit模式，使之显示成移动端的样式

webview如何设定打开的网页的ViewportFit，目前打开一个PC端的网址，显示的是PC版样式，需要设置ViewportFit模式，使之显示成移动端的样式

Harmonyos Next教程
3 回复
你可以设置UA，demo如下：
深色代码主题
复制
// xxx.ets

import web_webview from ‘@ohos.web.webview’


@Entry


@Component


struct WebComponent {


  controller: web_webview.WebviewController = new web_webview.WebviewController();


  build() {


    Column() {


      Web({ src: ‘www.baidu.com’, controller: this.controller })


        .onControllerAttached(()=>{


          this.controller.setCustomUserAgent(‘Mozilla/5.0 (iPhone; CPU iPhone OS 16_4_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML,like Gecko) Version/16.4 Mobile/15E148 Safari/604.1’)


        })


    }


  }


}

更多关于HarmonyOS 鸿蒙Next webview如何设定打开的网页的ViewportFit，目前打开一个PC端的网址，显示的是PC版样式，需要设置ViewportFit模式，使之显示成移动端的样式的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


参考这个https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/web-fit-content-V5

还要你的网页已经做了适配移动端

在HarmonyOS鸿蒙系统中，若需为Next webview设定打开的网页的ViewportFit，以适配移动端显示样式，可通过以下方式实现：

  1. 配置WebView设置：在创建或初始化WebView组件时，可以通过设置WebView的配置项来指定ViewportFit。HarmonyOS提供了对应的API用于此目的。

  2. 使用setWebSettings方法：类似于Android WebView的设置，尽管不直接采用Java或C语言代码，鸿蒙系统有其专属的API接口。调用setWebSettings方法，并设置setViewportFitMode为ViewportFitMode.COVER（或其他适合移动端显示的模式），以确保网页内容按移动端样式渲染。

  3. 示例代码：

    let webView = new ohos.multimedia.WebView(this.context);
let webSettings = webView.getWebSettings();
webSettings.setViewportFitMode(ohos.multimedia.WebSettings.ViewportFitMode.COVER);
webView.loadUrl("http://your-pc-website-url.com");

注意，以上代码为示意性质，具体实现需依据鸿蒙系统SDK文档调整。

如果问题依旧没法解决请联系官网客服,官网地址是：https://www.itying.com/category-93-b0.html

回到顶部