CSS字体大小在移动设备上无法正常工作

Posted 2023-03-31

【中文标题】CSS字体大小在移动设备上无法正常工作

【英文标题】：CSS Font-size not working properly on mobile device

【发布时间】：2013-02-01 01:56:08

【问题描述】：

我正在为学校做一个小项目，我们必须将 html5 和 css3 结合起来。现在只是在开始阶段，因为我正在尝试为移动版和桌面版创建两个单独的 css 文件。

对于移动版本，我试图让菜单仅显示为列表，但字体更大。不过，我无论如何也无法让它发挥作用。

这是菜单的CSS：

nav ul 
    list-style: none;
    background-color: green;
    padding: 0;


nav li 
    border-bottom: 1px solid black;
    padding: 5px;


nav 
    margin-top: -36px;
    width: 100%


nav h1
    margin: 0;

这会在我的桌面上创建以下内容 在我的 iPhone

在文件顶部的 HTML 中字体大小设置为 1em。但是 1em 对于移动设备来说还不够大，所以我想要它更大，这似乎是不可能的。

即使我给nav h1 设置了 10em 的字体大小，它也不会比这个大：

虽然在我的桌面上它确实可以正常工作，但它看起来像这样：

当试图使“博客文章”更大时也会出现同样的问题，他们就是不会这样做。

我通常使用 CSS 没有问题，但这次我想不通。希望任何人都可以提供帮助！我觉得这很明显。

这是完整的 CSS：http://snipt.org/zLic5

这里是 html：http://snipt.org/zLid2

【问题讨论】：

为什么不以像素而不是em来声明字体大小？在旁注中，如果您使用媒体查询，您可以坚持使用一个 css，并且只覆盖设备之间不同的样式。

这里有解释：***.com/questions/750594/…。你花了这么多精力问你的问题，我不能让自己投票结束它作为重复。

【参考方案1】：

我看到了你的 html 代码。您没有添加任何元标记。在开发移动网站时，需要某些元标记，

例如你必须添加 -

<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, width=device-width, user-scalable=no" />
<title>Welcome to your school name</title>

<!-- smart phone css  -->
<link href="assets/phone.css" rel="stylesheet" type="text/css" media="all and (min-width: 0px) and (max-width: 480px)" />

<!-- Tablet -->
<link href="assets/tablet.css" rel="stylesheet" type="text/css" media="all and (min-width: 481px) and (max-width: 800px)" />

<!-- Desktop -->
<link href="assets/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width:801px)">

【讨论】：

您好，感谢您的回答！添加带有视口的元标记解决了这个问题！我当然还添加了其他元数据。我没有使用 .css 的链接，因为我为此使用了@media screen，所以我只需要跟踪一个 css。

@naresh-kumar - 谢谢。这也帮助了我。我确实注意到一个错字，它应该是user-scalable（没有“e”）。干杯

谢谢。这对我帮助很大，并为我节省了很多工作

这不是一个很好的例子...在视口元标记中，站点正确缩放只需要“width=device-width”。此外，“maximum-scale=1.0”和“user-scalable=no”在可访问性方面特别糟糕，因为此设置会阻止放大。检查：blog.javierusobiaga.com/…

【参考方案2】：

我认为有几件事可以帮助您解决问题。从语义上讲，您根本不想在菜单列表中使用 <h1> 标记。删除这些标签并将样式应用于nav li css 样式并相应地调整填充。另外，只是一个建议，但我从一些网站上听说，理想的移动字体大小是pt。

我希望这会有所帮助。

【参考方案3】：

返回使用 li 导航。

然后将字体大小设置为可接受的值（14px 或 16px）。

然后，在您的 css 中，使用媒体查询。

@media (max-width: 480px)  // will only happen on viewport less then 480 pixels (mobile)
  li 
    font-size:18px; // larger font (or whatever you want to do
    padding: 20px; // can even increase your padding
  

【参考方案4】：

尝试使用 css 属性 text-size-adjust 在移动设备上缩放文本。比如：

nav 
    text-size-adjust: 200%;

nav ul 
    text-size-adjust: 300%;

nav h1 
    text-size-adjust: 400%;

【讨论】：

谢谢，这解决了我的问题。顺便说一句，这是实验性的：developer.mozilla.org/en-US/docs/Web/CSS/text-size-adjust 另外，我现在可以看到默认设置是不同元素的字体大小以不同的量变化。我将 body 标签的这个设置为 250%，以便所有元素一起缩放。

请在尝试此解决方案之前检查浏览器兼容性。截至目前，还没有得到很好的支持

所有FF手机、Chrome和Safari for ios都支持