Css 修复 Mobile Safari (iPhone) 上文本呈现不一致且某些字体比其他字体大的字体大小问题

Mobile Safari(如Android版的Chrome、Mobile Firefox和IE Mobile)会(在任何时候)增加宽块的字体大小，这样，如果你双击该块放大(该块与屏幕宽度相匹配)，文本就会清晰可见.如果设置为-webkit-text-size-adjust: 100%(或none)，它将无法做到这一点，因此当用户双击以放大宽块时，文本将小得难以辨认；如果用户按下放大按钮，就可以阅读，但是文本会比屏幕宽，他们必须水平平移才能阅读每一行文本！

1. 理想情况下，您可以通过使用Responsive Web Design种技术使您的设计适应移动屏幕大小来解决此问题(在这种情况下，您将不再有任何非常宽的块，因此移动浏览器将不再调整您的字体大小).

2. 如果这不是一个选项，并且你一直在为移动用户提供桌面网站，那么看看你是否可以调整你的设计，使你的文本块不超过移动设备的设备宽度(例如，许多肖像手机的文本块宽度为320px)(你可以使用特定于移动设备的css，以避免影响桌面浏览器)，这样，Mobile Safari就不需要增加任何字体大小(而回流文本的浏览器，如Android浏览器和Opera Mobile，也不需要更改布局).

3. 最后，如果您really需要阻止Mobile Safari调整字体大小，您可以设置-webkit-text-size-adjust: 100%，但要设置为only as a last resort，因为这可能会导致移动用户难以阅读您的文本，因为它要么太小，要么他们在阅读完每一行后都必须左右平移.请注意，您必须使用100%，而不是none，因为none has nasty side-effects in desktop browsers.对于Mobile Firefox和IE Mobile，还有等效的-moz-text-size-adjust和-ms-text-size-adjust个属性.

编辑:例如，在您的示例中，最简单的可能是第二种 Select ，因此您可以try 添加以下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;
    }
}

虽然这样硬编码320px并不理想；您可以通过使用各种CSS媒体查询或从JavaScript获取设备宽度来改进这一点.