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

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

V2EX 提问指南

这是一个创建于 2401 天前的主题，其中的信息可能已经有所发展或是发生改变。

嗨，各位。

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

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

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

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

iOS

样式

字体

调试

7 条回复 • 2018-05-29 11:34:21 +08:00

Exia

2018-05-28 18:32:16 +08:00

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

oott123

2018-05-28 19:43:35 +08:00

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

Exin

2018-05-29 08:36:32 +08:00 via iPhone

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

Exin

2018-05-29 08:37:23 +08:00 via iPhone

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

iSecret

2018-05-29 09:24:38 +08:00

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

oott123

2018-05-29 09:46:12 +08:00

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

iSecret

2018-05-29 11:34:21 +08:00

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