css3媒体查询头不工作

Question

我有两个样式表，一个用于移动，一个用于计算机。 默认情况下，我想使用我的移动工作表。

我的头检查：

<link rel='stylesheet' media='all' href='css/mobile.css' /> 
<link rel='stylesheet' media='screen and (min-width: 580px)' href='css/large.css' /> 

，但我仍然似乎可以用我的大样式表时，是否在移动浏览器！ （iphone 4）

Answer 1

尝试做这样的事情： （我的代码）

<link href="css/mobile_portrait.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 320px) and (orientation: portrait)"> 
<link href="css/mobile_landscape.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 480px) and (orientation: landscape)"> 
<link href="css/tablet.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 769px)"> 
<link href="css/netbook.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 1024px)"> 
<link href="css/desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 1224px)"> 

（这只是和示例）

Answer 2

我的问题是，iPhone手机似乎调整的内容。

我用：

<meta name="viewport" content="width=device-width, initial-scale=1"> 

...，以防止在手机浏览器大小调整。

把这个标签放在头上，就在我的媒体查询之前。 现在媒体查询功能正常。