iphoneX適配劉海屏

時間 2019-11-17

標籤 iphonex 適配劉海简体版

原文原文鏈接

解決：iPhoneX底部的黑色線條擋住底部按鈕、菜單、等javascript

話很少說，趕忙附上代碼：css

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <title></title>
  </head>
  <style type="text/css">
    *{margin:0;padding:0;}
    .page_div{
      width: 100%;
      background-color: #cb63dd;
      position: relative;
    }
    .parent_div{
      position: fixed;
      height: 40px;
      width: 100%;
      background-color: #fff;
      left: 0;
      right: 0;
      bottom: 0;
    }
    .son_div{
      background-color: #f20b49;
      height: 40px;
      line-height: 40px;
      text-align: center;
      color: #fff;
    }
    #model_ul li{
      color: #fff;
      border-bottom: 1px dashed #f5f5f5;
      padding: 12px 0;
      margin: 0 20px;
      list-style: none;
    }
    #model_ul{
      margin-bottom: 400px;
    }
    .parent_div.iphonex{
      --safe-area-inset-bottom: env(safe-area-inset-bottom);
      padding-bottom: calc(var(--safe-area-inset-bottom));
      height: calc(60px + var(--safe-area-inset-bottom));
    }
  </style>
  <body>
    <div class="page_div">
      <div>
        <ul id="model_ul">
        </ul>
      </div>
      <div class="parent_div">
        <div class="son_div">我是底部固定div</div>
      </div>
    <div>
    <script type="text/javascript">
        //給page添加內容
      var model_ul=document.getElementById('model_ul');
      var html='';
      var model=['一句懟人的霸氣說說句子，讓人無力反駁！',
      '1、根本沒必要回頭去看咒罵你的人是誰？若是有一條瘋狗咬你一口，難道你也要趴下去反咬他一口嗎？',
      '2、我把本身養這麼好，不想便宜了任何人，麪包我有了，憑什麼找一個給不起我愛情，還想來分我麪包的人。',
      '3、餘生沒那麼長，不用一味的付出，去慣得寸進尺的人，請忠於本身，活得像最初的模樣。',
      '4、卸下你的面具再來和我說話，我沒有那個時間和精力去揣測你是否真心。',
      '5、有些人，有些事。改變不了才知道本身是那麼的眇小，涉足社會才感受本身不該該清高。',
      '6、你盡情的糟蹋本身，心疼的是愛你的人，那個讓你變成這樣的人是不會內疚的，說不定還在背後嘲笑你諷刺你，因此眼淚麻煩收一收，這麼大了，不要丟人現眼。',
      '7、沒錢有沒錢的煩惱，有錢有有錢的煩惱，活着有活着的煩惱，你怎麼肯定，死了就會沒有煩惱？',
      '8、其實咱們能夠將全部的問題歸結爲兩種：一種是沒飯吃餓的，一種是吃飽了撐的。',
      '9、能知難而退是個人本事，用得着你在這指手畫腳。碰不得的東西，最好別碰，惹不起個人人，最好別惹。',
      '10、你不要想之後怎樣，之後是之後的事情。人生不過百年，幕起幕落而已。',
      '1、根本沒必要回頭去看咒罵你的人是誰？若是有一條瘋狗咬你一口，難道你也要趴下去反咬他一口嗎？',
      '2、我把本身養這麼好，不想便宜了任何人，麪包我有了，憑什麼找一個給不起我愛情，還想來分我麪包的人。',
      '3、餘生沒那麼長，不用一味的付出，去慣得寸進尺的人，請忠於本身，活得像最初的模樣。',
      '4、卸下你的面具再來和我說話，我沒有那個時間和精力去揣測你是否真心。',
      '5、有些人，有些事。改變不了才知道本身是那麼的眇小，涉足社會才感受本身不該該清高。',
      '6、你盡情的糟蹋本身，心疼的是愛你的人，那個讓你變成這樣的人是不會內疚的，說不定還在背後嘲笑你諷刺你，因此眼淚麻煩收一收，這麼大了，不要丟人現眼。',
      '7、沒錢有沒錢的煩惱，有錢有有錢的煩惱，活着有活着的煩惱，你怎麼肯定，死了就會沒有煩惱？',
      '8、其實咱們能夠將全部的問題歸結爲兩種：一種是沒飯吃餓的，一種是吃飽了撐的。',
      '9、能知難而退是個人本事，用得着你在這指手畫腳。碰不得的東西，最好別碰，惹不起個人人，最好別惹。',
      '10、你不要想之後怎樣，之後是之後的事情。人生不過百年，幕起幕落而已。',
      ];
      model.map(function(item, i) {
          html += '<li>'+item+'</li>'
        })
      model_ul.innerHTML=html;

      // js移動端頁面判斷是不是iphoneX
        var parent=document.getElementsByClassName('parent_div')[0];
        var isIphonex = /iphone/gi.test(window.navigator.userAgent) && window.devicePixelRatio && window.devicePixelRatio === 3 && window.screen.width === 375 && window.screen.height === 812;
        if (isIphonex) {
          parent.className += ' iphonex'; //在原來的後面加這個
        }


      </script>

    </body>
  </html>

1、Mac系統測試：能在本地測試html

2、windows系統測試：沒法在本地測試出來，java

總結：真機上是沒問題的，windows系統上：windows

　　window.devicePixelRatio === 3  //false　　window.devicePixelRatio    //3.0000001192092896so:想在window系統測試那就把 window.devicePixelRatio === 3  捨去，最終iPhonex的精確度下降，因此仍是真機適用纔是王道。

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。