Каково разрешение экрана iPhone?
Я знаю, что это спросили, но я все еще соединен.
Я пытаюсь создать очень простую страницу для iPhone: логотип наверху, номер телефона, адрес и BG, который занимает весь экран (без повторений).
Когда я запустил скрипт, который распечатал screenwidth и screenheight, я добрался: 320 пкс * 480 пкс.
Однако, когда я создал отделение тех точных размеров, это является крошечным. Что дает? Должен поле это быть всем размером обнаруженного разрешения не, занимают весь экран?
Так, если я разрабатываю страницу для iPhone, и я хочу, чтобы он занял весь экран в Safari (на iPhone) точно, для какого разрешения я должен разрабатывать?
Я использую iPhone 3G рабочий iOS 4.0 в качестве моего устройства тестирования.
Спасибо за любую справку.
5 ответов
Вам нужен метатег viewport, чтобы сообщить iPhone, что ваш сайт специально разработан для него.
Используйте его:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
Вы можете изменить параметры масштабирования, если вам нужно, чтобы пользователь мог увеличить изображение и т.д..
Также, если вы хотите, чтобы ваше приложение работало и в ландшафтном режиме, вы можете установить ширину 100%.
#wrapper {
width: 100%
max-width: 480px;
}
Проблема в том, что iPhone пытается масштабировать его самостоятельно. Если вы поместите этот тег в начало страницы, он скажет телефону: "Не волнуйся, я сам справлюсь с масштабированием содержимого" и заставит экран принять соотношение 1:1.
<meta name = "viewport" content="inital-scale=1.0">
Это зависит от того, какой iPhone. Оригинальный, 3G и 3GS имеют разрешение 320x480, а 4.0 - вдвое больше, 640x960. Если вы разрабатываете дизайн для более высокого разрешения, старые телефоны уменьшат его на 50%, и он будет выглядеть нормально.
Возможно, вы также захотите рассмотреть возможность использования медиа-запросов для оптимизации работы iPhone. Подробнее об этом в этой статье блога.
вы, вероятно, захотите использовать все эти
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />
<!-- this one tells Mobile Safari to hide the Address Bar and make the app fullscreen -->
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
Остальные ответы верны, что вам нужно настроить viewport.
Официальная документация apple по этому вопросу находится здесь:
Стоит пролистать весь документ - помимо многого описания тега viewport (с картинками!), в нем есть много других полезных советов по настройке веб-страниц для iphone.