移动Safari(例如适用于Android的Chrome,移动Firefox和IEMobile的Chrome)会一直增加宽块的字体大小,因此,如果您双击以放大该块(使块适合屏幕宽度),文字将清晰易读。如果设置
-webkit-text-size-adjust:100%(或
none),它将无法执行此操作,因此,当用户双击以放大宽块时,文本将非常小。用户只要捏一下就可以阅,但是文本会比屏幕宽,他们必须水平平移才能阅读每一行文本!
理想情况下,您将使用响应式Web设计技术来解决此问题,以使您的设计适应移动屏幕的大小(在这种情况下,您将不再有任何非常宽的块,因此移动浏览器将不再调整字体大小)。
如果这不是一种选择,并且您打算为移动用户提供桌面网站,那么请查看是否可以调整设计,使您的文本块都不比移动设备的设备宽度宽(例如,许多纵向电话的宽度为320px) )(您可以使用移动设备专用的CSS来避免影响桌面浏览器),然后Mobile Safari不需要增加任何字体大小(并且重排文本的浏览器(例如Android浏览器和Opera Mobile)也不需要更改您的布局)。
最后,如果您 确实 需要阻止Mobile Safari调整字体大小,则可以设置
-webkit-text-size-adjust: 100%
,但这 只能作为最后的选择, 因为这可能会导致移动用户难以阅读文本,因为文本太小或太小。阅读完每一行后,他们将不得不左右摇摆。请注意,您必须使用100%
not,none
因为在桌面浏览器中没有一个会有讨厌的副作用。移动Firefox和IE Mobile 也具有等效项-moz-text-size-adjust
和-ms-text-size-adjust
属性。
编辑:例如,在您的情况下,最简单的可能是第二种选择,因此您可以尝试添加以下CSS:
@media only screen and (max-device-width: 480px) { table#all_results { width: auto; } td#main_box { width: 320px; } td#side_box { width: 320px; }}像这样硬编码320px并不理想;您可以通过使用各种CSS媒体查询或从Javascript获取设备宽度来改善这一点。



