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

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

  •  
  •   iSecret · 2018-05-28 17:57:37 +08:00 · 1930 次点击
    这是一个创建于 2131 天前的主题,其中的信息可能已经有所发展或是发生改变。

    嗨,各位。

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

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

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

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

    7 条回复    2018-05-29 11:34:21 +08:00
    Exia
        1
    Exia  
       2018-05-28 18:32:16 +08:00
    遇到过,后来发现应该是 iOS 的屏幕 dpr 问题,这个时候都是需要做适配的,首先是统一一个大小的字体,然后适配的时候使用放大或是缩小的来现实效果
    oott123
        2
    oott123  
       2018-05-28 19:43:35 +08:00
    你有 macOS 吗?如果有的话,用 safari 调试看看。
    Exin
        3
    Exin  
       2018-05-29 08:36:32 +08:00 via iPhone
    viewport 设置了吗
    webkit-text-size-adjust 关了吗
    Exin
        4
    Exin  
       2018-05-29 08:37:23 +08:00 via iPhone   ❤️ 1
    另外截个图或给个 jsfiddle 之类的会比较好
    iSecret
        5
    iSecret  
    OP
       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
        6
    oott123  
       2018-05-29 09:46:12 +08:00
    @iSecret #5 我是指在 macOS 下,使用连接 iOS 设备的方式进行远程调试。
    iSecret
        7
    iSecret  
    OP
       2018-05-29 11:34:21 +08:00
    @oott123 一直没发现还有这种操作,学会了。Thx !
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   2723 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 15:38 · PVG 23:38 · LAX 08:38 · JFK 11:38
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.