Rem for page distortion when embedding h5 pages in andriod

embedding h5 pages in andriod will distort the rem, used, but there is no such problem in iOS, and there is also a problem in browsing pages on Android phones. What is the reason for this?

this is the problem in Android:
clipboard.png

iOS:

clipboard.png

Mar.14,2021

automatic line wrapping caused by different rendering widths? Do you render your text in Em?


post the html and css of this paragraph


(function(doc, win) {
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize', //orientationchange
            recalc = function() {
                var whdef = 12 / 750; // 750,12PX
                var wH = window.innerHeight; // 
                var wW = window.innerWidth; // 
                var rem = wW * whdef; // ,FONT-SIZE
                $('html').css('font-size', rem + "px");
            };
        recalc();
        if (!doc.addEventListener) return;
        win.addEventListener(resizeEvt, recalc, false); //
        doc.addEventListener('DOMContentLoaded', recalc, false); //
    })(document, window)
    
    
     .share {
            position: fixed;
            width: 100%;
            height: 10.67rem;
            background-color: rgba(0, 0, 0, 0.6);
            display: flex;
            align-items: center;
            justify-content: space-around;
            bottom: 0;
            left: 0;
        }
        
        .share>img {
            width: 7.9rem;
            height: 7.9rem;
            margin-left: 3rem;
        }
        
        .share_text {
            /* margin-left: 1rem; */
            font-family: '';
        }
        
        .share_name {
            font-size: 2.5rem;
            color: -sharpfff;
            letter-spacing: 0.05rem;
            margin-top: 0.1rem;
            font-family: '';
            line-height: 4rem;
        }
        
       
        
        .share_sologan {
            font-size: 2rem;
            color: -sharpfff;
            line-height: 4rem;
            letter-spacing: 0.05rem;
            font-family: '';
        }
        
        .load_btn {
            display: inline-block;
            text-decoration: none;
            width: 16rem;
            height: 6.67rem;
            line-height: 6.67rem;
            text-align: center;
            font-size: 2.5rem;
            color: -sharpfff;
            background-color: -sharpa15ff7;
            border-radius: 1.67rem;
            letter-spacing: 0.08rem;
            /* margin-left: 2rem; */
        }
        
        
        
        html
        
        
         <div class="share">
        <img src="./image/logo.png" alt="">
        <div class="share_text">
            <p class="share_name">

<p class="share_sologan">,APP!

</div> <a href="-sharp" class="load_btn"></a> </div>
Menu