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

Question

我正在为学校做一个小项目，我们必须在其中合并 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

原文由 Rvervuurt 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 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)">

原文由 naresh kumar 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

尝试 css 属性 text-size-adjust 在移动设备上缩放文本。就像是：

 nav {
    text-size-adjust: 200%;
}
nav ul {
    text-size-adjust: 300%;
}
nav h1 {
    text-size-adjust: 400%;
}

原文由 v-andrew 发布，翻译遵循 CC BY-SA 3.0 许可协议