链接移动样式表

Question

我在响应式设计方面遇到了问题，所以我为移动设备制作了一个名为 mobile.css 的样式表并将其链接到标题中，但没有任何更改。

<link rel='stylesheet' id='mobile' href='mobile.css' type='text/css' media='handheld' />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

然后在 mobile.css

我没有复制粘贴所有代码，因为它很多，但我知道代码是正确的，因为它适用于我的 android 手机，但不适用于 chrome 和 safari 手机。

@media handheld and (min-device-width : 768px)   
and (max-device-width : 1024px) (orientation: landscape) { 
@-ms-viewport{

    width: device-width;
}


code code code }

@media handheld and  (max-device-width : 480px) (orientation: landscape)  {      

@-ms-viewport{
    width: device-width;
}
 code code code code }


  @media handheld and (max-width: 380px) (orientation: landscape) { 


@-ms-viewport{
    width: device-width;
}

code code code }



 @media handheld and (orientation: landscape) { 

@-ms-viewport{
    width: device-width;
}

code code }

Answer 1

尝试使用以下专门针对 chrome 和 safari 的媒体查询

@media screen and (-webkit-min-device-pixel-ratio:0) {
   /* CSS rules */
}