我们的网站在移动 Safari 上呈现不一致的字体大小 - 据我们所知，只有移动 Safari。这非常难倒我们。
我们使用 Firebug 分析了该网站，不正确的区域继承了正确的样式，但字体仍然以错误的大小呈现。
1）参观http://www.panabee.com http://www.panabee.com.
2) 搜索域名。
左侧的框显示不正确的字体大小。字体大小应与右侧的字体大小匹配（框标题和框副本）。例如，标题“变体”和“Twitter”比标题“替代结局”大得多。
有什么线索吗？
Mobile Safari（如 Android 版 Chrome、Mobile Firefox 和 IE Mobile）会增加宽块的字体大小（始终），这样，如果您双击即可放大该块（使该块适合屏幕宽度） ，文本将清晰可辨。如果你设置-webkit-text-size-adjust: 100% (or none），它将无法执行此操作，因此当用户双击放大宽块时，文本将小得难以辨认；如果用户放大，他们将能够阅读它，但文本将比屏幕更宽，他们必须水平平移才能阅读每一行文本！
-
理想情况下，您可以使用以下方法解决此问题响应式网页设计 http://www.html5rocks.com/en/mobile/responsivedesign/使您的设计适应移动屏幕尺寸的技术（在这种情况下，您将不再有任何非常宽的块，因此移动浏览器将不再调整您的字体大小）。
-
如果这不是一个选择，并且您被困在向移动用户提供桌面网站，那么看看您是否可以调整您的设计，这样您的文本块就不会比移动设备的设备宽度更宽（例如，许多纵向手机的宽度为 320 像素） ）（您可以使用移动设备专用的 css 来避免影响桌面浏览器），那么 Mobile Safari 将不需要增加任何字体大小（并且回流文本的浏览器，如 Android 浏览器和 Opera Mobile，也不需要更改你的布局）。
-
最后如果你really需要阻止 Mobile Safari 调整您可以设置的字体大小-webkit-text-size-adjust: 100%，但是这样做仅作为最后的手段因为这可能会导致移动用户难以阅读您的文本，因为它要么太小，要么在读完每一行后必须从一侧平移到另一侧。请注意，您必须使用100% not none因为没有一个在桌面浏览器中具有令人讨厌的副作用 https://web.archive.org/web/20161123022420/http://blog.55minutes.com/2012/04/iphone-text-resizing/。还有等价的-moz-text-size-adjust and -ms-text-size-adjust移动版 Firefox 和 IE Mobile 的属性。
编辑：例如，在您的情况下，最简单的可能是第二种选择，因此您可以尝试添加以下 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 获取设备宽度来改进这一点。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
