Почему calc () не работает с высотой в Android WebView? - PullRequest
Новая
       23

Почему calc () не работает с высотой в Android WebView?

0 голосов
/ 05 марта 2019

Я столкнулся с очень странной проблемой при разработке приложения для Android.Вот проблемная страница: 

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"/>
    <style>
      * {
        margin:  0;
        padding: 0;
      }

      div {
        width:      100vw;
        height:     calc(100vh);
        background: #333;
      }
    </style>
  </head>
  <body>
    <div id="myDiv"></div>
    <script> 
      alert(document.getElementById("myDiv").offsetHeight);
    </script>
  </body>
</html>

Когда я запускаю эту веб-страницу из приложения PhoneGap, экран просто пуст.Я получаю предупреждение с сообщением "0", высота которого #myDiv.Это не относится к height:100vh, только к height:calc(100vh).Удивительно, но проблема не в calc(): оба width:100vw и width:calc(100vw) работают одинаково хорошо.

В приведенном выше примере я использовал calc(100vh) для простоты.Мое реальное намерение - что-то вроде calc(100vh - 50px).

Однако проблема не может быть воспроизведена в другом месте.Это происходит только с приложением PhoneGap и при компиляции приложения, а затем запускает его.Он не отображается ни в браузере Android Chrome, ни в инструментах разработчика браузера ПК при активации мобильного представления, поэтому я думаю, что это должно быть что-то с Android WebView.

Почему это происходит, и каковы возможные обходные пути

...