Оптимизация мобильного сайта

Question

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

Мой вопрос: что я должен сделать, чтобы сайт был оптимизирован для мобильных устройств??Я хотел бы оптимизировать его с помощью стиля, подходящего для небольших экранов, но без создания отдельной страницы и перенаправления в зависимости от устройства, на котором просматривает пользователь.По сути, я хочу создать одну страницу контента, две таблицы стилей и безошибочный способ применения соответствующей таблицы стилей в зависимости от типа устройства, на котором просматривает пользователь.

Какой лучший способ сделать это

Answer 1

Вы просто ищете способ обнаружить браузер и применить правильный CSS?Если это все, попробуйте использовать CSS Media Types .Вы можете установить одну из своих таблиц стилей на screen, а другую на handheld:

<LINK REL="stylesheet" TYPE="text/css" MEDIA="screen" HREF="desktop.css">
<LINK REL="stylesheet" TYPE="text/css" MEDIA="handheld" HREF="mobile.css">

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

Еще одно преимущество этого подхода - использование CSS для определения большого количества ресурсов изображения (вместо тегов img).,Таблица стилей handheld может использовать меньше таких ресурсов, поэтому мобильный браузер даже не знает о них и не заботится о них.

Answer 2

Создание отдельных таблиц стилей для обоих вариантов - отличная идея, но, как вы сказали, «оптимизировано для мобильных устройств», просто настроить CSS недостаточно. Существуют и другие факторы, которые делают сайт удобным для мобильных устройств, например скорость загрузки сайта, контент, удобство использования на мобильных устройствах и т. Д.

Чтобы углубиться в эту тему, вы можете воспользоваться помощью этого поста на mobile оптимизация .