- 发布：2023-05-24 20:07
- 更新：2023-05-24 23:07
- 阅读：276
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： WIN10
HBuilderX类型： 正式
HBuilderX版本号： 3.7.10
手机系统： 全部
手机厂商： 华为
页面类型： nvue
vue版本： vue2
打包方式： 云端
项目创建方式： HBuilderX
测试过的手机：
示例代码：
<template>
<view class="flex-1" style="">
<web-view class="flex-1" style="" :src="url" :fullscreen="false" :webview-styles="webviewStyles"></web-view>
</view>
</template>
<script>
var wv;//计划创建的webview
export default {
onLoad(e) {
let ip = e.ip
this.url = `http://${ip}`
const currentWebview = this.$scope.$getAppWebview();
currentWebview.setStyle({scalable: false})
},
onReady() {
},
data() {
return {
url: "",
webviewStyles: {
progress: {
color: '#00FF00'
}
}
}
},
onNavigationBarButtonTap(e) {
uni.showToast({
title: 'reloading',
icon: 'none'
});
let tmpUrl = this.url
this.url = ""
setTimeout(() => {
this.url = tmpUrl
}, 2000)
},
methods: {
}
}
</script>
<style>
</style>
<template>
<view class="flex-1" style="">
<web-view class="flex-1" style="" :src="url" :fullscreen="false" :webview-styles="webviewStyles"></web-view>
</view>
</template>
<script>
var wv;//计划创建的webview
export default {
onLoad(e) {
let ip = e.ip
this.url = `http://${ip}`
const currentWebview = this.$scope.$getAppWebview();
currentWebview.setStyle({scalable: false})
},
onReady() {
},
data() {
return {
url: "",
webviewStyles: {
progress: {
color: '#00FF00'
}
}
}
},
onNavigationBarButtonTap(e) {
uni.showToast({
title: 'reloading',
icon: 'none'
});
let tmpUrl = this.url
this.url = ""
setTimeout(() => {
this.url = tmpUrl
}, 2000)
},
methods: {
}
} </script>
<style>
</style>
操作步骤：
上面代码即可复现。
打开的页面，被自动缩放，无法保持网页正常比例
上面代码即可复现。
打开的页面，被自动缩放，无法保持网页正常比例
预期结果：
打开不缩放的页面
打开不缩放的页面
实际结果：
打开的页面被自动缩放了
打开的页面被自动缩放了
bug描述：
web-view 无法禁用页面缩放
FullStack - 【插件开发】【专治疑难杂症】【ios上架、马甲包、白包、过审、已成功上架过几百个】【多款插件已上架：https://ext.dcloud.net.cn/publisher?id=22130】【非诚勿扰】QQ：543610866
scalable 这是属性是控制 双指缩放的
x***@qq.com (作者)
请问一下：要禁用 web-view 缩放，需要如何设置？
2023-05-29 08:29