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"
};

Logo

华为开发者空间,是为全球开发者打造的专属开发空间,汇聚了华为优质开发资源及工具,致力于让每一位开发者拥有一台云主机,基于华为根生态开发、创新。

更多推荐