Страницы jQuery для мобильных устройств в Safari mobile очень большие - PullRequest
Новая
       7

Страницы jQuery для мобильных устройств в Safari mobile очень большие

2 голосов
/ 17 июня 2011

Я пытаюсь исправить проблему с отображением на моем мобильном сайте jQuery. Он отлично смотрится в других браузерах, но при просмотре на iPhone в Safari все становится очень большим, и вы не можете сжать страницу в крайнем случае.

Например, простой элемент h2 занимает большую часть экрана. 

    <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>

Ответы [ 2 ]

3 голосов
/ 14 июля 2011

Ты почти у цели.Попробуйте установить начальную шкалу, которая должна сработать.

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

0 голосов
/ 17 июня 2011
...