uniapp笔记——App端web-view内嵌网页可以缩放

最新推荐文章于 2025-05-05 03:35:38 发布
最新推荐文章于 2025-05-05 03:35:38 发布
阅读量4k 收藏 6
点赞数 9
分类专栏： uniapp学习 文章标签： 前端 uni-app 笔记 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_44792197/article/details/130424700
版权
uniapp的web-view组件允许开发者更灵活地控制和扩展其功能。每个vue页面本质上是一个webview，而web-view组件是其中的子webview。通过设置Webview窗口的样式参数，如设置scalable为true，可以实现子web-view的缩放功能，从而调整嵌入网页的显示效果。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

uniapp官方文档-web-view

App端web-view的扩展
App端的webview是非常强大的，可以更灵活的控制和拥有更丰富的API。
每个vue页面，其实都是一个webview，而vue页面里的web-view组件，其实是webview里的一个子webview。这个子webview被append到父webview上。
通过以下方法，可以获得这个web-view组件对应的js对象，然后参考https://www.html5plus.org/doc/zh_cn/webview.html#plus.webview.WebviewObject，可以进一步重设这个web-view组件的样式，比如调整大小，窗口缩放等：

例子：
setStyle: 设置Webview窗口的样式
参数：
styles: ( WebviewStyles) 必选 要设置的窗口样式
属性：
scalable: (Boolean 类型 )窗口是否可缩放

我是利用窗口样式属性scalable为true重新设这个web-view组件的样式，来实现嵌入网页可以缩放
附上代码截图
在这里插入图片描述

用webView显示文本中的样式
weixin_42597129的博客
11-27 355
1.引入三个css层叠样式表文件 链接：https://pan.baidu.com/s/12oDhzUazAv70s9p45ERg7Q 2.在html的head上引入样式（红色部分代码） private String getHtmlData(String bodyHTML) { String head = "<head>" + "<me...
uniapp 使用webview对vue的page进行缩小放大功能实现(完整版)
a1231233434453的博客
11-14 3359
uniapp 使用webview对vue的page进行缩小放大功能实现(完整版)
uniapp的web-view 无法自由缩放（已解决）
qq_41444226的博客
03-22 3447
废话不多说，直接上代码 参考官方网址：https://uniapp.dcloud.io/component/web-view.html#web-view 参考代码： <template> <view> <web-view :webview-styles="webviewStyles" :src="url"></web-view> </view> </template> <script> let wv; expor
uniapp APP 自定义 webview大小
最新发布
weixin_46014771的博客
05-05 160
APP 自定义 webview大小
uniapp的webview页面的双指缩放
eight_eyes_fish的博客
06-29 2849
【代码】uniapp的webview页面的双指缩放。
uniapp网页缩放，适配手机和PC
qq_43024468的博客
03-20 1634
【代码】uniapp网页缩放，适配手机和PC。
uniapp webview缩放
lulu2426的博客
08-03 2586
var currentWebview = this.mp.page.mp.page.mp.page.getAppWebview()//此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效，非v3编译模式使用this.mp.page.mp.page.mp.page.getAppWebview() setTimeout(function() { wv = currentWe
uni-app web-view缩放
qq_36926045的博客
07-20 4299
摘录原文链接 代码记录 <template> <view> <web-view :src="goToUrl()" progress></web-view> </view> </template> <script> var wv; //计划创建的webview export default { components: {}, data() { return { }; }, onLoad
UNI-APP在自定义组件中内嵌H5/Html网页，可自定义webview大小，加载不闪屏
沧海龙腾LV的博客
04-07 7385
问题描述： UNI-APP在自定义组件中内嵌H5/Html网页时，通过内置组件web-view实现（如下），发现会自动铺满整个页面，不可控制大小（默认充满屏幕不可控制大小） <web-view src="https://uniapp.dcloud.io/static/web-view.html"></web-view> 并且，当有多个tab页面时（多个自定义组件切换时），调整webview窗口大小，会出现闪屏的现象。 预期效果如下 <templat..
uni-app web-viwe 样式修改
m0_68964998的博客
07-31 2171
【代码】uni-app web-viwe 样式修改。
uniapp系列-超详细教你在uni-app+vue3里通过web-view组件传递信息打开H5页面写入localstorage并解决兼容性
tangdou369098655的博客
04-19 1万+
如何使用web-view，并互相传递数据,使用web-view发送消息给H5,webview 给 uniapp发消息，@message无效怎么办？uniapp嵌套webview页面，接收数据onPostMessage写了不管用怎么办？或者@message写了不管用怎么办？(uniapp web-view @message不触发怎么办？)
uniapp修改webview样式
Syracuse123_的博客
02-14 3619
uniapp修改嵌入的webview的样式，宽、高、位置等
WebView控件的属性、样式、方法
海阔天空
09-22 5089
主要属性 source： 在 WebView中载入一段静态的html代码或是一个 url（还可以附带一些 header 选项） automaticallyAdjustContentInsets： 设置是否自动调整内容。格式：bool contentInset： 设置内容所占的尺寸大小。格式：{top:number,left:number,bottom:number,right:number} in...
WebView：基本设置与使用
雨山的博客
04-01 3039
一、简介WebView作为Android控件为Android App开发提供了新的方式，WebView加载Html页面可以作为App交互界面。由于Html页面开发具有及时性，可以用来实现一些App中经常修改的界面，不用因为经常修改而迭代版本。二、常见API1.WebView常用API getSettings() - 获取设置WebView的WebSettings对象。 setWeb
小程序禁止webview的自由缩放
hay23455的博客
10-26 2002
在小程序开发中，无法直接禁止WebView的自由缩放。因为小程序的WebView是由微信或其他小程序平台提供的，开发者无法对WebView进行底层控制。​元标签来影响WebView的缩放行为。尽管无法完全禁止自由缩放，但可以限制用户的缩放范围。meta标签通常是在要跳转的页面中设置，即要加载的网页的HTML文档中。小程序的WebView会根据加载的网页内容自动解析并应用meta标签的设置。​组件加载网页时，可以在要加载的网页的HTML文档中添加meta标签来控制WebView的行为，例如限制缩放等。
uni-app 自定义webview大小
热门推荐
liuye066的专栏
10-26 1万+
在uni-app中使用web-view 组件，默认铺满全屏并且层级高于前端组件，会遮挡页面上的其他组件。在官网中写明： app-vue下web-view组件不支持自定义样式，默认充满屏幕不可控制大小； nvue web-view 必须指定样式宽高 具体示例： 代码： 直接在UI上使用webview组件，也是默认全屏，需要动态加载。 先新建一个component.nvue文件： <template> <div> <view class="intro"&g
uni-app中web-view
qq_35191010的博客
04-20 1871
uni-app中的web-view
uni-app双指缩放图片大小
mengmeng1_的博客
04-01 3702
图片设置双指放大缩小这个功能相对来说比较简单的，是用于官方文档的路径(组件->视图容器->movable-area)，movable-area可以做双指放大缩小，并且放大的同时可以左右移动图片(页面) 用HBuilder X编辑器创建个uni-app项目 <template> <view> <view class="uni-padd...
小程序webview 页面被放大_Android中WebView加载的网页被放大的解决办法
weixin_33456452的博客
12-23 715
在某些大分辨率下，我们用WebView加载的网页可能会出现被放大的现象，这显然不是我们想要的结果，我开始看WebSettings这个是否可以设置不缩放，webSettings.setBuiltInZoomControls(false)，我发现这样设置后没有任何效果，没办法只得继续看代码。后来看到有个这样的属性：WebSettings.ZoomDensity下面直接贴关键部分的代码吧。int scr...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值