代码之家 › 专栏 › 技术社区 › Michael

iPhone Safari CSS旋转bug

screen-orientation mobile-safari iphone css

2

Michael · 技术社区 · 16 年前

我有一个小的手机应用程序,在iPhone/mobile Safari上表现得很奇怪。当页面的方向是垂直的时,页面呈现效果非常好。当我水平旋转手机时,页面上的一些元素(但不是所有元素)会正确调整大小。一些标题元素将保持几乎相同的大小,可能会增加10%,其他元素的大小将增加一倍。

有人碰到过这个吗?我的第一个想法是css可以有一个基于ems和px的大小组合,但是找到每个大小元素并将它们转换成em并没有改变任何事情。

2 回复 | 直到 16 年前

1

11

CÅur Gustavo Armenta 7 年前

您可以使用以下css规则禁用它,

html {-webkit-text-size-adjust:none}

2

7

Brian Driscoll 16 年前

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>

否则,您可以尝试创建特定于方向的CSS样式表,并在触发orientation change事件时用javascript替换它们,但我更喜欢上面的meta-tag方法。