I'm new to developing sites for mobile devices and looking for some insight from those that know more than I do. Since starting this project I have learned that there are a lot of differences between the iphone and the Android, which I believe is mostly due to the pixel density of the devices. I have incorporated some device queries into my CSS to determine the pixel density of the user's device before the pages are displayed.
I am continuing to try to tweak the CSS to adjust for the different variables on various devices, but what works on one does not work on another (ie: font size, line height, etc).
My question is this...what are the variables that determine the way my site is displayed on different devices and operating systems? I know of only one and that is pixel density. Are there others, aside from device width and height? Does aspect ratio need to be targeted?
Any insight you can give me is greatly appreciated.
The site I am working on can be viewed at http://m.usci.westondev.com.
To determine how the site looks on different devices, you need to set devices breakpoints
a good start is media queries like bellow
/* 600px/16px = 37.5em */
@media all and (min-width: 37.5em) {
...
}
/* 940px/16px = 58.75em */
@media all and (min-width: 58.75em) {
...
}
/* 1300px/16px = 81.25em */
@media all and (min-width: 81.25em) {
...
}
a more detail tutorial can be found here and this answers also give some pretty