桌面端和移动端浏览器中字体大小的不可解变化

Question

8

我正在为我的网站制作代码格式化程序，但在桌面和移动浏览器之间遇到了一些奇怪的行为。在桌面上，代码块看起来像这样：

而在我的iPhone上，由于某种原因，行号的字体大小变小了：

我没有对网站上的任何字体大小进行编辑。它们都是默认大小。如果我手动设置字体大小，例如12px，则它仍会在我的桌面浏览器上对齐，但在移动浏览器上仍然更小。

代码块以包含两个单元格的表形式布局。左侧单元格包含1列表，每行都包含一个数字。右侧单元格包含1列表，每行都包含一行代码。

任何想法为何移动浏览器中的字体会变小吗？

编辑：链接：http://grantslatton.com/posts/blog/2013-08-16/sudoku_solver/ 编辑2：它在Windows手机和Android手机上正确渲染。

解决方案：原来是移动版Safari决定更改文本大小！我在此页面上看到了一个解决方案，它能起作用：Fix font size issue on Mobile Safari (iPhone) where text is rendered inconsistently and some fonts are larger than others? 我在CSS的body {}部分中放置了-webkit-text-size-adjust：100％，以防止移动Safari干扰我的字体大小。

- GrantS

1

提示：尝试编写一些代码以获取答案 :) - Mohammad Areeb Siddiqui

很遗憾，由于该代码用于语法高亮显示，它是由我编写的Python程序自动生成的，非常混乱。你可以在这里看到它：grantslatton.com/posts/blog/2013-08-16/sudoku_solver - GrantS

有一些事情可以测试。尝试将网站放入标准模式；它现在以怪异模式呈现，因此您可能会遇到移动浏览器的怪异之处！两列之间的区别在于右列中的文本位于<font>元素中，而左侧的数字则不是。 - Mr Lister

@MrLister 我曾尝试将它们都放在<font>标签中，但没有效果。我甚至手动将它们的大小设置为12px，但数字仍然比代码小。等我回到电脑前，我会尝试标准模式。 - GrantS

@MrLister 更新：标准模式无效。 - GrantS

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- GrantS · Accepted Answer

原来移动版 Safari 会自动调整文字大小！我看到这个页面上的解决方案很有效：

我在 CSS 中添加了以下内容，以防止移动版 Safari 改变我的文字大小。

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