响应式设计中的字体大小和视口元标记

Question

响应式设计中的字体大小和视口元标记

4

我需要处理一个需要响应式的项目。这是我第一次这样做，我遇到了一个（可能很傻）的问题。

假设我有一个非常简单的页面：

<!DOCTYPE html>
<html>
<head>
    <style>
        html{font-size:18px;width:100%;height:100%;margin:0;padding:0;font-family:Verdana, Geneva, sans-serif;}
        body{font-size:100%;width:100%;height:100%;margin:0;padding:0;}
    </style>
</head>
<body >
    <div style="font-size:1em;">
        SOME TEXT TO CHECK IF EVERYTHING'S OK
    </div>
</body>
</html>

正如预期的那样，在所有设备上，文本字体大小为1em（在这种特定情况下为18px）。并且，在更大的设备上看起来更大（我正在将其与Android手机、iPhone和Android平板进行比较）：在两台手机上看起来相同，在平板电脑上看起来更大。到目前为止一切都好。

但是，如果我在代码中添加<meta name="viewport">行，就像这样：

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <style>
        html{font-size:18px;width:100%;height:100%;margin:0;padding:0;font-family:Verdana, Geneva, sans-serif;}
        body{font-size:100%;width:100%;height:100%;margin:0;padding:0;}
    </style>
</head>
<body >
    <div style="font-size:1em;">
        SOME TEXT TO CHECK IF EVERYTHING'S OK
    </div>
</body>
</html>

现在这段文字在所有设备上都看起来一样大小，根据我的理解，这不应该是这样的。

所以，第一个问题是：我是否在尝试做正确的事情？如果是的话，我该如何得到我想要的效果？

谢谢！

- OuberThat

2个回答

0

尝试设置字体大小：2.5vw; %)

想要更多的效果，请参考https://css-tricks.com/viewport-sized-typography/

附注：建议仅在移动设备上使用CSS媒体查询 )

- SanŚ́́́́Ý́́́́Ś́́́́

谢谢你的回答。我一直在考虑使用视口单位，但是根据http://caniuse.com/#feat=viewport-units，在Android 4.4以下的浏览器上不支持这些单位，而这仍然涉及到很多人。 - OuberThat

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Aaron · Accepted Answer

从谷歌的 PageSpeed Insights article 关于跨设备字体大小可读性的文章中：

一些移动浏览器可能会尝试为没有正确配置视口的页面缩放字体。这种缩放行为在不同的浏览器之间有所不同，不能依赖它来提供在移动设备上可读的字体。

我认为你在某些设备上注意到的缩放可能是浏览器试图使专门设计用于大屏幕桌面查看的页面在移动设备上更易访问的结果。当你添加了正确配置的视口元标记后，浏览器认为这个网站已经设计为适应不同的屏幕尺寸，不需要再采取额外的步骤缩放文本以提高可读性。

首先，请继续正确配置您的视口，仔细考虑越来越普遍的建议，即应该避免使用minimum-scale、maximum-scale和user-scalable，因为这些指令可能限制或禁用用户对您网站内容进行缩放的能力，而许多人依赖此功能作为辅助工具。

如果你想要更好地控制在不同屏幕尺寸和像素密度下字体大小的变化，基于视口宽度和/或高度的CSS 媒体查询可能是最好的选择。例如：

@media all {
    /* sets the base font size for all user agents that support media queries */
    html {
        font-size: 18px;
    }
}
@media screen and (min-width: 480px) {
    /* sets a larger base font size for viewports with a minimum with of 480px, e.g. tablets, desktops, jumbotrons, etc. */
    html {
        font-size: 24px;
    }
}

如果您担心文本大小在不同设备上的比例美学（例如，标题文本在智能手机上占用了太多的视口），您可以尝试使用视口单位（特别是vmin）来强制文本与视口大小成比例缩放。但请注意，并非所有浏览器都一致支持视口单位。此外，请注意您用户的易读性需求，并谨慎使用此方法，因为文本的流动和缩放是有原因的，强制将文本块适应视口就像广告牌一样，可能会影响不同设备和/或眼睛的用户阅读体验。