Question

在我目前的响应项目中，我遇到的问题是，在横向模式下使用我的iPhone时，字体大小要大得多，并且引入-webkit-text-size-adjust: none;没有帮助（请参阅下面的JSFiddle）。

我在项目中使用这些定义：

<meta name="viewport" content="width=device-width, user-scalable=yes"/>

和断点

@media only screen and (max-width: 35em) and (orientation:portrait) {
  ...
}
@media only screen and (max-width: 47em) and (orientation:landscape) {
  body {
     -webkit-text-size-adjust: none;
  }
}
@media only screen and (max-width: 35em) and (orientation:portrait),
       only screen and (max-width: 47em) and (orientation:landscape) {
...
}

您可以在我result page的JSFiddle处直接测试。

<div class="test">This is just a test</div>
<div class="test">This is just a test</div>
<div class="test">This is just a test</div>
<div class="test">This is just a test</div>
<div class="test">This is just a test</div>

和

@viewport {
  width: device-width;
}
@media only screen and (max-width: 47em) and (orientation:landscape) {
  body {
     -webkit-text-size-adjust: none;
  }
}

.test {
    width:100%;
    margin-bottom:2px;
    height:2em;
    font-size:3em;
}
.test:nth-child(2n+1) {
    background-color:#eeeeee;
}

有什么不对？

更新：

即使没有断点，它也不起作用，请参阅JSFiddle

更新2015-07-15

我找到了解决方法：禁用手机缩放可以解决问题。但是，当平板电脑获得桌面版时，必须为平板电脑启用缩放功能。我现在通过检查javascript中的屏幕大小来实现工作解决方案，如果它低于752px，我将视口定义修改为width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0

Safari在横向模式下显示更大的字体大小

0 个答案: