Блог

Главная - Вопросы по программированию - Какой CSS-код я использую, чтобы моя веб-страница заполнила экран на iPhone или Android?

Какой CSS-код я использую, чтобы моя веб-страница заполнила экран на iPhone или Android?

#android #iphone #html #css #rendering

#Android #iPhone #HTML #css #рендеринг

Вопрос:

У меня есть HTML-код ниже. Я установил ширину основного текста равной 640 пикселей, что близко к разрешению iPhone. Однако, когда я просматриваю веб-страницу на iPhone или Android, она отображается точно так же, как и в моем веб-браузере — занимает только часть экрана. Текст настолько мал, что им нельзя пользоваться.

Какой CSS-код я использую, чтобы текст оставался обычным в настольных браузерах, но заполнял экран на мобильном устройстве? Я прочитал кое-что об использовании device-width свойств, но я тоже не могу заставить их работать. Что я делаю не так?

Обратите внимание, что я не пытаюсь растянуть красную рамку по всему экрану (например: body: width100%). Я просто не понимаю, почему iPhone не увеличивает масштаб области, для которой установлено то же разрешение, которое оно должно иметь.

HTML-код: 

 <style>
    body{ width:640px; border: 1px solid red; }
</style>

</head>
<body>
Hello World
</body>
</html>

Фактический результат:

actual1.jpg

Желаемый результат:

desired.jpg

Комментарии:

1. используйте медиа-запросы — Адаптивный веб-дизайн

2. можете ли вы привести пример или как это сделать, или предоставить ссылку?

Ответ №1:

Поместите это в свой тег head:

 <meta name="viewport" content="width=480">

Комментарии:

1. это идеально. у вас есть какие-нибудь хорошие ссылки на статьи / руководства по этому и связанным с ним приемам?

Ответ №2:

Чтобы увеличить масштаб страницы на iPhone, вы можете использовать мета-тег viewport. Вы можете установить масштаб 1.0, чтобы Mobile Safari точно увеличивал масштаб вашего контента, независимо от его фактического размера.

Вот некоторая документация по различным способам настройки области просмотра: http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html

Ответ №3:

Вы пробовали body { width:100%; border: 1px solid red; } ?

Комментарии:

1. да, но проблема в том, что текст действительно маленький. Я хочу, чтобы ширина этого поля составляла всего 640 пикселей или около того, но я чувствую, что iPhone должен увеличить его.

Ответ №4:

Для этого вам придется использовать медиа-запросы.
http://www.alistapart.com/articles/responsive-web-design/
Пример: http://www.alistapart.com/d/responsive-web-design/ex/ex-site-FINAL.html (Измените размер страницы)

Казалось бы, простое руководство: http://coding.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

Если вы создаете веб-приложение для iphone, вам действительно стоит взглянуть на PhoneGap. Если вы чувствуете себя немного предприимчивым, это действительно довольно просто в использовании.