Сайт созданный для айфона

genn.org в Mac OS X Safari и iPhone Safari

Недавно я рассказал о том, как правильно сделать иконку сайта так, чтобы на айфоне это выглядело очаровательно. Теперь же, на примере genn.org объясню, как я сделал так, чтобы мой флешевый сайт на айфоне показывал хоть что-то.

1. <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
2. <link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="css/iphone.css" />

Первая строка помогает Сафари в айфоне найти нужную иконку по указанному адресу. Вторая строка подсказывает, какой css-файл использовать для отображения. Размер экрана айфона 320 х 480 пикселей, так что в условии и выставлена максимальная ширина.

xHTML выглядит так:

1. <div id="magic">
2. <!-- тут флеш -->
3. </div>
4. <div id="style">
5. <!-- тут контент для айфона -->
6. </div>

В css-файле не для обычного броузера написано, что надо спрятать div по имени style, а в css-файле для айфона написано, что надо спрятать magic. Вот, похоже, и все. Спасибо Юре за помощь ;)

Не получается

Если сайт все равно не выглядит на айфоне так, как задумывалось, а спрятался в уголке и ждет пока его увеличат, или, что тоже бывает, растянулся на весь экран, то следует добавить следующую строку в заголовок xhtml-файла:

1. <meta name = "viewport" content = "width = device-width">

Для того, чтобы не дать пользователю увеличивать и уменьшать сайт на экране, надо добавить user-scalable = no:

1. <meta name = "viewport" content = "width = device-width, user-scalable = no">

В следующий раз расскажу о некоторых хитростях создания сайтов для айфонов, чтобы пользователи падали от восторга в обморок ;)