前端代码解决webview在android,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禁止横向