適用於移動瀏覽器的瀏覽器專用CSS

如何在Android上爲不同的移動瀏覽器（如Opera Mobile和Firefox）製作媒體查詢？當我使用某些瀏覽器時，CSS真的會中斷。適用於移動瀏覽器的瀏覽器專用CSS

2011-07-31 needhelpwithcsshere

定義，我認爲你的問題實在是太寬。例如，http://dev.opera.com/articles/tags/media%20queries/上有許多關於媒體查詢的文章，但如果您以特定的更具體的術語發佈您的問題，這可能是最好的。 – andreasbovens

不能直接機智CSS，但你可以使用

// target mobile devices 
@media only screen and (max-device-width: 480px) { 
    body { max-width: 100%; } 
} 

// recent Webkit-specific media query to target the iPhone 4's high-resolution Retina display 
@media only screen and (-webkit-min-device-pixel-ratio: 2) { 
    // CSS goes here 
} 

// should technically achieve a similar result to the above query, 
// targeting based on screen resolution (the iPhone 4 has 326 ppi/dpi) 
@media only screen and (min-resolution: 300dpi) { 
    // CSS goes here 
}

，你也可以在HTML

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="css/mobile.css" type="text/css" /> 
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" href="css/mobile.css" type="text/css" /> 
<link rel="stylesheet" media="only screen and (min-resolution: 300dpi)" href="css/mobile.css" type="text/css" />

來源

2011-08-07 01:47:27 coto

適用於移動瀏覽器的瀏覽器專用CSS

回答

相關問題