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

Posted 2023-03-06

【中文标题】响应式视口字体在移动/ios 设备上不一致

【英文标题】：responsive viewport font not consistent on mobile / ios devices

【发布时间】：2016-07-28 23:28:15

【问题描述】：

在做了一些研究之后，我选择使用 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 正确对齐）。 On desktop / chrome emulator

on ios, both safari and chrome

在 iOS、Safari 和 chrome 上

【问题讨论】：

我们可以通过什么方式在上下文中查看您的代码？可能有助于解决问题。

您应该始终允许用户扩展您的网站！这是一个可访问性问题：iheni.com/mobile-accessibility-tip-dont-suppress-pinch-zoom 您不应该将 user-scalable 设置为“no”或“0”（而我不知道“0”是否有任何作用。

这是为什么呢？不是只适用于手机吗？您无法扩展移动应用程序...

您是否考虑过使用Normalize等CSS重置？

【参考方案1】：

我的直觉：

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

除此之外，您在浏览器之间总是会出现细微的不一致，因为它们呈现字体的方式非常不同。尤其是 Mac OSX 上的 Firefox 与同一台机器上的所有其他浏览器是如此不同。所以也要注意这一点（不过与你的相比，这应该不是什么大问题）。

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

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

Edit2：来自实际 Apple 主页的数据讲述了 1334 x 750 像素、326 ppi 的不同故事！！！因此，与模拟设备的屏幕上的真实 375 像素相比，您处理的不是 375 像素，而是实际设备上的像素数量的两倍。

【讨论】：

抱歉，表格后面什么都没有。这只是屏幕截图后面的内容。不过，感谢您的意见！

我仍然认为它与视口的宽度有关。想一想：Chrome 中的 iPhone 6 模拟器......创建模拟的屏幕像素密度是多少？将其与实际 iPhone 6 上的像素密度进行比较。可能存在差距？

【参考方案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

【参考方案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关于这个话题。

【讨论】：

是的。我了解视口的工作原理。我的问题是为什么在切换到移动设备时它在同一个 vw 上不一致？一个屏幕截图是 google chrome 的 iphone 6 模拟器（看起来是正确的）。另一张照片来自实际的 iphone 6。

我的错，我不明白你的问题。我现在不能做任何测试，但怀疑不要相信浏览器模拟器（你可以使用 Browserstack，尽管他们有真实的设备）。祝你好运！

【参考方案4】：

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

从您的屏幕截图中，我可以看到来自 iOS 的那个具有更宽的字母间距。如果我是你，我会在 iOS 上使用这样的标题行：

.caption 
  letter-spacing: -1px;

【参考方案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;