CODEWITHSUNDEEP
iphonesafarijquery-mobile
Will Curran
Will Curran

Reputation: 7110

jQuery mobile pages super large in Safari mobile

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>

Upvotes: 2

Views: 5499

Answers (2)

Carl-Martin Hellberg
Carl-Martin Hellberg

Reputation: 31

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

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

Upvotes: 3

Phill Pafford
Phill Pafford

Reputation: 85318

Related:

Yeah I know there is some reading to do ;)

To enable pinch: user-scalable=yes

Upvotes: 0

Related Questions