jQuery для мобильных устройств Android Zoom - PullRequest
Новая
       24

jQuery для мобильных устройств Android Zoom

1 голос
/ 20 марта 2012

Итак, я пишу приложение rails / jQM, которое позволяет пользователю просматривать карту.Вид карты отображается со строкой заголовка, которая включает в себя кнопку возврата и домой.Когда я тестирую на своем Android HTC, все это выглядит хорошо, пока я не пытаюсь увеличить карту.Страница, кажется, пытается увеличить масштаб, но страница прокручивается вниз, изображение того же размера, а панель заголовка и кнопки увеличиваются и в итоге занимают гораздо большую часть страницы.

Я погуглил и не смог найти ничего, что казалось бы решением этой проблемы, поэтому я решил спросить здесь.Спасибо за помощь.

Вот источник страницы, о которой я говорю: 

<html class="ui-mobile">
<head>
      <base href="SOMEBASE TAG">
    <title>TapWalk Mobile App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!--jQuery Mobile scripts and css --> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.css">
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script>

    <script type="text/javascript" charset="utf-8"> 
    $(document).bind("mobileinit", function () {
 $.mobile.ajaxEnabled = false;
    });
    </script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0/jquery.mobile-1.0.min.js"></script>
    <script src="/javascripts/favorites.js?1332173708" type="text/javascript"></script>
    <link href="/stylesheets/master.css?1332173708" media="screen" rel="stylesheet" type="text/css">
    <meta name="csrf-param" content="authenticity_token">
<meta name="csrf-token" content="EGjhIg5lsONYcbm80lhvCY94Xgj8g9zu719phV2VSv8=">

      <script src="/javascripts/prod_analytics.js?1332173708" type="text/javascript"></script> 
  </head>
  <body class="ui-mobile-viewport">
    <div data-role="page" id="site-wrapper" data-url="site-wrapper" tabindex="0" class="ui-page ui-body-c ui-page-active" style="min-height: 972px; ">
      <div id="mobile_header"> 
 <div data-role="header" class="ui-header ui-bar-a" role="banner">
     <a href="SOME LINK BACK" class="ui-btn-left ui-btn ui-btn-corner-all ui-shadow ui-btn-up-a" data-theme="a"><span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true"><span class="ui-btn-text">Back</span></span></a> 

  <h1 class="ui-title" tabindex="0" role="heading" aria-level="1"> Map  </h1>

     <a href="SOME HOME LINK" class="ui-btn-right ui-btn ui-btn-up-a ui-btn-corner-all ui-shadow" data-theme="a"><span class="ui-btn-inner ui-btn-corner-all" aria-hidden="true"><span class="ui-btn-text">Home</span></span></a> 
 </div>
      </div>

      <div id="mobile_content">
   <img src="IMG PATH" alt="Map" height="100%" width="100%">

      </div>

      <div id="mobile_footer">

      </div>

    </div>


<div class="ui-loader ui-body-a ui-corner-all" style="top: 444px; "><span class="ui-icon ui-icon-loading spin"></span><h1>loading</h1></div></body></html>
...