A-A+

Windows Phone 7 的 IE CSS 條件判斷

專門寫給 Windows Phone7 的裝置用的語法, 要用下述語法包起來:


<!--[if IEMobile]>
<p>這邊的內容只有在 Windows Phone 7 的 IE Mobile 會呈現出來</p>
<![endif]—>
<![if !IEMobile]>
<p>All other browsers</p>
<![endif]>

將 一般CSS 與 手機版CSS 混合的狀況, 要如何對 "特定寬度" 處理?


<!—Mobile -->
<link rel="stylesheet" type="text/css" href="mobile.css" media="screen and (max-device-width: 480px)" />
<!--[if IEMobile 7]>
<link rel="stylesheet" type="text/css" href="mobile.css" media="screen"  />
<![endif]-->


@media screen and (max-device-width: 480px) { div {border:none;}}

 

It's a bit more en vogue to handle mobile styling via media queries, which I generally agree is a better way to handle things (browser agnostic), but has the classic problem of a the browser needing to downloading resources it doesn't need (e.g. CSS for desktop version when on a mobile device).

You know what would be super radical? If we could do media queries within conditional comments.


<!-- [if (min-device-width: 481px)]>
<![endif]—>

That would combine the syntax and power of media queries, with the ability of conditional comments to load only the specific resources we need, staying streamlined in terms of bandwidth.

標籤: