Html CSS 字体大小在移动设备上无法正常工作
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/14638524/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
CSS Font-size not working properly on mobile device
提问by Rvervuurt
I'm working on a small project for school, where we have to incorporate html5 and css3. It's just in the begin stage now, as I'm trying to create two separate css-files for a mobile and a desktop version.
我正在为学校做一个小项目，我们必须在其中合并 html5 和 css3。现在只是在开始阶段，因为我正在尝试为移动版本和桌面版本创建两个单独的 css 文件。
For the mobile version, I'm trying to get the menu to just show as a list, but with a bigger font. I can in no way get this working though.
对于移动版本，我试图让菜单仅显示为列表，但字体更大。不过，我无论如何都无法做到这一点。
This is the css for the menu:
这是菜单的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;
}
This creates the following on my desktop
And on my iPhone
这会在我的桌面和我的 iPhone上创建以下内容
The font-size is set to 1em in the HTML in the top of the file. But 1em is not big enough for mobile devices, so I want it bigger, which seems impossible.
字体大小在文件顶部的 HTML 中设置为 1em。但是1em对于移动设备来说不够大，所以我想要更大，这似乎是不可能的。
Even when I give the nav h1a font-size of 10em, it doesn't get bigger than this:
即使我将nav h1字体大小设置为 10em，它也不会变得比这更大：
While on my desktop it does work without a problem, there it looks like this:
虽然在我的桌面上它确实可以正常工作，但它看起来像这样：
The same problem occurs when trying to make the "blog posts" bigger, they just won't do it.
试图使“博客文章”更大时也会出现同样的问题，他们只是不会这样做。
I normally have no trouble working with CSS, but this time I can't figure it out. Hope anyone can help! I have the feeling it's something very obvious.
我通常使用 CSS 没有问题，但这次我想不通。希望任何人都可以提供帮助！我有一种感觉，这是非常明显的事情。
Here is the complete CSS: http://snipt.org/zLic5
这是完整的 CSS：http: //snipt.org/zLic5
Here is the html: http://snipt.org/zLid2
这是 html：http: //snipt.org/zLid2
回答by naresh kumar
i saw your html code. you are not adding any meta tag. certain meta tags are required, when you are developing mobile website,
我看到了你的 html 代码。您没有添加任何元标记。某些元标记是必需的，当您开发移动网站时，
for example you have to add -
例如你必须添加 -
<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)">
回答by v-andrew
Try css property text-size-adjustto scale text on mobile devices. Something like:
尝试使用 css 属性text-size-adjust在移动设备上缩放文本。就像是：
nav {
text-size-adjust: 200%;
}
nav ul {
text-size-adjust: 300%;
}
nav h1 {
text-size-adjust: 400%;
}
回答by davo2323
I see a couple things I think can help your situation. Semantically, you don't want to use <h1>tags in your menu list at all. Remove those tags and apply the styling to the nav licss style and adjust the padding accordingly. Also, just a recommendation, but I've heard from a few websites that the ideal mobile font sizing is pt.
我看到一些我认为可以帮助您解决问题的方法。从语义上讲，您根本不想<h1>在菜单列表中使用标签。删除这些标签并将样式应用到nav licss 样式并相应地调整填充。此外，这只是一个建议，但我从一些网站听说理想的移动字体大小是pt.
I hope this helps.
我希望这有帮助。
回答by awolfe76
Go back to using the li for you navigation.
返回使用 li 进行导航。
Then set the font-size to something acceptable (14px or 16px).
然后将字体大小设置为可接受的值（14px 或 16px）。
Then, in your css, use media-queries.
然后，在您的 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
}
}
