jQuery mobile pages super large in Safari mobile

Question

I'm trying to fix a display issue on my jQuery mobile site. It looks great in other browsers but when viewed on the iPhone in Safari, everything is super large and you cannot shrink the page with pinch.

For example a simple h2 element takes up most of the screen.

    <meta name="viewport" content="width=device-width; 
          height=device-height; user-scalable=no" />

    <title>Start</title> 

    <meta name="viewport" content="width=device-width; height=device-height; user-scalable=yes" />
    <link rel="stylesheet" href="/static/css/android.css" />
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />

    <script src="https://www.google.com/jsapi?key=ABQIAAAApPeof0WyN6ORT7NeNop5OxQhS8mdepxW5-6qUjpskYmhafYcLRQjyW8D0bRdsydbD1maEkV9aSDKrw" type="text/javascript"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.js"></script>

    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
    <script type="text/javascript">
    // Check for iPhone screen size
    if($.mobile.media("screen and (min-width: 320px)")) {
        // Check for iPhone4 Retina Display
        if($.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)")) {
            $('meta[name=viewport]').attr('content','width=device-width, user-scalable=no,initial-scale=.5, maximum-scale=.5, minimum-scale=.5');
        }
    }

    </script>

</head>
<body>
    <div data-role="page" id="start">

        <div data-role="header" data-theme="a">

            <h1>Start</h1>
        </div><!-- /header -->          

        <div data-role="content" id="content">  
            <h2>Adventure with:</h2>
            <div id="buttons">

                <a href="/mobile/char/ahBkMjBtLW1vcm5pbmdzdGFycg8" data-role="button" target="_blank">Spam Master</a>                   

                <a href="/mobile/char/create" data-role="button" target="_blank">CREATE NEW FOO</a>         
            </div><!-- /buttons -->
        </div><!-- /content -->

    </div><!-- /page -->    

</body>

score 3 · Answer 1 · answered Jul 14 '11 at 11:37

3

You're almost there. Try setting the initial-scale, that should do the trick.

<meta name="viewport" content="width=default-width, initial-scale=1" />

answered Jul 14 '11 at 11:37

Carl-Martin Hellberg

31
1

score 0 · Answer 2 · edited May 23 '17 at 10:33

0

To enable pinch: user-scalable=yes

edited May 23 '17 at 10:33

Community

1
1

answered Jun 17 '11 at 18:22

Phill Pafford

77,927
86
256
378

I must have another issue. Neither changing the meta tag or user-scalable has any effect on the way the site looks in Safari. – Will Curran Jun 17 '11 at 18:38
Updated. There's really nothing to it . . . looks great on FF on Android. – Will Curran Jun 17 '11 at 20:05
what type of iPhone are you testing on? this line stands out for me: $('meta[name=viewport]').attr('content','width=device-width, user-scalable=no,initial-scale=.5, maximum-scale=.5, minimum-scale=.5'); – Phill Pafford Jun 17 '11 at 20:39

jQuery mobile pages super large in Safari mobile

2 Answers2