对于galaxy fold 该怎么适配？

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <!-- <meta name=""> -->
  <style>
     *{
       margin: 0;
       padding: 0;
     }
     .container{
       display: flex;
       position: fixed;
       top:0;
       left:0;
       width:100%;
       height: 1.333rem;
       background-color: gray;
       justify-content: space-around;
       align-items: center;
     }
     .xiazai{
         line-height: 1rem;
     }
  </style>
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
  <script src="flexible.js"></script>

</head>
<body>
   <div class="container">
         <div>
           <img src="logo.png" alt="">
         </div>
         <div class="content"></div>
         <div CLASS="xiazai">下载APP</div>
   </div>
</body>
</html>

老师，我试了一下，其他手机都可以，但是发现galaxy fold比较特殊

有点脱模，我分析了一下它的dpr=3,所以字体大小=36px,但是屏幕大小有很窄，不像iphone,

所以如果想对于其他手机的体验不变，专为这款手机（galaxy fold）进行适配，该怎么办？

qq_慕斯卡2526505 2022-02-03

源自：移动端屏幕适配 3-4 自由编程

收起

1回答

好帮手慕星星 2022-02-05 11:03:47

同学你好，老师这边测试没问题，不会出现文字换行的效果：

是不是flexible.js文件的问题，老师用的是源码中的，可以粘贴替换掉自己的试试

(function() {
    'use strict';

    // dpr->scale = 1 / dpr
    var docEl = document.documentElement,
        viewportEl = document.querySelector('meta[name="viewport"]'),
        dpr = window.devicePixelRatio || 1,
        maxWidth = 540,
        minWidth = 320;

    dpr = dpr >= 3 ? 3 : (dpr >= 2 ? 2 : 1);

    docEl.setAttribute('data-dpr', dpr);
    docEl.setAttribute('max-width', maxWidth);
    docEl.setAttribute('min-width', minWidth);


    var scale = 1 / dpr,
        content = 'width=device-width, initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no';

    if (viewportEl) {
        viewportEl.setAttribute('content', content);
    } else {
        viewportEl = document.createElement('meta');
        viewportEl.setAttribute('name', 'viewport');
        viewportEl.setAttribute('content', content);
        document.head.appendChild(viewportEl);
    }

    setRemUnit();

    window.addEventListener('resize', setRemUnit);

    function setRemUnit() {
        var ratio = 18.75;
        var viewWidth = docEl.getBoundingClientRect().width || window.innerWidth;

        // console.log(viewWidth);

        if (maxWidth && (viewWidth / dpr > maxWidth)) {
            viewWidth = maxWidth * dpr;
        } else if (minWidth && (viewWidth / dpr < minWidth)) {
            viewWidth = minWidth * dpr;
        }

        docEl.style.fontSize = viewWidth / ratio + 'px';
    }
})();

另外其他问题：

1、“下载APP”文字样式尽量和效果中一样，是有背景色以及圆角效果的，自己添加下