我开发了一个与机构的紧急警报系统连接的应用程序.它是如何工作的,当有警报时,在所有机构的网页上,它会在页面顶部显示一个滚动的选框,通过javascript使用protoype和scriptaculous放置.
所有这些都适用于桌面浏览器(IE6-8,Chrome,Safari,Firefox,Opera).它也适用于iPhone.我唯一的问题是Android上的渲染.
在最初研究这个问题时,我发现了移动设备的CSS属性(即webkit)-webkit-text-size-adjust,它可以防止移动设备在缩放和更改屏幕方向时调整文本大小.我已将此属性设置为'none',如许多文章所述.
下面是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不会大于窗口的大小.
以下是代码的实例: