V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
JCZ2MkKb5S8ZX9pq
V2EX  ›  前端开发

ios 浏览器横屏字体放大怎么解?

  •  
  •   JCZ2MkKb5S8ZX9pq · 2018-12-19 19:16:17 +08:00 · 2081 次点击
    这是一个创建于 1952 天前的主题,其中的信息可能已经有所发展或是发生改变。

    横屏放大也就算了,有的放有的不放,一个表格里某几个 td 放大,真的是……出现得非常不规律啊!

    -webkit-text-size-adjust

    是这样的,直接用

    -webkit-text-size-adjust: 100%;
    -webkit-text-size-adjust: none;
    

    这两种我也是知道的,的确可以限制横屏字体,但是实际使用有点问题。

    zoom / viewport scale

    因为页面有些部分会用到 zoom,比如移动版的表格会做紧凑一点,等等。
    viewport scale 同理。

    纠结点

    • -webkit-text-size-adjust是限制页面字体缩放。

    • zoom影响所有元素表现,包括字号。

    • 同时使用,其它所有元素受zoom影响,但字号由-webkit-text-size-adjust控制。

    • 这就导致每个用zoom的地方,都要追加一个-webkit-text-size-adjust,感觉很繁琐。
      比如用 *{zoom:0.8} 代替 viewport。

      因为 viewport 缩放表格 td 间会露出缝隙,也是个怪事。

      这时候如果再加上-webkit-text-size-adjust:80%,会导致排版出现一些很微妙的意外。
      所以还要拆开来,某些地方针对性地加,非常繁琐,远没有直接给body或者*上个zoom来得便利。
      另外使用-webkit-text-size-adjust还需要全局有用em / rem
      zoom是无视单位的,方便多了。
      要不是为了该死的横屏放大……


    PS:才发现现在 viewport 禁缩放对 safari 已经不起作用了……
    safari 独有的那几个-webkit-特性说明页也还是 N 久前的 iOS 界面

    2 条回复    2018-12-19 19:46:37 +08:00
    JCZ2MkKb5S8ZX9pq
        1
    JCZ2MkKb5S8ZX9pq  
    OP
       2018-12-19 19:29:05 +08:00
    发现排版的奇怪意外的原因了,好像是 zoom 和 tsa 都对 line-height 作用了,等于 line-height 被 80%了两次,坑爹啊!
    JCZ2MkKb5S8ZX9pq
        2
    JCZ2MkKb5S8ZX9pq  
    OP
       2018-12-19 19:46:37 +08:00
    纠正两点,一般我移动端 zoom 用在 body 上比较多,不是*。
    字体单位貌似没有影响,之前搞错是因为上面说的 line-height 问题。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   我们的愿景   ·   实用小工具   ·   1008 人在线   最高记录 6543   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 26ms · UTC 20:43 · PVG 04:43 · LAX 13:43 · JFK 16:43
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.