关于webview中安卓和苹果页面缩放的问题

这是我在工作中自己遇到的问题，踩到的坑

我遇到的问题是这样的，验证码用的是webView的组件，在运行时发现安卓和苹果的验证码的大小不一致，而且苹果的验证码还可以双击放大缩小，这我就纳闷了，安卓苹果明明用的一套代码，为什么安卓正常，苹果就抽疯了，结果查了好久发现是webview的一个属性的问题，就是scalesPageToFit，这个属性呢就是适配屏幕的，设置是否要把网页缩放到适应视图的大小，以及是否允许用户改变缩放比例。

先放上错误的现象

这是正常的安卓的

然后是抽疯的苹果的

然后是双击验证码放大的

问题呢就出在这个上面，原因是安卓和苹果的参数设置是取反的，最后用了一个三目运算解决了这个坑爹的问题 scalesPageToFit={Platform.OS === ‘ios’? false : true}

下面就是搞得我摸不着头脑的代码

缺少了scalesPageToFit={Platform.OS === ‘ios’? false : true}这行代码，导致的结果就是安卓苹果适应视图的显示效果不一样

   <WebViewautomaticallyAdjustContentInsets={false}contentInset={{ top: 0, right: 0, bottom: 0, left: 0 }}source={{ html: "<style>*{margin:0;padding:0;}canvas{position:absolute;transform:translateZ(0);}</style><canvas></canvas><script>var canvas = document.querySelector('canvas');(" + renderString + ").call(" + contextString + ", canvas);</script>" }}opaque={false}underlayColor={'transparent'}style={this.props.style}javaScriptEnabled={true}/></View>

下面的就是添加了之后的，安卓苹果显示一致的代码了

<WebViewautomaticallyAdjustContentInsets={false}contentInset={{ top: 0, right: 0, bottom: 0, left: 0 }}source={{ html: "<style>*{margin:0;padding:0;}canvas{position:absolute;transform:translateZ(0);}</style><canvas></canvas><script>var canvas = document.querySelector('canvas');(" + renderString + ").call(" + contextString + ", canvas);</script>" }}opaque={false}underlayColor={'transparent'}style={this.props.style}javaScriptEnabled={true}scalesPageToFit={Platform.OS === 'ios'? false : true}/></View>

之后的苹果的也就正常了

关于webview中安卓和苹果页面缩放不同的问题相关推荐

android webview 字体被放大,Android WebView文字大小调整及页面缩放调整
释放双眼,带上耳机,听听看~! 初学者使用webview难免会面对页面缩放,展示与预期不符的问题,这里有几个处理方案: 方案一.通过屏幕密度调整分辨率 WebSettings settings = m ...
android和ios龙之谷,《龙之谷2手游》安卓和ios互通吗安卓和苹果互通情况解析
导读龙之谷2手游安卓和苹果的能一起玩吗?两者之间数据是否互通的这个问题让很多人都想要知道答案,特别是安卓和苹果组队的问题,关于两者是否数据互通下面会有详细的介绍,帮助大家了解安卓苹果互通组队的具体 ...
微信公众号 - 实现 H5 网页在微信内置浏览器中下载文件，可预览和下载 office 文件（doc / xls / ppt / pdf 等）适用于任何前端技术栈网站，兼容安卓和苹果系统！
前言网上的教程都是让你写页面 "引导" 右上角三个点里,让用户自己去浏览器打开,其实这样用户体验并不好. 本文实现了最新微信公众号 H5 网页(微信内置浏览器中),预览下载 o ...
设置Webview的页面缩放大小
之所以要把这个简单的WebView拿出来单独写除了简单的webview加载页面缩放的设置还是因为在此Fragment中有个小细节需要单独说下是这样的,此Fragment依托于上层Activity,上 ...
页面跳转微信及QQ的链接。QQ兼容安卓及苹果跳转
项目中遇见的磕磕碰碰页面跳转微信及QQ的链接.QQ兼容安卓及苹果跳转 QQ跳转,兼容安卓及苹果跳转的链接页面跳转微信及QQ的链接.QQ兼容安卓及苹果跳转 QQ跳转,兼容安卓及苹果跳转的链接此次遇 ...
android webview中加入无线淘宝客页面点击宝贝详情链接进入宝贝详情页面后无法返回问题
这几天弄了下在webview中引入无线淘宝客页面,发现点击宝贝详情进入页面后,无法返回. 刚开始按网上大部分说的在同一个webview中展示链接页面,这样重载WebClient的shouldOverr ...
Android Studio开发安卓app 安卓与webview中的js交互
Android Studio开发安卓app 安卓与webview中的js交互 1.webview中的页面调用android中的方法在Android Studio开发安卓app 封装WEB(H5,UR ...
ionic 实现应用内(webview中html页面点击) 和应用外 (浏览器html页面点击) 打开本地安装应用...
应用内(webview中html页面点击) : 应用内打开本地安装应用指的是webview里打开应用,需要2个步骤: 1: 需要下载一个cordova插件:com.lampa.startapp ,也可 ...
h5 android 字体设置,解决因为手机设置字体大小导致h5页面在webview中变形的BUG
解决因为手机设置字体大小导致h5页面在webview中变形的BUG 首先,我们做了一个H5页面,在各种手机浏览器中打开都没问题.我们采用了rem单位进行布局,通过JS来动态计算网页的视窗宽度,动态设置 ...

关于webview中安卓和苹果页面缩放不同的问题

关于webview中安卓和苹果页面缩放的问题

下面就是搞得我摸不着头脑的代码

关于webview中安卓和苹果页面缩放不同的问题相关推荐

最新文章

热门文章