Question

当我在iPhone上查看我的页面时，我看到该页面处于缩小模式。这很好，并且所有尺寸都适合于盒子等。

但不是文字。与此缩放视图上的其他尺寸相比，文字尺寸更大。

这适用于页面上的文本内容。然后，它更容易阅读手机上的文字，内容文本不固定，但浮动并适合容器。

但是，页面主菜单中按钮上的文字也没有减小相同的百分比。这里有一个问题 - 然后主菜单栏突然变宽，因为其他所有东西都缩小了。

我的菜单宽度不固定，但适合文字宽度。因此，当文本宽度突然大于平时时，菜单栏也比平常更宽。

我不能给出屏幕截图，但我希望这是一个已知的问题。作为示例，请参阅此模拟器（它似乎显示iPhone上的问题）： http://transmog.net/iphone-simulator/mobile-web-browser-emulator.php?u=http://w3schools.com#

并比较正常网站：http://w3schools.com/

此网站也存在此问题，例如页面右侧的菜单。

Answer 1

Mabye text-size-adjust可以帮助你。

.css {
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust:    none;
    -ms-text-size-adjust:     none;
    text-size-adjust:         none;
}

这将允许您的文字小于手机浏览器允许的默认值。

注意：在真实的手机上测试它＆＃34;基于Webkit的桌面浏览器中存在一个错误。如果-webkit-text-size-adjust明确设置为none，那么基于Webkit的桌面浏览器（如Chrome或Safari）将忽略该属性，而不会忽略该属性，这将阻止用户放大或缩小网页＆＃34;

https://developer.mozilla.org/en-US/docs/CSS/text-size-adjust

iPhone缩放不会放大菜单按钮中的文本

1 个答案: