响应式设计中的字体大小和元视口 [英] font-size and meta viewport in a responsive design

查看：23
本文介绍了响应式设计中的字体大小和元视口的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我必须处理一个需要响应的项目​​.这是我第一次这样做，我被一个(可能是愚蠢的)问题困住了.

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

<头><风格>html{font-size:18px;width:100%;height:100%;margin:0;padding:0;font-family:Verdana, 日内瓦, sans-serif;}正文{字体大小:100％；宽度:100％；高度:100％；边距:0；填充:0；}</风格><身体><div style="font-size:1em;">一些文本来检查是否一切正常

正如预期的那样，所有设备上的文本字体大小都是 1em(即在这种特殊情况下为 18px).而且，仍然可以，它在更大的设备上看起来更大(我正在与 Android 手机、iPhone 和 Android 平板电脑进行比较):它在两部手机上看起来相同，在平板电脑上看起来更大.到目前为止一切顺利.

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

<头><meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"><风格>html{font-size:18px;width:100%;height:100%;margin:0;padding:0;font-family:Verdana, 日内瓦, sans-serif;}正文{字体大小:100％；宽度:100％；高度:100％；边距:0；填充:0；}</风格><身体><div style="font-size:1em;">一些文本来检查是否一切正常

现在文本在所有设备上看起来都一样大小，据我所知，这是不应该的.

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

谢谢！

解决方案

来自 Google 的 PageSpeed Insights关于跨设备字体大小易读性的文章:

<块引用>

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

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

首先，请继续正确配置您的视口，小心考虑到您应该避免 minimum-scale、maximum-scale 和 user-scalable 作为越来越普遍的建议这些指令可以限制或禁用用户放大和缩小您网站内容的能力，许多人将其用作无障碍工具.

如果您只是想更多地控制字体大小在屏幕尺寸和像素密度之间的变化，CSS 媒体查询基于视口的宽度和/或高度可能是您最好的选择.例如:

@media all {/* 为所有支持媒体查询的用户代理设置基本字体大小 */html {字体大小:18px；}}@media 屏幕和(最小宽度:480px){/* 为视口设置更大的基本字体大小，最小为 480px，例如平板电脑、台式机、超大屏幕等 */html {字体大小:24px；}}

如果您担心跨设备文本大小的比例美感(例如标题文本是否在智能手机上占据了过多的视口)，您可以尝试使用视口单位(特别是 vmin) 强制文本与视口的大小成比例缩放.但请注意，并非所有浏览器都一致支持视口单位.此外，请注意用户的易读性需求，并谨慎使用这种方法，因为文本被设计为流动和流畅缩放是有原因的，并且强制文本块像广告牌一样适合视口会阻碍可读性针对不同设备和/或眼球的用户的文本.

I have to work on a project that needs to be responsive. It's the first time I'm doing this and I'm stuck with a (possibly stupid) question.

Let's say I have this very simple page :

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

As expected, text font-size is 1em (i.e. 18px in this particular case) on all devices. And, still ok, it looks bigger on a larger device (I'm comparing with an Android phone, an iPhone and an Android tablet) : it looks the same on both phones, bigger on the tablet. So far so good.

But if I add the <meta name="viewport"> line in my code, like this :

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

Now the text looks the same size on all devices, which it shouldn't, to my understanding.

So, first question is: am I trying to do the right thing or not? And if I am: how can I get the behaviour I'm looking for?

Thanks!

解决方案

From Google's PageSpeed Insights article on cross-device font-size legibility:

Some mobile browsers may attempt to scale fonts for pages without a properly configured viewport. This scaling behavior varies between browsers and should not be relied upon to deliver legible fonts on mobile devices.

I think the scaling you're noticing on some devices may be a product of the browser's attempt to make pages designed exclusively for large-screen, desktop viewing more accessible on mobile devices. When you add the properly configured viewport meta tag, the browser deems that this website is already designed for to accommodate different screen sizes and that it doesn't need to take the extra step to scale text for legibility.

First and foremost, please do continue to properly configure your viewport, carefully considering the increasingly common advice that you should avoid minimum-scale, maximum-scale, and user-scalable as these directives can limit or disable the user's ability to zoom in and out on the content of your website, which many rely on as an accessibility tool.

If you simply want more control over how your font size changes between screen sizes and pixel densities, CSS media queries based on the width and/or height of the viewport are probably going to be your best bet. For example:

@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;
    }
}

If you're worried about the proportional aesthetic of text size across devices (e.g. does the header text occupy too much of the viewport on smartphones), you might try using viewport units (specifically vmin) to force the text to scale proportionally with the size of the viewport. Be warned, though, that not all browsers support viewport units consistently. Also, please be mindful of your users' legibility needs, and use this approach sparingly, as text is designed to flow and scale fluidly for a reason, and forcing a block of text to fit within the viewport like a billboard can hinder the readability of your text for users of varying devices and/or eyeballs.

这篇关于响应式设计中的字体大小和元视口的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆