我该如何实现android和iphone的媒体查询？

Question

我有三组图像。一套我想用于iPhone 4,5＆amp; iPad和我有两套适用于Android手机的图像，一套高分辨率和一套低分辨率。 不确定如何完成此操作。

我正在努力找出最好的方法。我可以以某种方式使用iphone和ipad的一个媒体查询，因为我想使用相同的图像？或者我必须像这样检查iPhone 4和5

    @media only screen and (min-device-width : 320px) and 
    (max-device-width : 568px) and    (orientation : landscape){
       // iPhone 5, load images.
    } 

    @media only screen and (-webkit-min-device-pixel-ratio : 1.5), 
    only screen and (min-device-pixel-ratio : 1.5) {
    // iPhone 4, load the same images.
    }

我可以以某种方式检查它是Android设备还是苹果设备？如果是这样，也许我可以有两个单独的CSS文件，只需加载正确的CSS文件，并在正确的CSS文件中，我将加载正确的图像。我的项目只包含javascript。

非常感谢任何解决这个问题的建议。

Answer 1

MediaQueries很强大，但只能到目前为止。

我发现定位特定用户代理的最佳方式是CssUserAgent.js

它的工作方式与Modernizr类似，但它不是为浏览器功能添加类，而是向html标记添加非常详细的用户代理类。

希望这有帮助。