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
Post a Comment