修复移动Safari（iPhone）中字体大小问题，其中文本呈现不一致，并且一些字体比其他字体大？
我们的网站在移动版Safari上呈现的字体大小不一致 – 据我们所知，只有Mobile Safari。 这非常困扰我们。
我们用Firebug分析了网站，不正确的区域inheritance了正确的样式，但字体仍然呈现错误的大小。
1）访问http://www.panabee.com 。
2）进行域名search。
左侧的框显示不正确的字体大小。 字体大小应与右侧的字体大小（包装盒标题和盒子复印）相匹配。 例如，标题“变体”和“推特”比标题“交替结局”要大得多。
任何线索为什么？
移动Safari浏览器（例如Android版Chrome浏览器，Mobile Firefox浏览器和IE Mobile）会增加宽块的字体大小（始终），因此，如果您双击放大该块（适合屏幕宽度） ，文字将清晰可辨。 如果你设置了-webkit-text-size-adjust: 100% （或者none ），它将无法做到这一点，所以当用户双击以放大宽块时，文本将会非常小， 用户将能够阅读它，如果他们捏放大，但然后文本将比屏幕更宽，他们将不得不水平平移阅读每行文本！
-
理想情况下，您可以通过使用响应式网页devise技术来解决这个问题，使您的devise适应移动屏幕尺寸（在这种情况下，您将不再有任何非常宽的块，所以移动浏览器将不再调整您的字体大小）。
-
如果这不是一种select，而且你坚持为移动用户提供桌面网站，那么看看你是否可以调整你的devise，使得任何文本块都不比移动设备的设备宽度更宽（例如，对于许多肖像手机）（您可以使用手机特定的CSS来避免影响桌面浏览器），那么Mobile Safari将不需要增加任何字体大小（并且像Android Browser和Opera Mobile这样的重排文本的浏览器也不需要改变你的布局）。
-
最后，如果你真的需要防止移动Safari浏览器调整字体大小，你可以设置
-webkit-text-size-adjust: 100%，但这只是作为最后的手段，因为它可能会导致移动用户难以阅读文字，因为它要么太小，要么在读完每一行之后，不得不左右摇摆。 请注意，您必须使用100%而不是none因为在桌面浏览器中none没有令人讨厌的副作用 。 对于Mobile Firefox和IE Mobile，还有等效的-moz-text-size-adjust和-ms-text-size-adjust属性。
编辑：例如在你的情况下，最简单的可能是第二种select，所以你可以尝试添加下面的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; } }
虽然320像这样硬编码并不理想， 您可以通过使用各种CSS媒体查询或从JavaScript中获取设备宽度来改善此问题。
这是最终的工作（仅在iPhone 4上testing）：
/* Mobile browsers only */ @media only screen and (max-device-width: 480px) { td#main_box { -webkit-text-size-adjust:100% } }
我们把答案交给了约翰，因为他的解决办法是这个的基础。
可能不是最优雅的答案，但它的作品。
-webkit-text-size-adjust: none; 将导致您无法放大移动设备。 你应该使用100% 。
-webkit-text-size-adjust:none;
可能会解决你的问题。
target-element { -webkit-text-size-adjust:80% }
仍然会放大，但比webkit默认值要小80％。
