Html CSS 在移动浏览器中不起作用
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21968677/
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 not working in mobile browsers
提问by hiu28
The site looks perfect when viewed from a laptop or a desktop. But when I tried to access it through my phone, it doesn't recognize the css file from the site and only loads the html portion. Read through other similar questions but they don't seem to have the same problem as I do. Any advice on how to fix it?
从笔记本电脑或台式机上查看时，该网站看起来很完美。但是当我尝试通过手机访问它时，它无法识别来自站点的 css 文件，而只加载了 html 部分。通读其他类似的问题，但他们似乎没有和我一样的问题。关于如何修复它的任何建议？
BTW, If you guys need the codes:
顺便说一句，如果你们需要代码：
EDIT: I use an android 4.2 phone, native browser
编辑：我使用 android 4.2 手机，本机浏览器
回答by Mario Sanchez Maselli
You should use the following structure
您应该使用以下结构
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Pruebas</title>
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<link rel="stylesheet" href="styleslocation/style.css">
</head>
<body>
<!--Content here-->
</body>
</html>
回答by calyxofheld
You need to make sure that you're telling the browser to set the viewport to the device width. Just define the meta content in your document head as such:
您需要确保告诉浏览器将视口设置为设备宽度。只需在您的文档头中定义元内容，如下所示：
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
回答by Nils
I think you are hitting this issue:
我认为您遇到了这个问题：
http://css-tricks.com/css-tricks-chronicle-vol-iv/
http://css-tricks.com/css-tricks-chronicle-vol-iv/
Some mobile browsers need this format for imports:
一些移动浏览器需要使用这种格式进行导入：
@import url("css/style.css");
@import url("css/style.css");
