WebView и display:grid

152

26 августа 2018, 16:40

Отображение контейнера в браузере на ПК и на андроиде очень сильно разится.

<div class="main-container">
    <span class="cell" onclick="alert(1)"></span>
    <span class="cell" onClick="turn(this)"></span>
    <span class="cell" onClick="turn(this)"></span>
    <span class="cell" onClick="turn(this)"></span>
    <span class="cell" onClick="turn(this)"></span>
    <span class="cell" onClick="turn(this)"></span>
    <span class="cell" onClick="turn(this)"></span>
    <span class="cell" onClick="turn(this)"></span>
    <span class="cell" onClick="turn(this)"></span>
</div>

На пк каждый span находится в своей ячейке. В WebView они будто не знают о наличии display: grid. Почему?

Answer 1

Версия WebView на конкретном устрйостве может соответствовать достаточно старой версии Chrome. ПОдробнее https://developer.chrome.com/multidevice/webview/overview С версии 5 может обновляться отдельно, но это происходит не всегда.

Насколько я понимаю grid layout доступен с версии Chrome 57 в полном объеме.

Для того чтобы гарантировать что ваша верстка будет точно работать внутри приложения, можете использовать например https://crosswalk-project.org/ (к сожалению не обновляется)

Если например вы хотите проверять версию, можете попробовать вот такой плагин https://github.com/NoNameProvided/cordova-plugin-webview-checker или его код чтобы вытаскивать версию WebView.