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

genn.org в Mac OS X Safari и iPhone Safari
Недавно я рассказал о том, как правильно сделать иконку сайта так, чтобы на айфоне это выглядело очаровательно. Теперь же, на примере genn.org объясню, как я сделал так, чтобы мой флешевый сайт на айфоне показывал хоть что-то.
<link rel="apple-touch-icon" href="/apple-touch-icon.png" /><link rel="stylesheet" type="text/css" media="only screen and (max-device-width: 480px)" href="css/iphone.css" />
Первая строка помогает Сафари в айфоне найти нужную иконку по указанному адресу. Вторая строка подсказывает, какой css-файл использовать для отображения. Размер экрана айфона 320 х 480 пикселей, так что в условии и выставлена максимальная ширина.
xHTML выглядит так:
<div id="magic"><!-- тут флеш --></div><div id="style"><!-- тут контент для айфона --></div>
В css-файле не для обычного броузера написано, что надо спрятать div по имени style, а в css-файле для айфона написано, что надо спрятать magic. Вот, похоже, и все. Спасибо Юре за помощь ;)
Не получается
Если сайт все равно не выглядит на айфоне так, как задумывалось, а спрятался в уголке и ждет пока его увеличат, или, что тоже бывает, растянулся на весь экран, то следует добавить следующую строку в заголовок xhtml-файла:
<meta name = "viewport" content = "width = device-width">
Для того, чтобы не дать пользователю увеличивать и уменьшать сайт на экране, надо добавить user-scalable = no:
<meta name = "viewport" content = "width = device-width, user-scalable = no">
В следующий раз расскажу о некоторых хитростях создания сайтов для айфонов, чтобы пользователи падали от восторга в обморок ;)


