android - iphone and glaxy s3 css media query together in same css not working properly -


i tried following css media queries in css file adjusting size , position of 2 images in div.but not working ,eventhough have given correct parameters in media query.i creating mobile webpage (html5,css,js) targetting on iphone blackberry,android & windows devices.

my css media query s3 follows..

  @media screen , (device-width:360px) , (device-height:640px) , (-webkit-min-device-pixel-ratio : 2) , (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;}    }    

my css media query iphone 3 gen follows

  @media screen , (device-width:320px) , (device-height:480px) , (-webkit-min-device-pixel-ratio : 2) , (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;}    }  

the problem facing here in iphone 3 css galaxy s3 getting loaded. tried code s3 ,

   @media screen , (min-device-width:720px) , (max-device-width:1280px) , (-webkit-min-device-pixel-ratio : 2) , (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;}    }   

sadly result same in iphone .what should here.is there references targetting multiple mobile platform css


Comments

Popular posts from this blog

php - Calling a template part from a post -

Firefox SVG shape not printing when it has stroke -

How to mention the localhost in android -