CODEWITHSUNDEEP
jquerycssjquery-mobile
Frank G.
Frank G.

Reputation: 1579

Mobile Website doesn't Look Mobile

I am new to Jquery's Mobile site but I made this mobile website using Jquery. But when I view it on my Iphone 4s it doesn't load proper like a mobile site. Instead it looks like a desktop site far away. Could someone please tell me what I did wrong and how to fix it?

You can find the website here: http://www.rodgersgroupllc.com/mobile/

Thanks,

Frank

Upvotes: 1

Views: 208

Answers (2)

Ryan McDonough
Ryan McDonough

Reputation: 10012

The only thing you are missing the meta tag for the viewport scaling.

<meta name="viewport" content="initial-scale=1.0">

Other than that everything is fine.

Check out this JS bookmark for seeing how your design will look in an iphone or other mobile device quickly:

http://responsive.victorcoulon.fr/

For iPhone resolutions, the resolutions can be found here: iPhone resoltions, note despite the iphone 4 actual resolution, pixel density is double so the resolution is halfed.

Upvotes: 4

Tim S.
Tim S.

Reputation: 13853

Try adding this line to your head tag:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

This will set your viewport to a normal scale. Most mobile browsers scale the page on default.

The width property is set to device-width, forcing the width of the window to the same size as the device width (doh!). initial-scale sets the scale when the browser opens the page. Finally, maximum-scale=1 disallows the user to zoom out.

For more info: https://developer.mozilla.org/en-US/docs/Mobile/Viewport_meta_tag

Upvotes: 2

Related Questions