Браузер Mobile Edge проглатывает первые несколько пикселей высоты веб-страницы

#html #css #microsoft-edge

Вопрос:

Я заметил поведение, при котором браузер Mobile Edge на Android поглощает первые несколько пикселей высоты веб-страницы, вместо этого закрывая ее адресной строкой таким образом, что вы просто не можете видеть содержимое.

Это происходит в проекте, над которым я работаю, но вот минимальное повторение. Это красное поле высотой 1 пиксель, прикрепленное к самому верху страницы (по крайней мере, так должно быть!).

 <html>
<head>
    <style>
        html {
            margin: 0;
            padding: 0;
        }

        body {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 30px;
            height: 1px;
            background-color: red;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

На самом деле, однако, когда я открываю эту страницу в браузере Mobile Edge на Android, строки нигде нет. Я разместил приведенный выше код в своей учетной записи на страницах github.

Если я просматриваю страницу, подключившись к компьютеру, и меняю верхнюю часть поля в инспекторе, мне нужно добавить около 9 пикселей верхнего поля, чтобы оно отображалось на странице, чтобы оно не было закрыто адресной строкой.

Что это дает? Это известная ошибка? Я делаю что-то глупое?

Можно сказать: «просто прокрутите немного, чтобы панель исчезла». Конечно, но это не работает для веб-сайтов, которые полностью растянуты по вертикали, например, чтобы адресная строка и другая строка меню оставались фиксированными, не приходя и не уходя.

Спасибо!

1. Я провожу тест с вашим образцом кода. Он хорошо работает в мобильных устройствах Edge Android. Вы можете проверить скриншот: i.stack.imgur.com/BHqmv.png . Я вижу красную линию в левом верхнем углу браузера. Какую версию браузера Edge вы используете? Моя версия браузера Edge на Android-46.06.4.5160.

2. @YuZhou Я запускаю 93.0.961.53 . Вы уверены, что недавно обновили свою версию…?

3. Я обновил свой край, и теперь я могу воспроизвести проблему. Я предлагаю вам оставить отзыв об этой проблеме, нажав значок с тремя точками внизу-> Отправить отзыв> в Edge mobile. Команда Edge будет проверять отзывы и постоянно улучшать продукт.

4. @YuZhou да, спасибо, я сделал это и связал их с этой страницей. Спасибо, что нашли время для упреков!

Ответ №1:

Это потому, что 1 пиксель настолько мал, что вы не можете видеть поле в мобильном телефоне

Попробуйте добавить больше CSS.

Поля и отступы просто определяют, какое расстояние между элементами на внешней стороне коробки и внутри коробки.

попробуйте это :

ваш измененный код с увеличенными пикселями и навигационной панелью(или) адресной панелью :

 <html>
<head>
    <style>
        html {
            margin: 0;
            padding: 0;
        }

        body {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 100%;
            height: 50px;
            padding:10px;
            background-color: red;
            position:fixed;
            top:0px;
            left:0px;
        }
    </style>
</head>
<body>
    <div class="box">
    <h1>Navigation bar</h1>
    </div>
</body>
</html>