css - Cordova application targetting S5 and Moto E -
i have application runs in portrait mode. want load css depending upon screen sizes s5 , smaller 1 moto e.
homescreenstyle , configurecss s5 homescreenstyleiphone , iphoneconfigure moto e
device pixel width pixel height css pixel ratio device-width device-height
moto e 960 540 2 480 270
galaxy s5 1920 1080 3 640 360
i tried different variations css not working,
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"> <link media="screen , (max-device-width: 350px)" href="assets/css/homescreenstyleiphone.css" rel="stylesheet"> <link media="screen , (min-device-width:360px)" href="assets/css/homescreenstyle.css" rel="stylesheet"> <link media="screen , (max-device-width: 350px)" href="assets/newcss/iphoneconfigure.css" rel="stylesheet"> <link media="screen , (min-device-width:360px)" href="assets/newcss/configure.css" rel="stylesheet">
please help. unable figure out exact width.
in css file use width , height of element in percentage value, example
div.container { width:100%; height:100%; position:absolute; }
it automatically fit element according device width, no need of more css files
Comments
Post a Comment