Android iphone和glaxy s3 css媒体查询在同一css中无法正常工作

我在css文件中尝试了以下css媒体查询，以调整div中2个图像的大小和位置。但是，即使我在媒体查询中给出了正确的参数，它也无法正常工作。我正在创建针对Iphone blackberry、android和windows设备的移动网页（HTML5、css、JS）

我对s3的css媒体查询如下

  @media only screen and (device-width:360px) and (device-height:640px) and (-webkit-min-device-pixel-ratio : 2) and (orientation : portrait) 
  {
 #image1{height:45%;width:42%;margin-left:2%;margin-top:2%;float:left;}

  #image2{height:55%;width:55%;margin-right:0px;margin-    top:0;float:right;position:relative;z-index:3;}
   }   

我对iPhone3Gen的css媒体查询如下

  @media only screen and (device-width:320px) and (device-height:480px) and (-webkit-min-device-pixel-ratio : 2) and (orientation : portrait) 
  {
 #image1{height:77%;width:42%;margin-left:2%;margin-top:2%;float:left;}

  #image2{height:100%;width:55%;margin-right:0px;margin-    top:0;float:right;position:relative;z-index:3;}
   } 

我现在面临的问题是在iPhone3中，GalaxyS3的css正在加载。我也尝试了s3的代码

   @media only screen and (min-device-width:720px) and (max-device-width:1280px) and (-webkit-min-device-pixel-ratio : 2) and (orientation : portrait) 
  {
 #image1{height:45%;width:42%;margin-left:2%;margin-top:2%;float:left;}

  #image2{height:55%;width:55%;margin-right:0px;margin-    top:0;float:right;position:relative;z-index:3;}
   }  

不幸的是，结果在iphone上是一样的。我应该怎么做呢？有没有什么好的参考资料可以用来针对使用CSS的多个移动平台