Как я могу создать сайт для мобильных телефонов
https://stackoverflow.com/questions/624262
-
05-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianВопрос
Как я могу начать разработку сайта, который можно просматривать с мобильных телефонов?Например, если вы просматриваете сайт Gmail с iPhone, сайт выглядит иначе, чем обычный сайт.Для этого вам нужно разработать два разных сайта?Как я могу узнать, доступен ли сайт с помощью мобильного браузера?
Решение
Вам не нужно создавать два разных сайта, но вы, вероятно, захотите, если важно, чтобы мобильные пользователи имели доступ к вашему сайту.
Есть несколько способов решения этой проблемы, каждый из которых имеет свои плюсы и минусы. Я предполагаю, что ваш сайт имеет свою информацию в базе данных, и публикует эти данные с помощью набора шаблонов? (Например, сайт Ruby on Rails или Django; сайт PHP; блог и т. Д.) Если вы вручную кодировали несколько статических HTML-страниц, это будет для вас более трудоемким.
1: один и тот же HTML, разные таблицы стилей для ЭКРАНА и МОБИЛЬНОЙ
Идея: вы предоставляете одинаковую структуру HTML для всех запросов. Вы создаете таблицу стилей для ЭКРАНА и одну для МОБИЛЬНОЙ.
Хорошо: для вас, программист. Вам проще поддерживать 2 таблицы стилей, чем поддерживать 2 совершенно отдельных сайта-шаблона.
Плохо: для ваших пользователей. Сайт, который легко использовать на мобильном устройстве, обычно неэффективен для обычного браузера; и сайты, оптимизированные для настольного компьютера / ноутбука, часто терпят неудачу на мобильном устройстве. Очевидно, это зависит от того, как вы кодируете свои страницы, но в большинстве случаев загрузка обычного сайта в мобильный браузер будет плохой для ваших пользователей. (См. http://www.useit.com/alertbox/mobile-usability.html для краткого изложения недавнего исследования юзабилити Якоба Нильсена на мобильных сайтах.)
2: поддерживать отдельные сайты
(Gmail поддерживает даже более двух систем! В основном они имеют разные контейнерные приложения / шаблоны, которые обрабатывают одни и те же данные: полную версию браузера AJAX; простую версию браузера HTML; базовую мобильную версию; нативное приложение Blackberry и родное приложение для iPhone.)
Это новый стандарт для сайтов, которые действительно заботятся о своем присутствии на мобильных устройствах и компьютерах. Это больше работы для вас, но в целом это гораздо лучше для ваших пользователей.
С другой стороны, вы, вероятно, можете создать один урезанный чистый HTML-сайт, который будет работать для мобильных устройств и будет использоваться в качестве запасного варианта для редкого веб-пользователя, у которого нет javascript или у которого есть серьезные проблемы с доступностью, которые мешают им использовать " полный " сайт.
Кроме того, в зависимости от вашей пользовательской базы: в США люди обычно имеют доступ к настольному компьютеру / ноутбуку и используют свои мобильные устройства для дополнительного доступа. Например, я бронирую билеты на самолет и аренду автомобиля с помощью настольного компьютера, но я хочу посмотреть код бронирования на своем мобильном телефоне. Во многих случаях вы можете обойтись без ограничения функциональности, которую вы предлагаете на мобильном сайте, и потребовать полный компьютер для выполнения необычных сценариев использования.
Основная процедура:
<Ол>Другие советы
Большинство мобильных устройств в наши дни поддерживают "мобильные таблицы стилей", которые представляют собой просто альтернативные таблицы стилей для упрощения отображения информации.Вы можете добавить мобильную таблицу стилей на свой сайт обычным способом и включить media="handheld" атрибут:
<link rel="stylesheet" type="text/css" href="/mobile.css" media="handheld" />
Тогда эти стили будут применяться к мобильным телефонам.
Единственная проблема с этим методом заключается в том, что если ваш HTML-код громоздкий, загрузка страницы может занять некоторое время, поскольку большинство мобильных браузеров работают медленнее (за исключением Opera Mini).Вот почему крупные сайты, такие как flickr и digg, используют отдельные сайты.
Дополнительные примечания:
- Громоздкий HTML не так сильно влияет на Opera Mini, потому что он использует прокси, который выполняет рендеринг извне, а затем отправляет специальное "изображение" на устройство.
- Используйте простой, чистый HTML-код, после чего вы сможете отправлять его в обычные браузеры и мобильные устройства.
- Вам нужно будет проверить комбинации таблиц стилей с помощью
mediaатрибуты.Добавление IIRC приведенного выше кода заставит браузеры игнорировать первую таблицу стилей.Если вы добавитеmedia="all"в первом случае будут использоваться оба стиля (и, таким образом, вы можете переопределить исходные стили, а не начинать заново).
Для проверки внешнего вида в мобильном браузере используйте Opera Mini Emulator
Ознакомьтесь с WURFL проектом. Его намерение состоит в том, чтобы помочь разработчикам ориентироваться на несколько телефонных браузеров и начать работу еще до появления Mobile Safari, во времена HDML, WAP и XHTML-MP. Однако он актуален, храня возможности современных устройств, таких как iPhone. Он имеет данные более чем на 400 устройствах и имеет библиотеки на Java, PHP, Perl, Ruby, Python, .NET, C ++. В зависимости от того, насколько широко вы хотите настроить таргетинг на свое мобильное приложение, на это нужно обратить внимание. Вот список сайтов, использующих WURFL.
Другим связанным проектом, написанным Лукой Пассани (соучредителем и сопровождающим WURFL), является Switcher . Вы можете использовать это для автоматического перенаправления на мобильную версию вашего сайта.
Будь проще, подумай опера мини и у вас все получится правильно.(У iPhone больше возможностей, чем у обычного браузера ...)
Сосредоточьтесь на контенте
Избегайте плагинов
Следуйте веб-стандартам
Отделяйте контент от макета / дизайна, используйте css настолько, насколько это возможно.
Используйте текст и картинки.
Добавьте остальные навороты, если необходимо, но убедитесь, что содержимое сайта всегда доступно, даже если навороты отключены.Если вы можете просматривать страницу с помощью простого браузера, такого как lynx, и обычного браузера, такого как firefox, то вы на правильном пути.
Для получения дополнительной информации, пожалуйста, посетите любая браузерная кампания
Редактировать:В случае, если это не очевидно, вы работаете с разными css для разных типов браузеров, но всегда используете один и тот же контент.Посетите css дзен- сад для хорошей демонстрации.
Обновить:Добавление ссылки на css media types, и, как заявляют другие, это карманный вариант, который интересен.
Для этого вам нужно разработать два разных сайта?
ДА
Как я могу узнать, доступен ли сайт с помощью мобильного браузера?
Вероятно, в вашем языке программирования есть какой-то способ просмотра информации о клиенте.PHP, например, имеет суперглобальную переменную $_SERVER который содержит все виды информации как о обслуживающем сервере, так и о посещающем клиенте.В этом случае вас могло бы заинтересовать значение $_SERVER['HTTP_USER_AGENT'], что дало бы следующий результат, если бы я посетил страницу:
Mozilla/5.0 (Macintosh; U; Intel Mac OS X 10_5_6; en-us) AppleWebKit/528.16 (KHTML, like Gecko) Version/4.0 Safari/528.16
Это говорит вам о том, что я использую Mac OS X 10.5.6, используя Safari 4.0.Существуют известные ключевые слова для различных мобильных браузеров.Например, одна из версий браузера iPhone имеет следующий пользовательский агент:
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3
"iPhone" уже выдает это, но еще больше подтверждается ключевыми словами "Mobile" и "Safari".
Большинство сайтов имеют несколько другой поддомен для мобильных сайтов (большинство используют " m "). например flickr использует m.flickr.com
(есть рекомендация использовать .mobi TLD , но я никогда видно что использовал)
Сделайте дизайн очень простым, не используйте слишком много графики, где вы должны держать их как можно меньше. Это может быть полезно для дизайна.
Я бы, вероятно, создал бы другой набор страниц для мобильных пользователей, используя те же бизнес-объекты и т. д., что вы используете для основного сайта.
Если различия в дизайне двух прицелов невелики, возможно, вам удастся просто обслужить отдельные CSS-файлы?
Ваш сайт должен быть ограничен мобильным телефоном, который поддерживает максимальные требования. Вы не можете даже развлечь весь мобильный телефон .
Ваш веб-сайт должен иметь другой набор стилей CSS, и HTTP-агент HTTP должен проверять тип клиента в соответствии с запросом выбора CSS.
