How to detect screen resolution of mobile device?

Question

I am new to mobile web app development, I wrote a small app in jqueryMobile & asp.net, but I am having problem with screen height, when i test my app in opera emulator then for large screen sizes my app look small in size, is there a way to detect & adjust height & width so it looks like a native app & fills the entire screen.

Answer 1

Try adding the following snippet:

<meta name="viewport" content="width=device-width">

From what you said that should fit your needs.

You can find more info about the viewport meta tag here https://developer.mozilla.org/en/Mobile/Viewport_meta_tag

There are also some other meta tags you might consider.

<meta name="HandheldFriendly" content="True">

<meta name="MobileOptimized" content="320"/>

Most of this I learned from exploring the html5 mobile boilerplate. Which is a rock solid starting point for any mobile application. If you haven't checked it out before I believe it will help you out alot http://html5boilerplate.com/mobile

Answer 2

Without knowing how your css markup looks like try adding the following meta tag:

<meta name="viewport" content="user-scalable=1.0,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0">

This will make sure your page starts in the correct scale (and disallows pinch zoom)

Answer 3

You can read the css trick to make the CSS target screen sizes

http://css-tricks.com/css-media-queries/