程序员经验分享-hwhale

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

2023-12-03

我必须从事一个需要响应的项目​​。这是我第一次这样做，我被一个（可能是愚蠢的）问题困扰。

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

<!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>

现在，根据我的理解，文本在所有设备上看起来大小相同，但事实不应该如此。

所以，第一个问题是：我是否在尝试做正确的事情？ 如果我是：我怎样才能得到我正在寻找的行为？

Thanks!


来自谷歌的PageSpeed 见解文章关于跨设备字体大小的易读性：

某些移动浏览器可能会在没有正确配置视口的情况下尝试缩放页面字体。这种缩放行为因浏览器而异，不应依赖于在移动设备上提供清晰的字体。

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

首先也是最重要的一点，请继续正确配置您的视口，仔细考虑您应该采取的日益常见的建议avoid minimum-scale, maximum-scale, and user-scalable因为这些指令可能会限制或禁用用户放大和缩小网站内容的能力，而许多人依赖网站作为辅助工具。

If you 只是想要更多的控制权关于字体大小如何在屏幕尺寸和像素密度之间变化，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) 强制文本与视口大小成比例缩放。但请注意，并非所有浏览器都一致支持视口单位。另外，请注意用户的易读性需求，并谨慎使用此方法，因为文本被设计为流畅地流动和缩放是有原因的，并且像广告牌一样强制文本块适合视口可能会妨碍文本的可读性您的文本适合不同设备和/或眼球的用户。

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)

html

css

responsivedesign

Viewport

Meta

响应式设计中的字体大小和元视口 的相关文章