移动设备/iOS上响应式视口字体不一致

Question

经过一些研究，我选择使用vw单位来调整我的响应式排版。

%meta{:content => "width=device-width, initial-scale=1, user-scalable=0", :name => "viewport"}/

CSS：

html{
  font-size: 1vw;
}

// h4 tag above form
h4{
  font-size: 1.60rem;
  text-align: center;
}

//form width
.e2ma_signup_form {
        margin: 0 auto;
        width: 36rem;
}

@media screen and (max-device-width: 480px){
  html , body{
    -webkit-text-size-adjust: none;
  }
}

上述内容展示了如何将根设置为1vw，然后在一个表单上方有一个h4标签。

在桌面端，我让h4标签的文本长度与表单的宽度匹配（如下图所示）。

但是，我的问题是，在iOS上，字体似乎不会以同样的方式计算。最明显的是，h4标签超出了表单的宽度。在Android上似乎可以正常工作。

这可能是什么原因，并且我该如何解决？

在桌面/ Chrome模拟器上（iPhone 6正确对齐）。 在桌面/ Chrome模拟器上 在iOS上，Safari和Chrome。

- NoobSter

---

有没有办法让我们在上下文中看到你的代码？这可能有助于解决问题。 - Lucas M

你应该始终允许用户对你的网站进行缩放！如果不允许缩放，则会影响可访问性：http://www.iheni.com/mobile-accessibility-tip-dont-suppress-pinch-zoom/不应将user-scalable设置为“no”或“0”（而我不知道“0”是否有任何作用）。 - Marco Hengstenberg

为什么这样说？这只适用于移动设备吗？你不能扩展移动应用程序... - NoobSter

你是否考虑过使用像Normalize这样的CSS重置？ - Michael Schwartz

Answer 1

我也曾尝试解决这个问题，当我试图模仿老式Flash缩放时。我发现将字体大小设为相对大小并不是解决的方法（尽管这应该是正确的方法）。

我的解决方案使用javascript/jQuery：

$( window ).resize(function() {
  var w = $( window ).width();
  var h = $( window ).height();
  var wspec = parseInt($( "#innerbody" ).css('width'));
  var hspec = parseInt($( "#innerbody" ).css('height'));
  if((w/h)>(wspec/hspec)) var scale = h/hspec;
  else var scale = w/wspec;
  $( "html" ).css('transform','scale('+scale+')');
  $( "html" ).css('-ms-transform','scale('+scale+')');
  $( "html" ).css('-webkit-transform','scale('+scale+')');
  $( "html" ).css('-moz-transform','scale('+scale+')');
});

要进行完整演示，请参见此页面：http://apps.usecue.com/viewport/flashscaling.html

- Mr. Hugo

Answer 2

如Marco所说，浏览器对字体的呈现方式不同。

从您的截图中，我可以看到iOS的字母间距更宽。如果是我，我会用类似这样的方式针对iOS上的标题行进行定位：

.caption {
  letter-spacing: -1px;
}

- Fionna

Answer 3

我的直觉告诉我：

看第一张截图，视口与表单元素一样宽。因此，文本（以vw = viewport-width设置）呈现为您期望的样子。 一旦视口变宽（在第二个截图中，表单后面有东西），文本框也会相对于视口宽度变宽。 在vw中设置表单的宽度是否有帮助？

除此之外，由于浏览器呈现字体的方式非常不同，因此您始终会在各个浏览器之间存在轻微的不一致性。特别是在Mac OSX上的Firefox与同一台机器上的所有其他浏览器非常不同。所以也要注意这一点（与您的问题相比不应该是太大的问题）。

编辑：仔细想想，这也可能与实际iPhone 6的像素密度有关，与Chrome中模拟的版本不同（可能发生在具有不同像素密度的不同屏幕上？）。这是OP尚未提到的事情。

根据http://viewportsizes.com/?filter=iPhone%206上的表格，在纵向模式下，实际的iPhone 6横跨375px。这是否与您Chrome中的仿真匹配？

编辑2：实际的苹果主页数据显示为1334 x 750像素，326 ppi！因此，您处理的不是375个像素，而是实际设备上的像素数量加倍，与您模拟设备上的真实375像素相比。

- Marco Hengstenberg

---

抱歉，表单后面没有任何内容。那只是截图背后的东西。不过还是感谢您的输入！ - NoobSter

我仍然认为这与视口的宽度有关。 思考一下：在Chrome中使用iPhone 6模拟器...屏幕创建仿真时的像素密度是多少？将其与实际iPhone 6上的像素密度进行比较。也许这就是你的差距所在？ - Marco Hengstenberg

Answer 4

由于字体大小基于视口宽度，因此在桌面和移动设备上结果可能不同，这是正常的。

如果我正确理解了您的问题，您希望h4文本永远不要超出表单的宽度，对吗？在这种情况下，您无法使用CSS，需要使用JavaScript。您可以尝试Flowtype或FitText（两者都需要jQuery），因为它们是此类问题的终极解决方案。

您可能还会对使用视口单位进行排版的文章感兴趣，该文章解释了为什么不能仅基于视口单位来定义html（使用百分比+视口单位来定义最小大小）。

我可以给出的最后一个建议是不要使用user-scalable。这里有一个关于这个主题的很好的讨论。

- Pipo

---

是的，我了解视口（viewport）的工作原理。我的问题是，为什么在切换到移动设备时，同样的vw值会出现不一致的情况？其中一张截图是谷歌浏览器模拟iPhone 6的屏幕（看起来是正确的）。另一张照片则是实际的iPhone 6屏幕。 - NoobSter

我的错，我没有理解你的问题。我现在无法进行任何测试，但是如果有疑问，请不要相信浏览器模拟器（你可以使用Browserstack，因为它们有真实设备）。祝你好运！ - Pipo

Answer 5

// We use these to control header font sizes

//适用于中等屏幕及以上

$h1-font-size: rem-calc(44) !default;

$h2-font-size: rem-calc(37) !default;

$h3-font-size: rem-calc(27) !default;

$h4-font-size: rem-calc(23) !default;

$h5-font-size: rem-calc(18) !default;

$h6-font-size: 1rem !default;

//我们使用这些来控制小屏幕上的标题大小缩小

$h1-font-reduction: rem-calc(10) !default;

$h2-font-reduction: rem-calc(10) !default;

$h3-font-reduction: rem-calc(5) !default;

$h4-font-reduction: rem-calc(5) !default;

$h5-font-reduction: 0 !default;

$h6-font-reduction: 0 !default;

- Creative Enemy