I’m starting on a Web App and targeting mobiles and tablets.
My app will consist of a full page display, with no ability to scroll (e.g. all content will need to fit full screen on these devices).
I’ll have four different views: – Mobile Phone: Portrait – Mobile Phone: Landscape – Tablet: Portrait – Tablet: Landscape
So I thought I need to identify if it’s a mobile or a tablet and get their resolution to be able to calculate the different elements’ sizes. I also need to figure out if it’s portrait or landscape.
In addition I would like to display either phone or tablet size on a computer (centered on the screen) depending on how large size the web browser is.
Is there anybody who can help me out with some code to accomplish this? Or maybe point me to a framework/github that supports this?
Thanx. Eirik
You can use media queries and orientation in your css
@media only screen and (min-device-width: /*min width*/) and
(max-device-width: /*max width*/) and (orientation: /*portrait or landscape*/)
{
/* your css */
}