h5页面嵌入企业微信以及第三方app中，ios兼容安卓鸿蒙不兼容问题

本文链接：https://blog.csdn.net/liuxiaocaie/article/details/121740482

本文探讨了在安卓鸿蒙系统中，为何默认禁止WebSettings.useWideViewPort可能导致页面缩放问题，并介绍了三种常用的rem适配方法，包括基于设备像素比、窗口尺寸变化和onload事件的解决方案，帮助开发者解决在不同平台上的响应式布局问题。

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

app开发的时候，会默认的对浏览器的使用会做一些默认的设置，就比如下面的这一条属性：WebSettings.setUseWideViewPort(true);//设置此属性，可任意比例缩放,一般的安卓的app的开发者都会默认禁止这条属性；说是会对其他的东西有影响。那么这样的话，就不能够实现任意比例的缩放了，也当然达不到我们想要的结果。如我这样

pc ios 正常。。在安卓鸿蒙都捕捉不到正常高度

下面有三种方法替换掉原有的 rem适配方法

1、

<script>
    // 适用于750的设计稿
    var iScale = 1;
    // 通过页面加载的时候去获取用户设备的物理像素比
    iScale = iScale / window.devicePixelRatio;
    // 然后来设置html的<meta>表现的缩放属性，从而达到在任意页面实现页面布局的自适应的效果
        document.write('<meta name="viewport" content="width=device-width,' +
            'initial-scale=' + iScale + ',minimum-scale=' + iScale + ',maximum-scale=' + iScale + ',user-scalable=no" />')
    // 获取浏览器窗口文档显示区域的宽度，不包括滚动条。
        var iWidth = document.documentElement.clientWidth;
    // 设置页面基础的字体大小
        document.getElementsByTagName('html')[0].style.fontSize = iWidth / 15 + 'px';
</script>

2、

<script>
        var docEl = document.documentElement,
            //当设备的方向变化（设备横向持或纵向持）此事件被触发。绑定此事件时，
            //注意现在当浏览器不支持orientationChange事件的时候我们绑定了resize 事件。
            //总来的来就是监听当前窗口的变化，一旦有变化就需要重新设置根字体的值
            resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
            recalc = function () {
                //设置根字体大小1:50适用于375的设计稿，需要变更，就更改基础字体的数值
                docEl.style.fontSize = 100 * (docEl.clientWidth / 750) + 'px';
            };

        //绑定浏览器缩放与加载时间
        window.addEventListener(resizeEvt, recalc, false);
        document.addEventListener('DOMContentLoaded', recalc, false);
    </script>

3、

window.onload=function(){
　　　　var e=(document.documentElement.clientWidth>=640?640:document.documentElement.clientWidth)/320*12;
　　　　document.documentElement.clientHeight;document.getElementsByTagName("html")[0].style.fontSize=e+"px"
};