У меня есть div, который я хочу разместить в нижней части окна просмотра мобильного браузера (Safari + Android). В настоящее время мой div фиксируется внизу во всех 5 лучших браузерах Windows (IE, FF, Saf, Chrome, Opera), но это «окно браузера», а не «окно просмотра».
На мобильных устройствах (до сих пор я только пробовал на Samsung Galaxy Tab с Android 2.2) div отображается внизу страницы, но если вы увеличиваете или уменьшаете его, фиксированный div не следует. Он остается позади, вне области просмотра.
Я специально использую свойства position: fixed и bottom: 0 CSS для поддержания позиции, и, как я уже сказал, он отлично работает в браузере без сенсорного экрана.
Должен ли я прибегнуть к тому, чтобы держать div в том положении, в котором я бы хотел (в нижней части окна просмотра), подключив событие touchmove и посмотрев на (a) уровень масштабирования, (b ) положение области просмотра и (с) положение прокрутки?
Я использую JavaScript для вставки div на страницу, а не встроенный CSS. Хорошо, что мне не нужно беспокоиться о режиме причуд (так как я нацеливаюсь только на браузеры Webkit), так что это один положительный момент.
Я не могу установить тип документа, использовать встроенный CSS или встроенный DIV. Все должно быть добавлено динамически через JavaScript. Вот что я сделал в своем тесте:
var mydiv=document.createElement("div");
mydiv.style.position="fixed";
mydiv.style.bottom="0px";
mydiv.id="floater";
mydiv.style.width="400px";
mydiv.style.height="50px";
mydiv.style.backgroundColor="yellow";
if(document.body)document.body.appendChild(mydiv);
document.getElementById("floater").innerHTML="HELLO";