字体大小和元视口在响应式设计中 [英] font-size and meta viewport in a responsive design
问题描述
我必须参与一个需要响应的项目。这是我第一次这样做，我被困在一个（可能是愚蠢的）问题。
假设我有这个非常简单的页面：
<！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;>
有些文字检查一切正常
< / div>
< / body>
< / html>
正如预期的那样，在所有设备上的文本字体大小都是1em（在这种情况下是18px）。而且，还可以，在更大型的设备上（我正在比较Android手机，iPhone和Android平板电脑）看起来更大一些：两款手机看起来都一样，平板电脑上看起来更大。到目前为止这样好。
但是，如果我添加< meta name =viewport> 我的代码如下所示：
<！DOCTYPE html>
< html>
< head>
< meta name =viewportcontent =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;>
有些文字检查一切正常
< / div>
< / body>
< / html>
现在文字在所有设备上看起来都是相同的大小，但我不理解。
所以，第一个问题是：我是否试图做正确的事情？
如果我是：我怎么能得到我要找的行为？
谢谢！
从Google的 PageSpeed Insights文章跨设备字体大小易读性：
有些移动浏览器可能会尝试缩放没有正确配置视口的页面的字体。此缩放行为因浏览器而异，不应依赖于在移动设备上提供易读的字体。
我认为您在某些设备上注意可能是浏览器尝试将网页专门设计用于在移动设备上更易于访问的大屏幕桌面查看的产品。当您添加正确配置的视口元标记时，浏览器认为该网站已经设计为适应不同的屏幕尺寸，并且不需要额外的步骤来缩放文本的易读性。
首先，请继续正确配置您的视口，仔细考虑越来越常见的建议，您应该避免最小比例，最大比例 ，和用户可扩展 ，因为这些指令可以限制或禁止用户放大和缩小网站内容的能力，许多人依赖这些内容作为辅助工具。
如果您只是希望获得更多控制权，您的字体大小如何在屏幕大小和像素密度之间变化， CSS媒体查询基于视口的宽度和/或高度可能会是你最好的选择。例如：
@media all {
/ *设置所有支持媒体查询的用户代理的基本字体大小* /
html {
font-size：18px;
}
}
@media screen和（min-width：480px）{
/ *为最小值为480px的视口设置较大的基本字体大小，平板电脑，台式电脑，jumbotrons等* /
html {
font-size：24px;
$ b $ p
$ b 如果你很担心比例（例如，标题文本占据了智能手机上太多的视口），您可以尝试使用视口单元（特别是 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屋！
