Cra*_*lot 70 css iphone mobile layout mobile-safari
我们的网站在移动版Safari上呈现不一致的字体大小 - 据我们所知,只有Mobile Safari.这让我们很难过.
我们使用Firebug分析了该站点,并且不正确的区域继承了正确的样式,但字体仍然以错误的大小呈现.
2)搜索域名.
左侧的框显示不正确的字体大小.字体大小应与右侧的字体大小相匹配(框标题和框复制).例如,标题"变奏曲"和"推特"比标题"备用结尾"大得多.
有什么线索的原因?
Joh*_*lor 141
移动Safari(如适用于Android的Chrome,移动版Firefox和IE移动版)会增加宽版块的字体大小(始终如此),这样,如果您双击放大该块(适合屏幕宽度的块) ,文字将清晰可辨.如果设置-webkit-text-size-adjust: 100%
(或none
),它将无法执行此操作,因此当用户双击以放大宽块时,文本将非常小; 如果用户捏缩放,用户将能够阅读它,但文本将比屏幕更宽,他们必须水平平移才能阅读每行文字!
理想情况下,您可以通过使用响应式Web设计技术来使您的设计适应移动屏幕尺寸(在这种情况下,您将不再拥有任何非常宽的块,因此移动浏览器将不再调整您的字体大小).
如果这不是一个选项,并且您无法为移动用户提供桌面网站服务,那么看看您是否可以调整您的设计,这样您的文本块就不会比移动设备的设备宽度更宽(例如,对于许多人像手机来说,320px )(您可以使用特定于移动设备的css来避免影响桌面浏览器),然后Mobile Safari将不需要增加任何字体大小(以及重排文本的浏览器,如Android浏览器和Opera Mobile,也不需要更改你的布局).
最后,如果您确实需要阻止Mobile Safari调整您可以设置的字体大小-webkit-text-size-adjust: 100%
,但这只是作为最后的手段,因为它可能会导致移动用户难以阅读您的文本,因为它可能太小或者在他们阅读的每一行之后,他们必须从一边到另一边平移.请注意,您必须使用100%
not,none
因为在桌面浏览器中没有一个具有令人讨厌的副作用.也有相当的-moz-text-size-adjust
和-ms-text-size-adjust
属性移动Firefox和IE移动.
编辑:例如在你的情况下,最简单的可能是第二种选择,所以你可以尝试添加以下CSS:
/* Mobile browsers only */
@media only screen and (max-device-width: 480px) {
table#all_results {
width: auto;
}
td#main_box {
width: 320px;
}
td#side_box {
width: 320px;
}
}
Run Code Online (Sandbox Code Playgroud)
虽然这样硬编码320px并不理想; 您可以通过使用各种CSS媒体查询或从JavaScript获取设备宽度来改进.
Cra*_*lot 39
这是最终起作用的(仅在iPhone 4上测试过):
/* Mobile browsers only */
@media only screen and (max-device-width: 480px) {
td#main_box { -webkit-text-size-adjust:100% }
}
Run Code Online (Sandbox Code Playgroud)
我们给了约翰答案,因为他的解决方案是这个问题的基础.
可能不是最优雅的答案,但它确实有效.
归档时间: |
|
查看次数: |
92428 次 |
最近记录: |