JQuery Mobile Device Scaling

Question

I am using JQuery Mobile and I am having trouble with the scaling from my browser to my iPhone.

When I load it on a browser (safari) it shrinks and expands just fine. However when I load it on my iPhone it doesn't scale. It allows you to scroll left and right when it shouldn't.

Is there something I am supposed to add to make it scale down on recognize that it's a mobile device.

Here is my current html.

    <head>
        <title>Page Title</title>
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" href="http://www.domain.com/css/jquery.mobile-1.0b1.min.css" />
        <link rel="stylesheet" href="http://www.domain.com/css/base.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>

        <body>
            <!-- Start of first page -->
            <div data-role="page">
                <div data-role="header">
                    <div id="header">
                        <ul>
                            <li>
                                <div><a href="logout.php">Logout</a>
                                </div>
                            </li>
                            <li style="float:right;">
                                <div><a href="new.php">New</a>
                                </div>
                            </li>
                             <h1 align="center">Title</h1>

                        </ul>
                        <div id="clear"></div>
                    </div>
                </div>
                <!-- /header -->
                <div id="stream">
                    <div id="stream_story">
                        <ul style="width:100%">
                            <li>
                                <img src="" />
                            </li>
                            <li style="float:right;">></li>
                            <li style="width:75%;margin-bottom:10px;margin-left:5px;">Content
                                <br/><span>Content</span>
                            </li>
                        </ul>
                    </div>
                    <div id="clear"></div>
                    <hr/>
                </div>
                <!-- /content -->
            </div>
            <!-- /page -->
        </body>
    </body>

</html>

try playing with the meta tag: – Phill Pafford Jun 23 '11 at 13:13 — Phill Pafford, Jun 23 '11 at 13:13

Jasper · Answer 1 · 2012-01-12T18:39:10.587

I had problems with the iPhone viewport and JQuery-Mobile as well, I ended up with the following solution.

Add a meta tag that sets the height and width to the device-height/device-width (you can allow the user to zoom by changing the maximum-scale to something above 1 however zoom is disabled in the following example, I believe Mobile Safari allows a value up to 10):

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

As the user changes the orientation on iPhone I noticed some strange behaviors with re-scaling and added white-space so I used the following code:

    //check the navigator.userAgent string to detect if the user is using an iPhone
    if (navigator.userAgent.match(/iPhone/i)) {

        //cache the viewport tag if the user is using an iPhone
        var $viewport = $('head').children('meta[name="viewport"]');

        //bind an event handler to the window object for the orientationchange event
        $(window).bind('orientationchange', function() {
            if (window.orientation == 90 || window.orientation == -90 || window.orientation == 270) {

                //landscape
                $viewport.attr('content', 'height=device-width,width=device-height,initial-scale=1.0,maximum-scale=1.0');
            } else {

                //portrait
                $viewport.attr('content', 'height=device-height,width=device-width,initial-scale=1.0,maximum-scale=1.0');
            }

        //trigger an orientationchange event on the window object to initialize this code (basically in-case the user opens the page in landscape mode)
        }).trigger('orientationchange');
    }

The if/then statement in the event handler checks for which orientation the user has changed to (90, -90, and 270 are all values I've seen for landscape) and the $viewport.attr('content',... lines just switch the height and width values in the viewport tag.

This is not working for me in jQuer Mobile 1.0 RC2. - Anyone else had some luck with this solution/version? — Smamatti, Nov 09 '11 at 14:06

score 1 · Answer 2 · answered Jun 05 '12 at 21:35

In Jquery Mobile 1.1.0, the above answer only seems to work in portrait orientation for me. I searched around and found this version of the meta tag, which (in my case) worked in both orientations, without need for any javascript:

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

(Specifies device width, but not the height.)

Source: http://www.wintellect.com/cs/blogs/rrobinson/archive/2011/07/25/how-to-scale-a-jquery-mobile-site-for-ios.aspx

JQuery Mobile Device Scaling

2 Answers2

Linked