前端代码解决webview在android,ios表现不一致_webview ios兼容问题

目前只在游戏公告使用了webview

竖屏游戏，公告在ios和安卓表现上各有各的问题

在ios上，内容缩小，还需要横向滑动

在安卓，没有横向滑动条，但是字体特别大

安卓的问题移动端修改一下代码就可以了，但是因为版本已经发布了，这种方式就不太合适了。

能在html内容解决是最好的，毕竟这部分是请求数据，直接替换就可以应用。

安卓显示的问题，在html添加调整代码

<script>
 
    var docEl = document.documentElement,
 
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
 
        recalc = function () {
 
            var limitWidth = 375;
 
            var clientWidth = docEl.clientWidth || limitWidth;
 
            clientWidth > limitWidth ? clientWidth = limitWidth : clientWidth = clientWidth;
 
            if (clientWidth) {
 
                const fz = docEl.style.fontSize = 20 * (clientWidth / limitWidth);
 
                docEl.style.fontSize = 20 * (clientWidth / limitWidth) + 'px';
 
                window.remscale = clientWidth / limitWidth;
 
                var realfz = ~~(+window.getComputedStyle(document.getElementsByTagName("html")[0]).fontSize.replace('px', '') * 10000) / 10000
 
                if (fz !== realfz) {
 
                    document.getElementsByTagName("html")[0].style.cssText = 'font-size: ' + fz * (fz / realfz) + "px";
 
                }
 
            }
 
        };
 
    if (document.addEventListener) {
 
        window.addEventListener(resizeEvt, recalc, false);
 
        document.addEventListener('DOMContentLoaded', recalc, false);
 
    }
 
</script>

ios横向滑动条显示问题

html顶部添加meta标签的方式

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

对前端应该是挺简单的，但我就苦手了。能用就行。

参考：

Android 系统字体大小动态改变，导致webview中显示不兼容的问题解决

Html禁止横向