Windows PhoneをターゲットとするCSSメディアクエリ

Question

私は携帯電話をターゲットにするために以下を使用していますが、他のすべてのデバイスは機能していますが、ウィンドウの電話機の位置：relativeはUI全体を壊します。

li { 
    @media screen and (max-width: 480px) { 
     position: relative; 
     top: 4px; 
     zoom: 0.5; 
     width: 46px; 
    } 
} 

どのようにして、メディアクエリを使用してWindows Phoneのみをターゲットにすることができますか。

私は以下の解決策を経験していますが、条件付きのCSSタグを使用しており、私のプロジェクトではLESSを使用しています。

CSS to target Windows Phone 7

、おそらく将来のデバイスに変更される可能性があるソリューションのターゲットDPI、以下。したがって、これは私の問題を解決しません。特定のデバイスのスタイルを適用するとき

@media query to target hi-res Windows Phone 8+?

Answer 1

あなたの入力に感謝Zitscher。 しかし、私はこれは私が探していたものである

@media screen and (-ms-high-contrast: active) and (max-width: 30em), 
(-ms-high-contrast: none) and (max-width: 30em) { 
     width: 130px !important; 
     padding-left:18px !important; 
} 

（これは誰かに役立つかもしれない）私のため http://blog.simian.co/en/tips/internet-explorer-10-mobile-css-hacks-windows-phone/ を働いていたハックを発見しました。 ご協力いただきありがとうございます。

Answer 2

私はメディアクエリのみに依存しません。この例のように、チェックライブラリis.js（http://is.js.org/#windowsPhone）を使用してみてください：

if(is.windowsPhone()) { 
    $('body').addClass('is-windows-phone') 
} 

今、あなたのスタイルであなたはこのような何かを行うことができます：

body.is-windows-phone ul#fancyWindowsPhoneList li { 
    position: relative; 
    top: 4px; 
    zoom: 0.5; 
    width: 46px; 
} 

は、この情報がお役に立てば幸い！