xIl*_*onx 19 css mobile screen stylesheet
我已经查看了这个问题的堆栈溢出主题,以及一些谷歌搜索结果,但我似乎无法解决我的问题.
我已经为移动设备(mobile.css)创建了一个样式表,它实际上是我的main.css的副本,其中包含许多属性的更改.当我只加载mobile.css作为样式表时,它在我的iPhone上看起来很棒,就像我想要的那样.然而,当我把两者都放进去的时候,我得到了两者的混合,但更多的是main.css
知道为什么吗？
<head>
<link rel="stylesheet" href="styles/main.css" type="text/css" media="screen" />
<link rel='stylesheet' media='screen and (max-device-width: 480px)' href='styles/mobile.css' type='text/css' />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
Moh*_*sen 31
根据文档,在特定设备/条件中加载另一个文件的语法是这样的:
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" media="only screen and (max-width: 400px)" href="mobile.css" />
<link rel="stylesheet" media="only screen and (min-width: 401px)" href="desktop.css" />
这将只为每一个量加载一个css文件 width
对于具有Retina显示屏的iPhone 4和新一代iPod touch,您应该注意一些事项.iPhone 4宽度是640像素,许多开发人员不将此宽度计为移动浏览器宽度.如果您在文档中添加此元标记问题将得到解决
<meta name="viewport" content="width=320">
此元标记会影响您的图像质量.如果你想解决这个问题,那么你需要在这里阅读.