iPhone 上的字体大小呈现不一致 [英] Font size rendering inconsistencies on an iPhone

问题描述

我正在测试我的网站，并且在所有浏览器上都运行良好，除了 iphone 浏览器(我认为是移动版 Safari?)，它以比其他浏览器更大的字体呈现一段文本.我已经手动检查了 CSS 并在页面上使用了萤火虫，我可以确认我已经为所有这些设置了相同的大小.我该如何解决这个问题?

I’m testing my website and is working fine on every browser, except for the iphone browser (i think it’s mobile Safari?) that renders a piece of text with a bigger font that the rest. I’ve checked the CSS by hands and using firebug on the page and I can confirm I’ve put the same size to all of them. How do I fix this?

推荐答案

为了稍微改进 Lukasz 的想法，请尝试在您的 CSS 中使用以下规则:

To improve on Lukasz's idea slightly, try using the following rule in your CSS:

body {
    -webkit-text-size-adjust: 100%;
}

使用值100%"而不是none"，允许所有其他基于 Webkit 的浏览器在使用缩放功能时仍然调整文本大小，同时仍保留原始字体大小.

Using the value '100%' instead of 'none', allows all other Webkit-based browsers to still resize text when using the zoom function while still preserving your original font size.

此问题仅在现代浏览器中出现，例如 Safari、Opera 和 iPhone 设备.解决办法是

This issue is arising only in modern browsers like safari, opera with iPhone device. Solution is

使用 -webkit-text-size-adjust: 100% 附加此样式；或 -webkit-text-size-adjust: none;与所需的类它工作正常.例子:我希望仅当请求来自移动设备时才应用条件.所以我附加了完全满足我要求的完整导航路径.

Append this style with the -webkit-text-size-adjust: 100%; or -webkit-text-size-adjust: none; with required class it works fine. Example: I want the condition to be applied only when request comes from mobile. So I have appended the complete navigation path that full fills my requirement.

.mobile-phone .authenticated-page.authenticated.mobile-community.mobile-document .notification .notification-dialog.content-frame 
{
    -webkit-text-size-adjust: none;
}

或

.mobile-phone .authenticated-page.authenticated.mobile-community.mobile-document .notification .notification-dialog.content-frame {
-webkit-text-size-adjust: 100%;

}两者都可以正常工作.无需为全身应用样式

} both will work fine. No need to apply the styles for complete body

这篇关于iPhone 上的字体大小呈现不一致的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！