Веб-приложение. При установке начального масштаба =1.x в Chrome существует дополнительное вертикальное пространство между элементами уровня блока.

Если я добавлю следующий метатег на свою мобильную веб-страницу, между элементами уровня блока в вертикальном направлении будет дополнительное пространство.

<meta name="viewport" content="initial-scale=1.2,user-scalable=no" id="metaViewwport">

Как решить проблему?

Полный код:

 <html>
<head lang="en">
    <meta charset="UTF-8">
    <meta name="viewport" content="initial-scale=1.2,user-scalable=no" id="metaViewwport">
    <title>test</title>
    <style type="text/css">
        html,body
        {width:100%;height: 100%;margin:0px;padding:0px;}

        .slide-container
        {height:200px;width:100%;background-color:black;color:white;
        box-sizing:border-box;
        box-shadow:none;
        border:0px;
        padding:0px;
        margin:0px;
        }
    </style>
 </head>
<body>
<article style="height:100%;width:100%;">
    <section class="slide-container" style="">
        1
    </section>
    <section class="slide-container">2</section>
    <section class="slide-container">
       3
    </section>
    <section class="slide-container">
       4
    </section>

</article>

</body>
</html>
Источник

2 ответа

Ваша проблема в вашем окне просмотра более чем вероятно. Его значение равно 1,2, а не 1.

вместо этого добавьте эту строку

<meta name="viewport" content="width=device-width, initial-scale=1">
Источник

Я исправил, добавив высоту = устройство-высота в окне просмотра мета. Как:

<meta name="viewport" content="initial-scale=1.171875,height=device-height,width=320px, user-scalable=no">
Источник
Другие вопросы по тегам