Блог

У меня есть div, который я хочу расположить в нижней части окна просмотра мобильного браузера (Safari Android). В настоящее время мой div зафиксирован внизу во всех 5 лучших браузерах Windows (IE, FF, Saf, Chrome, Opera), но это «окно браузера», а не «окно просмотра».

На мобильных устройствах (я пока пробовал только Samsung Galaxy Tab с Android 2.2) div отображается внизу страницы, но если вы нажмете для увеличения, фиксированный div не появится. Он остается позади, за пределами окна просмотра.

Я специально использую CSS-свойства position: fixed и bottom: 0 для сохранения позиции, и, как я уже сказал, это отлично работает в браузере без касания.

Придется ли мне прибегать к сохранению div в том положении, в котором я хотел бы, чтобы он был (в нижней части окна просмотра), подключаясь к событию touchmove и просматривая (а) уровень масштабирования, (б) положение окна просмотра и (в) положение прокрутки?

Я использую JavaScript для вставки div на страницу, а не с помощью встроенного CSS. Хорошо то, что мне не нужно беспокоиться о режиме quirks (поскольку я ориентируюсь только на браузеры Webkit), так что это один положительный момент.

Я не могу установить doctype, использовать встроенный CSS или встроенные DIVS. Все должно добавляться динамически с помощью 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";
  

Ваш position:fixed не будет работать в мобильных браузерах webkit. Взгляните на проблему с исправлением положения мобильного webkit на http://www.position-absolute.com /. У них есть несколько способов сохранить что-то внизу.

Проверьте iScroll:
http://cubiq.org/iscroll-4

Похоже, это один из лучших вариантов — определенно стоит изучить.

Я использовал предыдущую версию iScroll, но, к сожалению, было несколько вещей, которые не соответствовали стандарту, поэтому нам пришлось отказаться от идеи. Однако ребята из Cubiq только что выпустили версию iScroll 4, которая обещает исправить многое из того, что было проблемой в предыдущей версии.

Удачи!
Дэн