uni-app 当前currentWebview().setStyle({scalable:true})无效

uni-app 当前currentWebview().setStyle({scalable:true})无效

问题描述

onLoad() {
//#ifdef APP-PLUS
var currentWebview = plus.webview.currentWebview(); //获取当前页面的webview对象
currentWebview.setStyle({"scalable":true})
// #endif
},

由于uniapp整体字体太小,客户要求能用手势放大可以看。可用上面的代码怎么没效果呢？ 延迟了也不行

图片


更多关于uni-app 当前currentWebview().setStyle({scalable:true})无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html

10 回复

完整示例 onReady() {
this.$scope.$getAppWebview().setStyle({“scalable”:true})
this.$scope.$getAppWebview().evalJS(var metaEl = document.createElement('meta') metaEl.setAttribute('name','viewport') metaEl.setAttribute('content','width=device-width,initial-scale=0.999,minimum-scale=0.1,maximum-scale=9') document.head.appendChild(metaEl))
}

更多关于uni-app 当前currentWebview().setStyle({scalable:true})无效的实战教程也可以访问 https://www.itying.com/category-93-b0.html


用你代码可以了，非常感谢。

nvue中上述代码无效

nue下报错：TypeError: Cannot read property ‘setStyle’ of undefined。可以用webview nvue来实现页面图片的缩放吗？目前试了只有webview vue可以

对象错误：uni-app的窗口对象是 this.$scope.$getAppWebview() 此对象相当于html5plus里的plus.webview.currentWebview() 在uni-app里vue页面直接使用plus.webview.currentWebview()无效，非v3编译模式使用this.$mp.page.$getAppWebview()

我这里获取的对象不是空的哦。

回复 n***@163.com: 在uni-app里vue页面直接使用plus.webview.currentWebview()无效，不能正常使用

我文件后缀也是.vue

回复 DCloud_uniCloud_JSON: 用了this.$scope.$getAppWebview了，但也是不效的。

针对你提到的 uni-app 中 currentWebview().setStyle({scalable:true}) 无效的问题，这通常是由于在最新的 uni-app 框架中，对 Webview 的操作方式有所变更或者对部分属性的支持有所调整。下面是一些可能的解决方法和代码示例，帮助你实现页面的缩放功能。

方法一：使用页面内CSS控制缩放

首先，确保你的页面内没有禁用用户缩放的 CSS 样式。通常，CSS 的 user-scalable 属性被设置为 no 会阻止缩放。你可以尝试在你的页面或组件的样式中明确设置允许缩放：

<style>
html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: auto;
    -webkit-user-select: none; /* 禁止用户选择文本 */
    -webkit-text-size-adjust: none; /* 禁止文字大小调整 */
    user-scalable=yes; /* 允许用户缩放 */
    /* 注意：实际上，user-scalable 属性应直接在 viewport meta 标签中设置 */
}
</style>

但请注意，user-scalable 属性应该直接在 viewport meta 标签中设置，如下：

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

方法二：尝试使用 uni-app 提供的 API 替代方案

如果 currentWebview().setStyle 方法确实不再有效，你可以考虑使用 uni-app 提供的其它 API 或配置来控制页面行为。例如，通过配置页面的 manifest.json 文件来控制应用的全局行为：

{
    "mp-weixin": {
        "appid": "your-app-id",
        "setting": {
            "pageWindow": {
                "backgroundTextStyle": "light",
                "navigationBarBackgroundColor": "#ffffff",
                "navigationBarTextStyle": "black",
                "navigationBarTitleText": "Demo",
                "enablePullDownRefresh": false,
                "disableScroll": false // 确保页面可以滚动，间接影响缩放体验
            }
        }
    }
}

方法三：检查 uni-app 版本和文档

确保你使用的 uni-app 版本是最新的，因为旧版本可能存在已知的 bug 或不支持某些特性。此外，查阅最新的 uni-app 官方文档，看看是否有关于 Webview 缩放的新指南或变更。

如果上述方法仍然无法解决问题，建议在 uni-app 的官方社区或 GitHub 仓库中搜索或提交 issue，寻求官方或社区的帮助。

希望这些方法和代码示例能帮助你解决 uni-app 中 Webview 缩放无效的问题。

回到顶部