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

Question

在做了一些研究之后，我选择使用大众单位来扩展我的响应式排版。

%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）。 On desktop / chrome emulator

on ios, both safari and chrome

on ios，safari和chrome

Answer 1

从我的胆量：

查看第一个屏幕截图，视口与表单元素一样宽。因此，文本（在vw = viewport-width中设置）将按预期呈现。 一旦视口更宽（在第二个屏幕截图中，表单背后有东西），文本框也会变宽（相对于视口宽度）。 是否也有助于在vw中设置表单的宽度？

最重要的是，浏览器之间总会出现轻微的不一致，因为它们会以非常不同的方式呈现字体。特别是Mac OSX上的Firefox与同一台机器上的所有其他浏览器完全不同。所以要注意这一点（与你的相比，不应该是一个问题）。

编辑：第二个想法它也可能与实际iPhone 6的像素密度相比，与Chrome中的模拟版本相比（可能发生在具有不同像素密度的不同屏幕上？ ）。这是OP尚未提及的内容。

根据http://viewportsizes.com/?filter=iPhone%206的表格，实际的iPhone 6在纵向模式下有375像素。这与Chrome中的模拟匹配吗？

Edit2：来自实际Apple主页的数据讲述了一个不同的故事：1334 x 750像素，分辨率为326 ppi！因此，您不会处理375像素，但实际设备上的像素数量是模拟设备的屏幕上真实 375像素的两倍。

Answer 2

当我试图模仿老派的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

Answer 3

在桌面和移动设备上的结果不一样，因为您的字体大小基于视口宽度（不同于移动设备到桌面）。

如果我正确理解您的问题，您希望您的h4文本永远不会比您的表单更宽，这是正确的吗？在这种情况下你不能在CSS中做到这一点，你需要Javascript。您可以尝试Flowtype或FitText（都需要jQuery），因为它们是解决此类问题的最终解决方案。

您可能也对this article about using viewport unit for typography感兴趣，这解释了为什么您不能仅在视口单元上使用html（使用百分比+视口单位来定义最小尺寸）。

我可以给你的最后一条建议是不要使用user-scalable。 There is a great discussion here on SO关于此主题。

Answer 4

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

从截图中我可以看到iOS中的那个字母间距更宽。如果我是你，我会在iOS上定位标题行：

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

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;