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上

font-size在文件顶部的HTML中设置为1em.但是1em对于移动设备来说还不够大,所以我希望它更大,这似乎是不可能的.

即使我给出nav h110em的字体大小,它也不会比这更大:

在我的桌面上它确实没有问题,它看起来像这样:

当试图使"博客帖子"更大时,会发生同样的问题,他们只是不会这样做.

我通常在使用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)">