单击 iphone 中的 anchor/link(在特定页面中)时字体会变大
Font size increases when clicking on an anchor/link(in a specific page) in iphone
此问题仅在 iphone 后出现。我在 iphone 5(横向模式)和 iphone 4s(横向模式)中检查了它。
这里是 link 视频
我尝试指定字体大小,但没有成功。
我想你可以简单地用这个 meta
标签修复,试着把它添加到你的 html
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
看起来 iphones 会自动调整文本大小,为了避免这种情况,我使用了这个:
body { -webkit-text-size-adjust: 100%; }
or
body {-webkit-text-size-adjust: none; } /* works perfectly in landscape mode */
对于未来的用户:如果您在 firefox 中遇到与此类似的问题,您可以尝试用它来修复它。
body { moz-text-size-adjust:100%; }
所以经过几个小时的搜索,我发现移动版 Safari 确实尝试调整内容,以便默认情况下它在屏幕上可读 - 它具有与其他浏览器不同的默认样式。
我不知道确切的规则 - 但在字体大小方面,它似乎是这样工作的:
段落、列表项或其他 'text' 元素中的文本: 应用作者的风格而不进行调整。
DIV 或其他 non-specific 元素内的文本: 视为 'plain text' 和 'adapt'根据 Mobile Safari 的规则调整大小。
所以 - 简短的回答是,将您的文本放在一个段落中,然后对其应用 font-size 规则。
SOURCE
此问题仅在 iphone 后出现。我在 iphone 5(横向模式)和 iphone 4s(横向模式)中检查了它。
这里是 link 视频
我尝试指定字体大小,但没有成功。
我想你可以简单地用这个 meta
标签修复,试着把它添加到你的 html
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
看起来 iphones 会自动调整文本大小,为了避免这种情况,我使用了这个:
body { -webkit-text-size-adjust: 100%; }
or
body {-webkit-text-size-adjust: none; } /* works perfectly in landscape mode */
对于未来的用户:如果您在 firefox 中遇到与此类似的问题,您可以尝试用它来修复它。
body { moz-text-size-adjust:100%; }
所以经过几个小时的搜索,我发现移动版 Safari 确实尝试调整内容,以便默认情况下它在屏幕上可读 - 它具有与其他浏览器不同的默认样式。
我不知道确切的规则 - 但在字体大小方面,它似乎是这样工作的:
段落、列表项或其他 'text' 元素中的文本: 应用作者的风格而不进行调整。
DIV 或其他 non-specific 元素内的文本: 视为 'plain text' 和 'adapt'根据 Mobile Safari 的规则调整大小。
所以 - 简短的回答是,将您的文本放在一个段落中,然后对其应用 font-size 规则。
SOURCE