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中将font-size设置为1em。但是1em对于移动设备来说还不够大，所以我希望它更大，这似乎是不可能的。

即使我给nav h1字体大小为10em，它也不会比这更大：

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

当试图让“博客帖子”更大时会发生同样的问题，他们就是不会这样做。

我使用CSS通常没有问题，但这次我无法理解。希望有人可以帮忙！我觉得这很明显。

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

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

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

Answer 2

尝试使用css属性Me.Controls...来缩放移动设备上的文字。类似的东西：

Container.Controls...

Answer 3

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

我希望这会有所帮助。

Answer 4

返回使用li进行导航。

然后将font-size设置为可接受的值（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
  }
}