Responsive design - how to get screen size/pixels


#1

Our app displays 1 column on phone portrait, 2 columns on phone landscape, 4 columns
on ipad mini, 8 columns on Nexus 10" tablet. i.e. currently when the number of columns is specified in a variable.

Question? How can the screen size and pixels be obtained for Apple and Android phone/tablet devices?

Once this information is available our app can then easily set the number of columns to use for the respective device.


#2

Have you tried CSS media queries?
Examples for some devices can be found here:


#3

You can use JavaScript’s window.screen.height, window.screen.width and window.devicePixelRatio to get basic screen dimensions for the device’s web browser / web view


#4

Thanks to both of you for your helpful suggestions.


#5

i use vw + vh in the css works pretty well