Chrome 调试工具与 iOS 上样式展示不同的问题

[iSecret]

嗨，各位。

我最近在写一个 Hexo 的博客主题，代码高亮使用 highlight.js 提供的 CSS 样式。

一切似乎有条不紊的进行，直到最近在手机上发现了 iOS 上的样式与 PC 端样式存在差异的问题，我尝试使用 Chrome 的调试工具模拟 iOS 设备调试，然而并没有什么卵用。

这个问题主要体现在代码块字体大小问题，我在 CSS 定义了字体为 14px ，在 PC 端一切正常，但是在 iOS 设备上字体大了很多，大约有 20+px。

这个问题真的很诡异。有遇到过这个问题或者有解决过问题的朋友，请不吝赐教。感谢！

[Exia]

遇到过，后来发现应该是 iOS 的屏幕 dpr 问题，这个时候都是需要做适配的，首先是统一一个大小的字体，然后适配的时候使用放大或是缩小的来现实效果

[oott123]

你有 macOS 吗？如果有的话，用 safari 调试看看。

[Exin]

viewport 设置了吗
webkit-text-size-adjust 关了吗

[Exin]

另外截个图或给个 jsfiddle 之类的会比较好

[iSecret]

@Exia 非专业前端，有点不知所措。
@oott123 macOS safari 调试过了，和 Chrome 效果无差。反倒是 iOS 设备上 safari 和 Chrome 代码块字体均有放大。
@Exin Thx ！ viewport 设置了，webkit-text-size-ajust 头一次使用。it work.
问题已经解决，非常感谢！感谢各位。

[oott123]

@iSecret #5 我是指在 macOS 下，使用连接 iOS 设备的方式进行远程调试。

[iSecret]

@oott123 一直没发现还有这种操作，学会了。Thx ！