В этой статье мы рассмотрим базовые приемы верстки страницы под браузер iPod’а Touch и iPhone.
Конечно, ваш сайт в любом случае будет смотреться хорошо в этих мобильных устройствах, так как только Apple постарался сделать полноценный браузер для своих iPod Touch и iPhone.
Однако иногда лучше иметь две версии сайта: одну для мобильных устройств – облегченную, одну для браузеров обычных персональных компьютеров. Облегченная версия сайта может не включать различных «тяжелых» элементов типа flash-роликов, больших изображений, java-элементов и т.п. Интересно, что при разработке облегченной версии сайта для iPhone и iPod Touch, можно определить, пришел пользователь именно с этих устройств или нет.
Как известно, в этих устройствах есть два режима отображения: landscape и portrait. Это можно определить при помощи небольшого JavaScript-скрипта.
Что бы посмотреть как это работает - зайдите через браузер iPod’а или iPhone по адресу:
Для начала рассмотрим сам скрипт определения устройства:
- <script type=”text/javascript”>
- var browser=navigator.userAgent.toLowerCase();
- var users_browser = ((browser.indexOf(’iPhone’)!=-1);
- if (users_browser)
- {
- document.location.href=’www.yourdomain.com/iphone_index.html’;
- }
- </script>
Пояснения:
- Строка 2 – создаем переменную, в которую записываем тип браузера, с которого пришел посетитель;
- Строка 3 – проверяем, присутствует ли в типе браузера строка iPhone и присваиваем значение переменной;
- Строка 4-7 – если посетитель зашел с iPhone или iPod Touch, перекидываем на специальную страницу.
Давайте пошагово рассмотрим, как правильно сверстать страницу, какие стили и скрипты нам нужны.
Шаг 1. HTML
Итак, мы знаем, как направить пользователя на страницу, специально созданную под браузер iPod или iPhone. Теперь рассмотрим HTML код под эти устройства, он немного отличается от стандартного кода XHTML:
- <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
- <html xmlns=”http://www.w3.org/1999/xhtml” xml:lang=”en” lang=”en”>
- <head>
- <meta name=”viewport” content=”width=device-width; initial-scale=1.0; maximum-scale=1.0;”>
- <title>My iPhone Page</title>
- <link rel=”apple-touch-icon” href=”images/myiphone_ico.png”/>
- <link rel=”StyleSheet” href=”css/iphone_portrait.css” type=”text/css” media=”screen” id=”orient_css”>
Пояснения:
- Строка 1-2 – Стандартное описание документа XHTML 1.0;
- Строка 4 – специальный тэг, который определяется устройствами iPhone и iPod. width=device-width – означает, что ширина документа такая же, как и размер окна браузера мобильного устройства. initial-scale=1.0 – с помощью этой переменной мы устанавливаем начальное значение zoom’а страницы. maximum-scale – переменная, которая задает максимальное значение увеличения страницы в браузере устройства;
- Сторка 6 – указывает на путь к иконке вашего сайта. Если пользователь сохранит страницу на домашний экран, именно эта иконка появится на нем;
- Строка 7 – ссылка на стили для страницы. Этому тэгу мы также присвоили уникальный id, так мы сможем обращаться к нему для смены стилей, когда браузер будет менять режим отображения с portrait на landscape и обратно.
Шаг 2. Разметка страницы
Итак, продолжаем дальше писать наш код HTML. В тэг <body> мы добавили обработчик события при смене режима отображения, который вызывает функцию orient() для подгрузки стилей. Саму функцию мы рассмотрим ниже, а пока XHTML:
- </head>
- <body onorientationchange=”orient();”>
- <div id=”wrap”>
- <div id=”header”>
- </div>
- <div id=”content”>
- <p>This is the main content area of the page.
- <p>Using css and javascript we can manipulate any of these divs using an alternate css file. The css files in this project are for landscape and portrait views.</p>
- <p>Some more filler text here to demonstrate the page.</p>
- </div>
- <div id=”bottom”>
- </div>
- </div>
- </body>
- </html>
Шаг 3. Скрипт определения положения
Скрипт вписываем между тэгами <head> и </head>, чтобы он загружался до загрузки страницы:
- <script type=”text/javascript”>
- function orient()
- {
- switch(window.orientation){
- case 0: document.getElementById(”orient_css”).href = “css/iphone_portrait.css”;
- break;
- case -90: document.getElementById(”orient_css”).href = “css/iphone_landscape.css”;
- break;
- 90: document.getElementById(”orient_css”).href = “css/iphone_landscape.css”;
- }
- window.onload = orient();
- </script>
Пояснения:
В функции мы используем оператор выбора switch(window.orientation), который вызывается во время того, как пользователь меняет режим показа браузера и проверяет, какое значение находится в переменной. После чего обращается к элементу по id, заменяя ссылку на таблицу стилей.
Также у нас присутствует строка window.onload = orient();, которая вызывает функцию orient() во время загрузки страницы для определения режима.
Значения window.orientation могут быть: 0 (режим portrait), 90 (режим landscape по ходу часовой стрелки) и -90 (режим landscape против часовой стрелки).
Шаг 4. CSS
Теперь нам нужно добавить таблицы стилей для нашей страницы. Мы создадим два файла таблиц стилей: iphone_portrait.css и iphone_landscape.css. iphone_portrait.css будет нашей таблицей стилей по умолчанию.
iphone_portrait.css:
- body {
- background-color:#333;
- margin-top:-0px;
- margin-left:-0px;
- }
- #wrap {
- overflow:auto;
- width:320px;
- height:480px;
- }
- #header {
- background:url(../images/header.jpg);
- background-repeat:no-repeat;
- height:149px;
- }
- #content {
- background:url(../images/middle.jpg);
- background-repeat:repeat-y;
- margin-top:-5px;
- }
- p {
- margin:5px;
- padding-left:25px;
- width:270px;
- font-size:10px;
- font-family:arial,”san serif”;
- }
- #bottom {
- background:url(../images/bottom_corners.jpg);
- background-repeat:no-repeat;
- height:31px;
- margin-top:-5px;
- }
Код очень простой, но есть несколько моментов, на которые нужно обратить внимание:
- В описании элемента wrap с помощью сторки overflow:auto мы удостоверяемся, что все элементы лежат в <div id=”wrap”> и не выходят за его границы.
- Размер страницы будет 320 на 480 пикселей, это тоже описываем.
Теперь код iphone_landscape.css::
- body {
- background-color:#333;
- margin-top:-0px;
- margin-left:-0px;
- }
- #wrap {
- overflow:auto;
- width:480px;
- height:320px;
- }
- #header {
- background:url(../images/l_header.jpg);
- background-repeat:no-repeat;
- height:149px;
- }
- #content {
- background:url(../images/l_middle.jpg);
- background-repeat:repeat-y;
- margin-top:-5px;
- }
- p {
- margin:5px;
- padding-left:25px;
- width:270px;
- font-size:10px;
- font-family:arial,”san serif”;
- }
- #bottom {
- background:url(../images/l_bottom_corners.jpg);
- background-repeat:no-repeat;
- height:31px;
- margin-top:-5px;
- }
Отличие от предыдущего в том, что мы меняем картинку фона и реверсируем значения ширины и высоты страницы.
На этом все.
Что еще можно сделать?
Итак, мы рассмотрели, как сверстать отдельную страницу под iPhone или iPod Touch, но еще что можно сделать?
Вы можете написать ваше собственное приложение под iPhone или iPod Touch, используя фреймворк. Также помните, что вы можете использовать не только 2 файла таблиц стилей.
Источник:
Файлы:
Перевод: