Search jQuery

jQuery Forum

How to make content fit to iPhone window?

in jQuery Mobile • 9 years ago

When I switched from released alpha4 to git edge source code, I found every web page created in jquery mobile is much wider than any iPhone can see. It works fine for iPad but not for iPhone (I checked iPhone 3GS and iPhone4). Why it is not resized to the window available on iPhone? How to change it? Currently every page opened in iPhone is too big.

Replies(6)

mikejosep..

Re: How to make content fit to iPhone window?

9 years ago

I'm having the same problem... Just to clarify the issue, I will provide some code and screenshots to hopefully narrow things down for the team (I hope somebody from the team sees this!!)

Let's start with the code used from the Boiler Plate Template demo, found here:

http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/pages/page-template.html

That code is in a file on my local server called jquerymobile.html and is as follows:

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js"></script>
</head>
<body>
<div data-role="page">
<div data-role="header">
<h1>Page Title</h1>
</div>
<div data-role="content">
<p>Page content goes here.</p>
</div>
<div data-role="footer">
<h4>Page Footer</h4>
</div>
</div>
</body>
</html>

The Problem:

It unfortunately renders like this on my iPhone 3GS (looks the same way on my wife's iPhone 4):

Temporary Work-around:

If I switch the Jquery/CSS references back to an older version, as follows, it seems to work for me:

The css/script code changed:

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.css" />
<script src="http://code.jquery.com/jquery-1.4.4.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a2/jquery.mobile-1.0a2.min.js"></script>

The new output using the older code references:

The obvious drawback: I don't really like using this old code in my new development. I'm not using any advanced functionality, but who knows what headaches I'm creating for myself by doing so... it looks good for my client as of now, but I fear what lies ahead if I can't get this fixed with the current version of the jquery mobile libraries...

Other notes/observations

The page looks as expected on the iPad as seen below... but I'm wondering, does the jquery mobile on my iPhone think it's rendering on an ipad and therefore uses the wrong resolution?:

This problem only seems to be affecting the Safari-Mobile (and other browsers like atomic, which use it to render pages). If I use the problematic Beta 1 code on a 3rd party browser called, "Atomic Lite," I experience the same problem, but Opera Mini must use its own rendering engine apart from Safari (or it reports a different User Agent) because it renders correctly using the newer beta 1 code as seen below:

I hope this additional information doesn't go unnoticed and hope it helps the team in fixing this problem. In the meanwhile, if anyone has found another work around, which uses the newer version of jquery mobile, I'd love to hear about it.

Thank you!

mandusm

Re: How to make content fit to iPhone window?

9 years ago

It seems like the latest version of JQuery Mobile no longer adds

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

Into the <head></head> section of the HTML.

I am unsure why it's not doing this, but You can temporarily fix your pages by adding that line to your Pages.

mikejosep..

Re: Re: How to make content fit to iPhone window?

9 years ago

Thank you for your quick response! That did the trick!!

jcesarmob..

Re: How to make content fit to iPhone window?

9 years ago

You should read the blog frequently, or at least before updating your version, to be aware of the modifications.

Dynamic injected viewport meta tag: Support dropped

On a related topic, we deprecated injecting the viewport meta tag back in alpha 4 due to Windows Phone 7’s lack of support for dynamically injected viewport elements. In Beta 1, we removed the dynamic viewport support from the codebase in preparation for beta so if you haven’t switched to writing this tag into your markup, please do that now in preparation for Beta. If you page is zoomed out to a wide width when you upgrade, you’ll need to add a meta viewport tag to each page to control the zoom level. See the boilerplate template page in the docs for an example.

mikejosep..

Re: Re: How to make content fit to iPhone window?

9 years ago

I will add the blog to my Google Reader, though admittedly everyone wants me to keep up with their blog that it's hard to keep up...

I appreciate the link to the boiler plate demo page you provided, however the source code visible on the following page, does not match that with the link you provided... and as of now still matches the the boiler plate code I pasted in my initial inquiry:

http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/pages/docs-pages.html

Thanks again to the Administrator who got back to me on this!