На мобильном устройстве элемент с position: fixed; right: 0; выталкивается из окна просмотра, если какой-либо другой элемент шире, чем область просмотра, но не на рабочем столе. Как это:Держатель: фиксированный; право: 0; элемент на экране в мобильном браузере
Как я могу гарантировать, что элемент остается на экране в мобильных браузерах?
Играется с http://jsbin.com/zawijayata/edit?html,output и http://output.jsbin.com/zawijayata/.
Если не причина, чтобы иметь элемент больше, чем окна просмотра, измените width:400px на DIV ниже, чтобы:
width: 100%;
max-width: 400px;
Хороший ответ, но знаете ли вы, почему это происходит? Мне любопытно узнать –
Спасибо, но, к сожалению, элементы на странице иногда должны быть широкими. –
Это примерно то, что я делал. –
vw единиц, кажется, ведут себя, как я хочу, так position: fixed; left:calc(100vw - 75px); вид работ, но он требует жесткого кодирования ширины элемента (75px). Возможно, есть другой способ использовать vw, чтобы получить правильный эффект.
Альтернативное решение - положение: абсолютное вместо фиксированных работ, я вставил код на страницу и размещался в локальной среде, чтобы протестировать на реальном мобильном устройстве, и он работает (хотя он не работал в вашем кодебине , не знаю почему). отметить также изменения в мета окне просмотра линии, поэтому мобильные браузеры не пытаются сжать страницу вниз, чтобы соответствовать 600px DIV в.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1" />
</head>
<body>
<div style="position:absolute; top:0; right:0;">Top Right</div>
<div style="width:600px; border:1px solid blue;">600px<?
</body>
</html>
Что этот инструмент используется для проверки? Вы проверяли, является ли это ошибкой этого инструмента? – Oriol
Похоже на хром для меня - тоже на моем хром –
Не уверен, что это произойдет на мобильном устройстве, правда? Также не ломается на FF –