移动设备上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

---

为什么不使用像素来声明字体大小，而是使用em呢？另外，如果您使用媒体查询，可以使用一个CSS文件并仅覆盖在设备之间不同的样式。 - Ben

这里有一个解释：https://dev59.com/R0fRa4cB1Zd3GeqP7Dj5。你在提问时付出了很多努力，我无法将其视为重复问题而关闭。 - Steve Wellens

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

---

你好，谢谢你的回答！添加带有viewport的meta标签解决了问题！当然，我也添加了其他的meta标签。我没有使用.css链接，因为我正在使用@media screen，所以我只需要跟踪一个css。 - Rvervuurt

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

谢谢。这帮了我很多，也省了我很多工作。 - Vinc199789

这不是一个好的例子... 在视口元标记中，只需要“width=device-width”才能使网站正确缩放。此外，“maximum-scale=1.0”和“user-scalable=no”一起使用在可访问性方面特别糟糕，因为这些设置会阻止缩放。请参考：http://blog.javierusobiaga.com/stop-using-the-viewport-tag-until-you-know-ho - tomasz86

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

---

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

请在尝试此解决方案之前检查浏览器兼容性。截至目前，支持程度不是很好。 - Bernardo Ferreira Bastos Braga

它被所有的FF手机版，Chrome和Safari for iOS支持。 - v-andrew

Answer 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
  }
}

- awolfe76

Answer 4

我看到了一些可以帮助你的情况的东西。从语义上讲，你不想在菜单列表中使用<h1>标签。删除这些标签并将样式应用于nav li CSS样式，并相应地调整填充。另外，只是一个建议，但我从一些网站上听说，理想的移动字体大小是pt。

希望这可以帮助到你。

- davo2323