Дизайн сайта для мобильных устройств

Question

Я только что добавил возможность печати на веб-сайт, используя таблицу стилей (например, @media print и т. Д.), И мне было интересно, смогу ли я использовать аналогичный метод для добавления поддержки мобильных устройств.

Если нет, как я могу обнаружить мобильное устройство? Мои страницы - C # (.aspx), и я хотел бы уменьшить страницы для удобства их использования на мобильном устройстве.

Любой совет для меня?

РЕДАКТИРОВАТЬ: У моей жены есть BlackBerry, поэтому я бы хотел включить веб-сайт нашей компании для этого.

Answer 1

Я не уверен, как IPhone / iPod Touch объявляют себя при запросе таблицы стилей, но для большинства, используя

<style type="text/css">
    @media handheld
    {
      /* handheld styles */
    }
</style>

должен сделать свое дело. Он работает так же, как @media print (или нет).

Полный список типов носителей приведен здесь .

Answer 2

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

И, пожалуйста, не забудьте уменьшить размеры загрузок:)

Answer 3

Мобильные браузеры - настоящая мешанина с точки зрения того, что они поддерживают, следуют ли они атрибуту «media» в ваших стилях и т. Д.

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

A достойно выглядящий ресурс был упомянут в статье выше.

Answer 4

Вы хотели бы взглянуть на тип пользовательского агента и посмотреть, является ли это мобильным устройством. Следующий код будет примером этого:

public static bool IsMobile(string userAgent)
{
    userAgent = userAgent.ToLower();

    return userAgent.Contains("iphone") |
         userAgent.Contains("ppc") |
         userAgent.Contains("windows ce") |
         userAgent.Contains("blackberry") |
         userAgent.Contains("opera mini") |
         userAgent.Contains("mobile") |
         userAgent.Contains("palm") |
         userAgent.Contains("portable");
}

Это должно работать в большинстве случаев! Эта ссылка может помочь вам получить более конкретную информацию.

Answer 5

Проверьте это! Это довольно круто! http://mobstac.com/developer/

Платформа API MobStac - это самый быстрый способ создания и управления мобильными сайтами! Вы получаете доступ к документации разработчика и ключам API.

Answer 6

Лучший способ сделать все это - сделать это на уровне сервера.

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

Отличным вариантом является Wapple Architect (http://wapple.net) - он позволяет выполнять эти проверки на уровне сервера с некоторыми веб-службами, а затем выполнять логику и добавлять код, если это мобильное устройство.

Определенно стоит посмотреть.