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

This topic created in 2993 days ago, the information mentioned may be changed or developed.

嗨，各位。

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

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

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

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

iOS

样式

字体

调试

7 replies • 2018-05-29 11:34:21 +08:00

Exia

May 28, 2018

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

oott123

May 28, 2018

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

Exin

May 29, 2018 via iPhone

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

Exin

May 29, 2018 via iPhone

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

iSecret

May 29, 2018

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

oott123

May 29, 2018

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

iSecret

May 29, 2018

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