Android Web Development … Ширина Div (скорее всего, внутренний текст) изменяется в пикселях на основе масштабирования устройства

Я разработал приложение, которое взаимодействует с системой аварийного оповещения учреждения. Как это работает, когда есть предупреждение, на всех веб-страницах учреждения отображается прокручиваемая область в верхней части страницы, которая помещается туда javascript, используя protoype и scriptaculous.

Все это отлично работает на настольных браузерах (IE6-8, Chrome, Safari, Firefox, Opera). Он также хорошо работает на iPhone. Моя единственная проблема – рендеринг на Android.

Первоначально изучая проблему, я нашел свойство CSS для мобильных устройств (а именно webkit) -webkit-text-size-adjust, которое не позволяет мобильным устройствам изменять размер текста при масштабировании и изменении ориентации экрана. Я установил это свойство как «нет», как указано многими статьями.

Ниже приведен снимок экрана с эмулятора Android. Левый экран показывает 1-кратное увеличение страницы. Интервал между каждым из сообщений будет таким, каким он должен быть. На правом снимке экрана отображается увеличенная страница. Сообщения перекрываются, так как размер текста визуализируется по-разному, а ширина div недостаточно широка, чтобы содержать текст.

http://www.themonkeyonline.com/spacing-example.jpg

Вот код, который помещает div на страницу:

var marquee = new Element( 'div', { 'id' : 'marquee' + marquee_counter } ) .setStyle( { 'display' : 'block' , 'WebkitTextSizeAdjust' : 'none' , 'fontSize' : '12px' , 'lineHeight' : '25px' , 'left' : $( marquee_container ).getDimensions().width + 'px' } ) .addClassName( 'marquee_text' ) .update( marquee_text ); $( marquee_container ).insert( marquee ); 

Есть что-то, чего я не хватает?

Я буду продолжать изучать проблему в настоящее время. Спасибо всем, кто прочитал все это.


Краткий обзор … после большего тестирования выясняется, что проблема не обязательно основана на масштабировании. Похоже, что проблема связана с окном просмотра. Я протестировал какой-то очень длинный текст и даже увеличил масштаб до конца, он перекрылся. Кажется, что div, содержащий текст, не будет больше размера, чем окно.


Вот пример кода в действии:

http://elliottr.www-dev.seminolestate.edu/alert/

Не могли бы вы разместить ссылку на демо-страницу, где эта проблема возникает? Я попытался воспроизвести его на моей вехе, но не смог.

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