1

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

Frank G.
  • 1,519
  • 7
  • 25
  • 43
  • Possible duplicate of [Responsive web design is working on desktop but not on mobile device](https://stackoverflow.com/questions/14304494/responsive-web-design-is-working-on-desktop-but-not-on-mobile-device) – showdev Dec 12 '17 at 20:08

2 Answers2

4

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.

Ryan McDonough
  • 9,732
  • 3
  • 55
  • 76
  • That helped for sure. However the site looks odd or weird compared to the site in the browser. Almost looks nothing like the desktop browser. Any reason why that would be? Thanks again!! – Frank G. Jan 18 '13 at 08:22
  • It will do, you need to shrink your browser down to iphone size to see what it will look like, responsive frameworks like jquery mobile change layouts dramatically as the resolution changes, check my answer for a link to help with that. – Ryan McDonough Jan 18 '13 at 08:26
  • Well the site in the desktop browse is what I want the mobile site to look like. Right now the mobile site on my iphone looks terrible. Doesn't even show the header image at the top. Take a look at the desktop site and iphone and see for yourself. http://www.rodgersgroupllc.com/mobile – Frank G. Jan 18 '13 at 08:34
  • 1
    This is because the banner class is within a section of CSS with a min-width:480px, the iphone verticial display width is less than 480px. So when the width is < 480 the banner dissapears. – Ryan McDonough Jan 18 '13 at 08:45
  • Can you tell me what the Vertical & Horizontal Display width is for the iphone? Thanks again!! BTW you are correct when vert it shows the image when hor. it doesn't but it even takes out the border lines. – Frank G. Jan 18 '13 at 08:50
2

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

Tim S.
  • 13,597
  • 7
  • 46
  • 72
  • That helped for sure. However the site looks odd or weird compared to the site in the browser. Almost looks nothing like the desktop browser. Any reason why that would be? Thanks again!! – Frank G. Jan 18 '13 at 08:24