HarmonyOS 鸿蒙Next：Web组件在onControllerAttached事件中setCustomUserAgent导致viewport失效，页面表现如PC端浏览器而非移动端

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

HarmonyOS 鸿蒙Next：Web组件在onControllerAttached事件中setCustomUserAgent导致viewport失效，页面表现如PC端浏览器而非移动端 Web组件在onControllerAttached事件中setCustomUserAgent，会导致页面里面的viewport不起作用了。像是一个PC端浏览器，而不是移动端浏览器。

Web({
 src: "",
 controller: this.webviewController 
})
.onControllerAttached(() => {
 const ua = this.webviewController.getUserAgent() + '/xxx';
 this.webviewController.setCustomUserAgent(ua);
 this.webviewController.loadUrl(this.src)
})

如果设置了userAgent，那么viewport好像失去了效果，页面变得非常大，像PC端一样，而且可以放大缩小。

把 setCustomUserAgent去掉，效果又正常了。

这个问题怎么解，文档里面没有查到。


更多关于HarmonyOS 鸿蒙Next：Web组件在onControllerAttached事件中setCustomUserAgent导致viewport失效，页面表现如PC端浏览器而非移动端的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html

Harmonyos Next教程
6 回复

楼主您尝试在Web组件里加上**.metaViewport(true)**这个属性，或者在设置的UA中手动加上‘Mobile’字段试试呢

更多关于HarmonyOS 鸿蒙Next：Web组件在onControllerAttached事件中setCustomUserAgent导致viewport失效，页面表现如PC端浏览器而非移动端的实战系列教程也可以访问 https://www.itying.com/category-93-b0.html


两个方式都可以。 我选择 .metaViewport 方法。 但是官方的文档有问题，如果设备为2in1，不支持viewport属性。设置为true或者false均不会解析viewport属性，进行默认布局。（我就是用的2in1的pad，确实需要设置这个才起作用。）

https://developer.huawei.com/consumer/cn/doc/harmonyos-references-V5/ts-basic-components-web-V5#metaviewport12

是一样的。看截图

这个非常好重现。就用百度的地址就可以了。我写了个demo。

```javascript
import { webview } from '[@kit](/user/kit).ArkWeb';

[@Entry](/user/Entry)
[@ComponentV2](/user/ComponentV2)
struct Index {
    private webviewController: webview.WebviewController = new webview.WebviewController();

    aboutToAppear() {
        // 配置Web开启调试模式
        webview.WebviewController.setWebDebuggingAccess(true);
    }

    build() {
        Column() {
            Web({
                src: "https://m.baidu.com", 
                controller: this.webviewController
            })
                .onControllerAttached(() => {
                const agent = this.webviewController.getUserAgent() + "/demo"
                this.webviewController.setCustomUserAgent(agent)
            })
        }
        .height('100%')
        .width('100%')
    }
}

我用webview调试工具，可以看到设置的agent的是成功的。

设置userAgent的截图:

没有设置自定义截图:

可以对比一下，会发现设置了自定义userAgent后，网页明显变大了，字看起来有点小。

这是通过webview调试工具截图的。在真实的机器上的效果也是这样的。

可以看下getUserAgent返回的值，看看是不是跟这文章里的UA一致，参考 设置UserAgent；如果还有问题的话，楼主是否方便提供显示有问题的Html网页，方便后续分析

你好，我回复在帖子下面，因为在这个里面回复不能贴图片。
userAgent没有问题的，我也在贴图，包括整个demo代码，能完美重现这个问题。

在HarmonyOS鸿蒙Next系统中，若Web组件在onControllerAttached事件中调用setCustomUserAgent方法后导致viewport失效，页面表现如同PC端浏览器而非移动端，这通常是由于自定义User-Agent字符串可能未正确设置或影响了移动视口的默认行为。

setCustomUserAgent方法用于设置Web组件的User-Agent字符串，该字符串用于告知服务器客户端的身份和特性。若设置不当，可能会影响页面的渲染模式，特别是移动视口的设置。

解决此问题的一种方法是检查自定义的User-Agent字符串是否包含必要的移动设备标识，确保它能被服务器正确识别为移动设备请求。此外，确认viewport元标签是否正确设置，例如：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

确保此标签在HTML文档的<head>部分，并且没有被其他JavaScript代码或样式覆盖。

如果自定义User-Agent后确实需要特定的渲染模式，考虑在服务器端根据User-Agent调整响应的CSS和JavaScript，以适应不同的设备类型。

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

回到顶部