CSS媒體查詢和我的Nexus One（或其他Android手機）

因此，我有兩部手機一個Android Nexus One和一個便宜的簡單Android設備，我以100美元的零售價購買。CSS媒體查詢和我的Nexus One（或其他Android手機）

我想使我的網站移動設備友好使用@media和CSS（我實際上使用手寫筆和Node.JS，所以代碼可能看起來有點有趣）。

所以我增加了以下我的風格

//trial 1 
@media (max-width:480px) 
    display none 
//Trial 2 
@media (resolution: 163dpi) 
    display none 
//Trial 3 
@media (-webkit-device-pixel-ratio:0.75) 
    display none 
//Trial 4 
@media screen and (max-width:480px) 
    display none

起初我還以爲我的屏幕只是超高分辨率，但這些都不利於價格較低的設備無論是。一切似乎在我的瀏覽器中正常工作，所以我很難過。

謝謝！

來源

2012-05-13 Jackie

嘗試添加該meta標記HTML的<head>：

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

來源

2012-05-13 22:25:23 tw16

所以只是爲了澄清，如果有其他人使用玉這將是元（名=「視口」，內容=「寬=設備-width，初始規模= 1" ）。此時最大設備寬度爲480px，感謝！ – Jackie

從這個名單

嘗試，希望這將有助於：

/* Large screens ----------- */ 
@media only screen 
and (min-width : 1824px) { 

} 
/* Desktops and laptops ----------- */ 
@media only screen 
and (min-width : 1224px) { 

} 
/* iPads (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) { 

} 
/* Smartphones (portrait and landscape) ----------- */ 
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 

} 
/* Smartphones (landscape) ----------- */ 
@media only screen 
and (min-width : 321px) { 

} 
/* Smartphones (portrait) ----------- */ 
@media only screen 
and (max-width : 320px) { 

} 
/* iPads (landscape) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { 

} 
/* iPads (portrait) ----------- */ 
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { 

} 
/* iPhone 4 ----------- */ 
@media 
only screen and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5) { 

}

來源

2012-05-13 21:28:34

沒有骰子，我已經嘗試所有這些，他們不工作.... – Jackie

由於tw16說，你需要width=device-width告訴瀏覽器不要假裝有更大的分辨率。在另一方面，與最新版本的手寫筆，這也是合法的：

.foo 
    display block 
    & 
    @media (max-width:480px) 
     display none 
    @media (resolution: 163dpi) 
     display none 
    @media (-webkit-device-pixel-ratio:0.75) 
     display none 
    @media screen and (max-width:480px) 
     display none

哪個編譯爲：

.foo { 
    display: block; 
} 
@media (max-width:480px) { 
    .foo { 
    display: none; 
    } 
} 
@media (resolution: 163dpi) { 
    .foo { 
    display: none; 
    } 
} 
@media (-webkit-device-pixel-ratio:0.75) { 
    .foo { 
    display: none; 
    } 
} 
@media screen and (max-width:480px) { 
    .foo { 
    display: none; 
    } 
}

我覺得這有助於保持相關規範的媒體查詢。

來源

2012-05-15 09:05:26

CSS媒體查詢和我的Nexus One（或其他Android手機）

回答

相關問題