响应式视口字体在移动设备/ 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). 在桌面/ chrome模拟器上

在ios上,包括safari和chrome

在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 像素的两倍。