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 mobile。

@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 */
}

链接移动样式表

1 个答案: