Trouble making a web app mobile-ready

[FordGT90Concept]

http://fordgt90concept.homeip.net/SleepCalculator

It all works fine but when I open it on Windows Phone, it uses less than 10% of the screen. I have to manually zoom in on the form to use it. I want it to open without having to zoom. Any ideas?

CSS is at: http://fordgt90concept.homeip.net/SleepCalculator/Main.css

I've tried searching the internet for a solution and none of the hits seemed relevant/applicable.

 

[BiggieShady]

I suggest you read this :

http://opensourcehacker.com/2012/01/09/styling-html-forms-for-mobile-screens-mobilizing-websites-with-responsive-design-and-html5-part-7/

This section talks about styling forms for mobile browsers.

 

[FordGT90Concept]

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

Seemed to help a lot but it can be even better.

 

[FordGT90Concept]

I got it figured out using this:
http://blogs.msdn.com/b/iemobile/archive/2010/11/22/the-ie-mobile-viewport-on-windows-phone-7.aspx

Apparently the minimum the WP7 browser supports is 320 pixels wide. My form was at about 200 pixels. I increased the fonts and size of input boxes to fill the 320 space in addition to the viewport command to make it work.


Edit: With the viewport in, it wouldn't scale to the horizontal size so I removed it. Now, all it has is:

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

It appears to be working as expected in vertical and horizontal modes.

 

[BiggieShady]

I got it figured out using this:
http://blogs.msdn.com/b/iemobile/archive/2010/11/22/the-ie-mobile-viewport-on-windows-phone-7.aspx

Nice you can even handle different screen sizes with completely different *.css files using media query :

<link media="only screen and (min-device-width: 0px) and (max-device-width:800px)" href="mobile.css" type="text/css" rel="stylesheet" />

<link media="only screen and (min-device-width: 801px) and (max-device-width:9999px)" href="regular.css" type="text/css" rel="stylesheet" />

 

[FordGT90Concept]

Friend of mine tells me it doesn't look very good on iPhone so my fixes only apply to Windows Phone. MobileOptimized is apparently an IE only thing.


The problem with viewport is that width doesn't take into account horizontal and vertical renders. Chrome and Safari use horizontal-scale and vertical-scale to account for that whereas IE doesn't have those and instead uses the MobileOptimized parameter where it automatically calculates the scale for both perspectives. IMO, Microsoft has it right. Apple/Google/Mozilla should adapt MobileOptimized and abandon viewport.