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

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

%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

在ios,safari和chrome上

解决方法

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