專門寫給 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.