Responsive design - how to get screen size/pixels


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.


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


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


Thanks to both of you for your helpful suggestions.


i use vw + vh in the css works pretty well