记一次内嵌H5页面的样式出错(放大)问题

摘要:
即使缩放字体,该键也会影响图像样式。如果APP开发不太严格,测试环境由A运营商运营,但生产环境不……联系了APP同事,他们表示其他渠道没有问题。在各种查询之后,将以下js添加到父组件中。在<script/>中添加索引J。具体原因将在稍后调查。Dpr:1,//当被iframe引用时,缩放Dpr=1,scale=1/Dpr,resizeEvt='orientationchange'窗口?
操作A: webview.getSettings().setTextZoom(100)

安卓有个很坑的点,他会重写内嵌H5页面(rem)的样式。字体有缩放也就算了,关键对图片的样式也会有影响。
如果遇到不太严谨的APP开发,测试环境都由操作A,生产环境没有的。。。那就绝了。。。

联系APP同事,他们说其他渠道对接过来都没问题【微笑脸】。
各种查询之后,在父组件加以下js解决。加在index.js的<script />里了。
具体原因后面再深究。
(function(doc, win) {
    var docEl = doc.documentElement,
        isIOS = navigator.userAgent.match(/(i[^;]+;( U;)? CPU.+Mac OS X/),
        dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
        dpr = window.top === window.self ? dpr : 1, //被iframe引用时,禁止缩放
        dpr = 1,
        scale = 1 / dpr,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
    docEl.dataset.dpr = dpr;
    var metaEl = doc.createElement('meta');
    metaEl.name = 'viewport';
    metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale;
    docEl.firstElementChild.appendChild(metaEl);
    var recalc = function() {
        var width = docEl.clientWidth;
        if (width / dpr > 750) {
            width = 750 * dpr;
        }
        // 乘以100,px : rem = 100 : 1
        docEl.style.fontSize = 100 * (width / 750) + 'px';
    };
    recalc()
    if (!doc.addEventListener) return;
    win.addEventListener(resizeEvt, recalc, false);
})(document, window);
 

免责声明:文章转载自《记一次内嵌H5页面的样式出错(放大)问题》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇记STM32F030多通道ADC DMA读取乱序问题Ubuntu 常用命令下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

随便看看

实用干货丨如何使用Prometheus配置自定义告警规则

前言普罗米修斯是一个用于监控和报警的开源系统。在普罗米修斯的术语中,它所监视的事物被称为目标。在本文中,我们将逐步展示如何安装Prometheus来监控/创建报警,并根据自定义事件配置自定义报警规则。当条件满足时,它将发出警报集成Alertmanager来处理客户端应用程序发送的警报。警报管理器将与发送警报通知的电子邮件帐户集成。了解普罗米修斯操作员根据普罗...

10 TCP限流技术

TCP流限制的原因是接收方可以完全接受消息,以确保数据安全而不会丢失。首先,窗口机制引入了发送方和接收方都有一个窗口。当发送方发送数据时,将发送落入窗口中的数据。当接收器接收到数据时,落入接收器窗口的数据将被接受。可以看出,流量会受到窗口大小II的限制。滑动窗口技术1TCP滑动窗口技术通过动态改变窗口大小来调整两台主机之间的数据传输。...

echarts折线图 鼠标移入改变小点显示样式

=undefined){res+=nameList[i].seriesName+':'+nameList[i].data+'%'+''}}res=res.split;returnres[0]+''+res[1];}}echarts折线图的鼠标移动上去小点显示样式修改tooltip:{trigger:'axis',formatter:function{varr...

Ubuntu 18.04 安装微信(附企业微信)

Ubuntu软件市场也是有的,所以安全性不用担心开源地址:https://github.com/geeeeeeeeek/electronic-wechat下面介绍几种安装的方式:1.直接解压运行先选择你系统版本:解压一下:tar-zxvfxxx.tar.gz算了,还是简单为新手分析一下==》tar命令可以解包.tar和.tar.gz。为啥我的没有微信图标?...

H3C系列之三层交换机系统版本升级

本文中涉及的硬件和软件交换机:H3CS3600-28TP-SItftp软件:tftpd32软件升级文件:S36SI_ E-CMW310-R1702P44.zip升级文件描述如下:S36SI_ E-CMW310-R1702P44-S168.bin168-bitSSH加密应用程序S3600_ V606.btmbootrom(downloadedynetworkp...