首页   注册   登录
V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
V2EX 提问指南
拉钩
V2EX  ›  问与答

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

  •  
  •   iSecret · 198 天前 · 614 次点击
    这是一个创建于 198 天前的主题,其中的信息可能已经有所发展或是发生改变。

    嗨,各位。

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

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

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

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

    7 回复  |  直到 2018-05-29 11:34:21 +08:00
        1
    Exia   198 天前
    遇到过,后来发现应该是 iOS 的屏幕 dpr 问题,这个时候都是需要做适配的,首先是统一一个大小的字体,然后适配的时候使用放大或是缩小的来现实效果
        2
    oott123   198 天前
    你有 macOS 吗?如果有的话,用 safari 调试看看。
        3
    Exin   198 天前 via iPhone
    viewport 设置了吗
    webkit-text-size-adjust 关了吗
        4
    Exin   198 天前 via iPhone   ♥ 1
    另外截个图或给个 jsfiddle 之类的会比较好
        5
    iSecret   198 天前
    @Exia 非专业前端,有点不知所措。
    @oott123 macOS safari 调试过了,和 Chrome 效果无差。反倒是 iOS 设备上 safari 和 Chrome 代码块字体均有放大。
    @Exin Thx ! viewport 设置了,webkit-text-size-ajust 头一次使用。it work.
    问题已经解决,非常感谢!感谢各位。
        6
    oott123   198 天前
    @iSecret #5 我是指在 macOS 下,使用连接 iOS 设备的方式进行远程调试。
        7
    iSecret   198 天前
    @oott123 一直没发现还有这种操作,学会了。Thx !
    关于   ·   FAQ   ·   API   ·   我们的愿景   ·   广告投放   ·   感谢   ·   实用小工具   ·   3127 人在线   最高记录 4019   ·  
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.1 · 17ms · UTC 04:47 · PVG 12:47 · LAX 20:47 · JFK 23:47
    ♥ Do have faith in what you're doing.
    沪ICP备16043287号-1