Как сделать сайт более iPhone-совместимым за 5 шагов

[Zelenov]

Ограничение на максимальное увеличение — это просто жесть в айфоне. Читать Гугл ридер можно только в горизонтальном варианте, да и то шрифт мелкий. А увеличить нельзя, блин.
Зато теперь понятно, откуда ноги растут…

[afan]

Согласен, что шрифт там мелковат (для меня — на грани комфортного). Могли бы вынести вариант «более крупный шрифт» в настройки.

[flamefork]

купите ByLine ) реально хорош

[Zelenov]

Да я много рассматривал альтернатив, но ни в обдном не видел кнопки Share и кнопки Like. А без этого никак. В ByLine есть такие?

[takobus]

В Byline есть, и в MobileRSS, и во многих других тоже есть

[flamefork]

Share есть, Favorite есть, Like нет

[artyfarty]

Да, Булайн потрясающ. Абсолютно полноценный гуглридер-клиент. Единственное, что не может — новиночки вроде камментов.

А так — оно даже умеет кешировать статьи (а при желании пользователя и стоящие за ними страницы), пока чует вайфай.

[flamefork]

каменты есть (или это не то же самое, что Note?)

[artyfarty]

Вот ноут есть, а камментов нет.
Это немножко разные вещи, камменты появились недавно.

[Kakysha]

Про второй пункт я б вот что сказал:
Какого хе*а кто-то смеет ограничивать мою свободу и скрывать строку адреса и кнопки? Бесит, когда у тебя что-то отнимают. Я бы негодовал по этому поводу :(

[Kakysha]

А еще, как мне кажется, отныне особо «усердные» заказчики будут просить делать еще одну верстку для iPhone… бедные верстальщики :)

[afan]

Почему бедные? Заказчику надо — заказчик платит. Кто откажется от лишней работы :)

Тем более что под iPhone адаптировать сайт приятнее, чем писать хаки вокруг багов ослика.

[absolvo]

Согласен, для меня опыт вёрстки под айфон был бы интересным экспириенсом.

[afan]

Это происходит только в том случае, когда вы выносите иконку сайта на рабочий стол и открываете сайт как отдельное приложение. Т.е. аналог Prism в Mozilla или «Создать ярлики приложения» в Chrome.

Когда же вы заходите на такой сайт в сафари, то там вся обвязка остается. Т.е. в этом случае пользователь может выбирать, хочет он лицезреть тулбары при работе с сайтом или нет.

[Kakysha]

То есть закладка в браузере и иконка в спрингбоард это не одно и тоже?
Простите, просто пока еще не имею сей чудо девайс ;(

[platinum07]

нет, не одно и то же.
закладки есть в самом safari.

[afan]

Вы можете в Safari добавить закладку (будет видна только в UI Safari) и/или иконку на рабочий стол. В последнем случае можно сайт подкрутить так, чтобы он выглядел как нативное приложение (т.е. без обвязки Safari плюс своя иконка). Остальные параметры (масштабирование и стили) актуальны как при запуске из-под Safari, так и при запуске через иконку.

[Kakysha]

Спасибо за объяснение, тогда это действительно полезно, в виде приложения.

[NickyX3]

только если на самой страничке будут ссылки на другие страницы — то при вызове на ссылку запустистя отдельный сафари и в ссылка откроется в нем уже в нормальном режиме. То есть самодостаточное веб-приложение тегом не сделать.
Насчет viewport для iPhone. Рекомендуется сделать ширину контента равной 320px и такую же ширину viewport. Тогда при повороте — вы получите эту же страничку полностью по ширине — но соответственно крупнее, чем в вертиклаьном состоянии. А уж отключать зум — это вообще не вариант

[artyfarty]

Никуда оно вроде как полностью не пропадает, а просто уходит за скролл, если не путаю.

[afan]

Это не второй хабраэффект, к сожалению. Буквально за несколько минут до момент публикации топика упал сам хостер. Ждемс…

[afan]

О, поднялся.

[VovixLDR]

Как сделать сайт, понятно. А вот как сделать iPhone более сайто- и человекосовместимым?

[artyfarty]

Мало кто сможет доказать, что на его мобильном устройстве браузер лучше айфоновского.
МобайлСафари даст фору по стандарто- и сайтосовместимости не то что ие6, а наверное даже второму фаерфоксу и прочим браузерам того поколения.

Что до человекосовместимости — вопрос сугубо индивидуальный. Не нравится — никто не заставляет пользоваться, и уж тем более читать всякие статьи про оптимизацию сайта под мобайлсафари.

[Mithgol]

> Вот так можно подключить отдельный CSS, который будет воспринят только на iPhone

Сейчас это утверждение истинно, однако в будущем оно может оказаться и не таковым: учтите, что медиазапросы (media queries) в CSS теперь поддерживаются не только Вебкитом, но и другими движками (Gecko, например). Соответственно, Fennec, запущенный на экране мобильника 480×640, будет реагировать на такой CSS ничуть не хуже, чем Safari на iPhone.

Этот метод, стало быть, следует использовать для адаптации сайтов не только под iPhone, но и для всякого экрана 480-пиксельной ширины.

По примеру сайта W3C можно при подключении CSS также использовать width (ширину документа во браузере) вместо device-width (ширины экрана) или нарядý с нею, ведь есть же известный смысл в том, чтобы в нешироком окошке отображать сайт совершенно так же, как и на нешироком экране.

[w495]

Весьма полезный комментарий, только последний абзац немного не понял.

[rondob]

может кто знает, как определить, что на сайт зашли с iPhone или iPod touch? Спасибо!

[kolpeex]

User-Agent, не?

[rondob]

Точно, спасибо вам за совет!

if (navigator.userAgent.match(/AppleWebKit/i) && navigator.userAgent.match(/Mobile/i)) {
   window.location.replace('.../smth_for_iphone.html');
}

[afan]

Вот здесь UseAgent и функция на Javascript:

groups.google.com/group/iphonewebdev/browse_thread/thread/9cb7c185711ec6f0

И не могу не поделиться вот этой свежей ссылкой, где перечислены примеры сайтов, оптимизированных для iPhone, а также даны ссылки на полезные инструменты для дизайнера/разработчика таких сайтов:

www.smashingmagazine.com/2009/09/27/showcase-of-designs-optimized-for-iphone/

[DeMx]

Господа верстальщики, а как вы тестируете под iPhone, помимо собственно покупки самого устройства?

[rondob]

попробуйте здесь или здесь

[dna]

можно sdk скачать, там есть эмулятор, ну а в эмуляторе сафари. отличий от обычного(на самом iphone который) замечено не было

[lol2Fast4U]

jQTouch рулит!