Я работаю над созданием страниц для мобильных устройств с помощью jQuery Mobile.
Вот основной шаблон страницы, который я использую:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8" /> <title>Test Page</title> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b1/jquery.mobile-1.0b1.min.css" /> <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 и т. д.) ширина страницы слишком велика (принудительная прокрутка на устройствах с небольшим разрешением или очень маленький текст на устройствах с большим разрешением.)
Может кто-нибудь сказать мне, что я делаю неправильно?
Спасибо!
попробуйте добавить это в голову
<head> ..... <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> </head>
также достаточно одного <div data-role="content"> ... </div>
<div data-role="content"> ... </div>
Вам нужно добавить мета-тег viewport к вашей голове, чтобы установить ширину страницы в ширину устройства. Это описано в сообщениях блога на jquerymobile и в обновленных документах:
jquerymobile.com / тест /
Я думаю, что кратное data-role="content" вызывает проблему стилевого оформления. Анатомия страницы не использует множественное содержание data-role, а шаблон не содержит ни одной.
data-role="content"
data-role
Возможно, это как-то связано с <div data-role="content">.
<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
Вероятно, это как-то связано с вашим CSS. Проверьте ширину и высоту вашего <body>.
<body>
Для достижения наилучших результатов вам следует использовать медиазапросы CSS и проверять разрешение экрана, поэтому их стиль будет отличаться в зависимости от экрана пользователя.
Для дальнейшего чтения:
http://www.w3.org/TR/css3-mediaqueries/