iOS игнорирует мета-тэг content-width при динамической настройке с помощью javascript - PullRequest
Новая
       17

iOS игнорирует мета-тэг content-width при динамической настройке с помощью javascript

0 голосов
/ 18 февраля 2019

Я хочу показать версию планшета для всех сенсорных устройств (включая планшеты> 999 пикселей) и мобильную версию для всех телефонов.

Я использую Mobile-Detection http://hgoebl.github.io/mobile-detect.js/ для обнаружения планшета или телефона, а затемдинамически изменять метатег 

<meta name="viewport" content="width=device-width, initial-scale=1.0">

с помощью JavaScript.Таким образом, если устройство представляет собой планшет с шириной экрана> 999 пикселей, должна отображаться версия планшета.Если он меньше 999px, тогда css media работает нормально.Он отлично работает на устройствах Android, но не работает на iOS.Пожалуйста, помогите. 

<html lang="ru-RU">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .wrapper {
            font-size: 40px;
            color: red;
        }

        @media screen and (max-width: 999px) {
            .wrapper {
                color: blue;
            }
        } 

        @media screen and (max-width: 639px) {
            .wrapper {
                color: yellow;
            }
         }
    </style>
  </head>

  <body>
    <div class="wrapper">test</div>
    <script>
      (function() {
        var showProperPage = function() {

          var mobileDetection = new MobileDetect(window.navigator.userAgent);
          var viewportWidth = document.querySelector("meta[name=viewport]");

          if (mobileDetection.tablet() && screen.width > 999) {

            viewportWidth.content = 'width=999';

          } else if (mobileDetection.phone() && screen.width > 639) {

            viewportWidth.content = 'width=639';

          } else {
            viewportWidth.content = 'width=device-width, initial-scale=1';
          }
        };

        showProperPage();
        window.addEventListener('orientationchange', showProperPage);
      })();

    </script>
  </body>

</html>

пример https://jsfiddle.net/j9r67nf1/3/

В этом примере я ожидаю показать синий текст на всех планшетах, желтый текст - на всех телефонах.

Но этоне работает на iOS.Он использует css media и полностью игнорирует метатег content = "width = ...".

На андроиде все ок.

...