Ширина мобильной страницы jQuery слишком широкая...

Я работаю над созданием страниц для мобильных устройств с помощью jQuery Mobile.

Вот основной шаблон страницы, который я использую:

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="utf-8" />
  <title>Test Page</title>

  <link rel="stylesheet" 
    href="#" onclick="location.href='http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css'; return false;" />
  <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
  <script src="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.js">
    </script>  
</head>

<body>
  <div data-role="page">    
    <div data-role="header" data-theme="b">
      <h1>Page Title</h1>
    </div>

    <div data-role="content">         
      <div data-role="content" data-theme="a">
        Page Content
      </div>
    </div>
  </div>
</body>

</html>

Когда я пытаюсь просмотреть это на мобильном телефоне (Samsung Galaxy, iPhone и т.д.), ширина страницы слишком велика (принудительная прокрутка на устройствах с малым разрешением или очень маленький текст на устройствах с более высоким разрешением).

Может ли кто-нибудь сказать мне, что я делаю неправильно?

Благодарственные!

Ответы

Ответ 1

попробуйте добавить это в голову

<head>
.....
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>

также достаточно одного <div data-role="content"> ... </div>

Ответ 2

Вам нужно добавить тег meta viewport в голову, чтобы установить ширину страницы в ширину устройства. Он описывается в сообщениях в блоге на jquerymobile и обновленных документах:

jquerymobile.com/test/

Ответ 3

Я думаю, что несколько data-role="content" вызывают проблемы с дизайном. Анатомия страницы не использует несколько контентов data-role и шаблон не является.

Ответ 4

Вероятно, это связано с вашим CSS. Проверьте ширину и высоту <body>.

Для достижения наилучших результатов вы должны использовать запросы на мультимедийные запросы CSS и проверить разрешение экрана, имея в виду другой стиль в зависимости от пользовательского экрана.

Для дальнейшего чтения:

http://www.w3.org/TR/css3-mediaqueries/

Ответ 5

Это может иметь какое-то отношение к <div data-role="content">.

Не уверен, что у вас может быть два из них на странице.

<div data-role="content"> 

        <div data-role="content" data-theme="a">
            Page Content
        </div>

    </div>

Документы не предполагают, что может быть больше одного: http://jquerymobile.com/demos/1.0b1/#/demos/1.0b1/docs/pages/docs-pages.html