Какой лучший способ создать простую мобильную версию сайта?

Question

Я создаю небольшой сайт для компании и хотел бы создать версию, оптимизированную для смартфонов с полнофункциональными интернет-браузерами (iPhone / Android и т. Д.).

Я склоняюсь к медиа-запросам, потому что это поддерживается веб-набором, который, похоже, использует большинство из них.

Это лучшее? Если да, какой медиа-запрос будет лучшим?

Я склоняюсь к:

@media (max-device-width: 480px)

Answer 1

Если ваш сайт может настроить все, что вам нужно с помощью CSS, вы должны быть хорошими.

Имейте в виду вещи, которые отличаются в мобильном Интернете:

• Общая ширина / высота намного меньше
• Размер шрифта обычно увеличивается для удобства чтения
• Flash не поддерживается на многих устройствах (кашель iphone)
• Уберите все, что не нужно, не тратьте пропускную способность на вещи, которые не интересуют мобильных пользователей
• добавление атрибутов, удобных для мобильных устройств, в телефоны # для удобства набора

Тем не менее, как только вы войдете в него, вы можете обнаружить, что вы действительно хотите / должны предоставить другое «представление» для мобильных пользователей ... например, перенаправить их с example.com на m.example.com и резко изменить содержимое страницы. Если вы используете MVC -подобную среду, вы сможете создать набор упрощенных представлений для ваших страниц, оптимизированных для мобильных устройств.

Примеры сайтов (для настольных ПК и мобильных устройств или для сенсорных систем)

• Digg: Полный | Мобильный телефон
• Yahoo: Полный | Мобильный телефон
• Facebook: Полный | Мобильный | сенсорный

Answer 2

Для сенсорных телефонов создайте версию jQTouch . Для клавиатурных телефонов просто создайте таблицу стилей, оптимизированную для небольших экранов.

Answer 3

Для iPhone и Android я бы не стал беспокоиться, поскольку у них обоих полнофункциональные веб-браузеры. (Если сайт не Flash, только iPhone.)

Вы должны иметь возможность настроить таргетинг на любое устройство с помощью специального файла CSS, например Blackberry и т. Д.