Question

我想显示所有触摸设备的平板电脑版本（包括999px以上的平板电脑）和所有手机的移动版本。

我使用移动检测http://hgoebl.github.io/mobile-detect.js/检测平板电脑或手机，然后动态更改元标记

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

使用javascript。因此，如果设备是平板电脑，其屏幕宽度> 999px，则应显示该平板电脑的版本。如果小于999px，则CSS媒体可以正常工作。它在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媒体，并且完全忽略元标记content =“ width = ...”。

在android上一切正常。

iOS在使用javascript

0 个答案: