Веб-разработка Android … ширина Отделения (более вероятно внутренний текст) изменяется в пикселях на основе масштабирования устройства
Я разработал приложение, которое взаимодействует через интерфейс с системой экстренного оповещения учреждения. То, как это работает, когда существует предупреждение на всех веб-страницах учреждения, это отображает пунктирную рамку прокрутки в верхней части страницы, которая помещается там JavaScript с помощью protoype и scriptaculous.
Все это работает отлично над настольными браузерами (IE6-8, Chrome, Safari, Firefox, Opera). Это также работает хорошо над iPhone. Моей единственной проблемой является рендеринг на Android.
В исследовании проблемы первоначально, я нашел Свойство CSS для мобильных устройств (а именно, WebKit) - WebKit-size-adjust, который мешает мобильным устройствам изменять размер текста при изменении масштаба и изменении экранной ориентации. Я установил это свойство ни на 'один', как указано многими статьями.
Ниже изображение снимков экрана от эмулятора Android. Левый снимок экрана показывает 1x увеличение страницы. Интервал между каждым из сообщений состоит в том, как это должно быть. Правильный снимок экрана показывает увеличенную страницу. Перекрытие сообщений, поскольку размер текста представляется по-другому, и ширина отделения, не достаточно широко для содержания текста.
http://www.themonkeyonline.com/spacing-example.jpg
Вот код, который размещает отделение на странице:
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 );
Есть ли что-то, что я пропускаю?
Я буду продолжать исследовать проблему во время, будучи. Благодаря всем, кто считал все это.
Краткое обновление... после большего количества тестирования, кажется, что проблема не обязательно основана на масштабировании. Выглядит, как будто проблемой является область просмотра. Я протестировал некоторый действительно длинный текст и даже масштабировал полностью, он наложился. Кажется, как будто отделение, содержащее текст, не измерит себя больше, чем окно.
Вот пример кода в действии: