【快應用】webview接口打開網頁，網頁會被自動放大，如何适配手機大小

【現象描述】

通過webview接口打開網頁，網頁會被自動放大，問題代碼如下：

webview.loadUrl({

url: 'https://cdn.langqing.club/jQuery/index.html',

allowthirdpartycookies: true

})

【問題分析】

原因在于快應用加載器沒有對網頁的比例和螢幕的寬度做适配，預設顯示網頁實際的寬度，沒有将網頁内容全部顯示在螢幕寬度内。

【解決方法】

可以通過web元件加載網頁，并設定overviewmodeinload屬性為true規避此問題。代碼如下：

<template>

<div class="container">

<web src="https://cdn.langqing.club/jQuery/index.html" overviewmodeinload="true"></web>

</div>

</template>

<style>

.container {

flex-direction: column;

}

</style>

<script>

module.exports = {

data: {

},

onInit() {

this.$page.setTitleBar({

text: 'menu',

textColor: '#ffffff',

backgroundColor: '#007DFF',

backgroundOpacity: 0.5,

menu: true

});

},

}

</script>

欲了解更多更全技術文章，歡迎通路https://developer.huawei.com/consumer/cn/forum/?ha_source=zzh