Данный шаблон я адаптировал под стандартые браузеры таких платформ как IOS(3.1+), Android(2.1+), Blackberry(6.0+), Windows Phone 7, а также Opera mobile для Android, которая набирает популярность. Хочу заметить что все стандартные браузеры (за исключением Windows Phone 7 у которого IE9) базируются на webkit.

А в чём же разница между разработкой десктопных сайтов, и сайтов для мобильных устройств? Далее я расскажу по поводу некоторых хитростей, которые помогут обойти многие проблемы.

Какое разрешение выбрать, и метатег viewport

Казалось бы что у нас должен возникнуть вопрос по поводу того, какое разрешение взять за основу своего сайта? Ведь сейчас актуальны девайсы как с 230х340 (например HTC Wildfire S), так и порядка 800х480,960×640 (HTC Incredible S, Iphone 4), и даже 1280х720(HTC One X). На помощь нам приходит метатег viewport, который решит проблему с разрешением и шкалированием.

  • width=device-width - значение выставляется самим устройством
  • initial-scale=1 - изначальный масштаб выставляется в 1 (т.е. 1:1)
  • maximum-scale=1.0, user-scalable=no - запрещается шкалирование (хочу подметить что даже при таких параметрах HTC всё равно будет упорно шкалировать, и при чём разработчики сказали что это не баг, а фича)
Немного о графике

Даже при таком диапазоне разрешений, должен заметить что большинство мобильных устройств, имея большое разрешение используют его не для расширения своего рабочего пространства, а для повышения чёткости (детальнее об этом ). Иными словами у них насыщенность пикселей (DPI) в несколько раз превышает более мелкие разрешения. Откуда следует вывод что устройства с большим PDI фактически в 2 раза ужимают сайт, дабы получить те же самые размеры, как и в устройствах с меньшим разрешением(например в Apple устройствах с retina дисплеем на одинаковый участок экрана приходится в 4 раза больше точек, что увеличивает чёткость). Нагляднее мы можем увидеть результат на картинке ниже

Теперь когда мы знаем принцип работы экранов с большим DPI, стоит задуматься по поводу корректного отображения всех элементов нашего Web сайта.
Начнём с таких элементов как шрифты, бордеры и остальные подобные элементы. Все эти элементы - это по сути дела векторные объекты, которые браузер сможет сошкалировать без проблем, так что не будем останавливаться на этом.
Другое дело обстоит с картинками и фоновыми изображениями. Ведь если мы сохраним фоновую картинку из расчёта что у нас 320х480, то девайсы с более плотным DPI не смогут предстать во всей красе перед нами, и все старания в передаче чёткости и прелести картинки сведутся на нет, так как они фактически увеличат её в 2 раза (а как бы хорошо браузер не шкалировал - качество всегда теряется при программном увеличении размеров). Тут нам на помощь приходит хитрость! Постараюсь объяснить на примере. У нас есть сайт, в шапке которого лежит некий фон, который занимает 320px в ширину, Так вот, что бы наши супер чёткие экраны отобразили эту картинку на все 100%, исходной картинкой должна быть не 320х50 а 640x100 (ровно в 2 раза больше), и уже с помощью css задать background-size: 320px 50px;. Аналогичные шаманства делаем и с картинками в виде img.

Оптимизируем запросы

В силу того что Android, BlackBerry, IOS и Windows Phone 7 полноценно поддерживают Data-url, мы можем существенно уменьшить количество запросов с помощью внедрения всех фоновых картинок в css. Помимо оптимизации запросов мы имеем огромный выигрыш за счёт кеширования css.

Проблемы со спрайтами и картинками

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

Небольшая проблема с форматами картинок

Также столкнулся с неприятной проблемой на некоторых девайсах, связанных с форматами картинок. Опять же приведу пример: имеются 2 картинки сохранённых с помощью Save for Web в Photoshop(одна из которых - линейный градиент, который тянется по оси Y, и вторая - какое то изображение, которое вырезано с куском градиента, и по сути дела должно вписаться в повторяющийся градиент), но в разных форматах (png и jpg). Так вот на некоторых девайсах одна картинка светлее, а вторая темнее. Так что для решения такой проблемы пришлось сохранять обе картинки в одном и том же формате.

Прячем URL bar

Так как места у нас не так уж и много на нашем девайсе, то выиграть лишние пару десятков пикселей нам не помешает. А выкроить мы их сможем спрятав наш URL bar. Для этого у нас есть простенький скрипт:

AddEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar() { window.scrollTo(0, 1); }

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

Визуальный эффект нажатия на элемент

Например для IOS мы можем добиться эффекта нажатия с помошью псевдокласса:active. Но он сработает даже если наш элемент попал в focus при прокрутке страницы, что не очень красиво. Поэтому я решил написать небольшой скрипт, который будет эмулировать нажатие, и отменять его при прокрутке стр.

Var scroller=false; $("a").live("touchstart",function(event){ var elem=$(this); clickable=setTimeout(function () { elem.addClass("active");}, 100); }); $("a").live("touchmove",function(event){ clearTimeout(clickable); scroller=true; }); $("a").live("touchend",function(event){ var elem=$(this); clearTimeout(clickable); if(!scroller) { elem.addClass("active"); setTimeout(function () { elem.removeClass("active");}, 50); } else { elem.removeClass("active"); } });

Убираем рамку и подсветку с ссылок и кнопок

Наверное каждый пользователь замечал что при клике на ссылку она обводится в рамку, и подсвечивается. Такой эффект может сильно испортить задумку дизайнера. Тут нам приходит на помошь приходит своеобразный сброс стилей (проверенно во всех webkit браузерах, а это родные браузеры IOS, Android, BlackBerry)

*{ -webkit-text-size-adjust: none; /*фиксим баг в IOS cо шкалированием в landscape*/ outline: none; /*убираем рамку вокруг ссылок и кнопок*/ -webkit-touch-callout: none; /*если надо, то запрещаем выделение текста*/ -webkit-tap-highlight-color:rgba(0,0,0,0); /*убираем фон подсветки ссылок и кнопок*/ }

поддержка fixed

Так как мобильные технологии сейчас очень быстро шагают вперёд, и в момент написания статьи процент браузеров, не поддерживающих fixed стремится к нулю, я не буду сильно углубляться в описание. Просто скажу что для данных браузеров нам стоит использовать iscroll . Также опишу небольшую хитрость, касающуюся динамического подключения скриптов(понадобится для того что бы не подключать лишний файл для нормальных браузеров)

//old IOS version detecting var OSName="Unknown OS"; if (navigator.appVersion.indexOf("Mac")!=-1) OSName="MacOS"; var bversion=parseInt(jQuery.browser.version,10); if((OSName=="MacOS")&&(bversion

В данном примере я проверял что если это Iphone и версия браузера менее 534 (она не поддерживает fixed). Я динамически подключаю скрипт fixing.js

CSS3

Также не забываем что мы уже на полную катушку можем использовать некоторые css3 свойства(только не забываем про префиксы moz-, webkit-, o-). Для WP7 не стесняемся подключать pie.htc.

Ссылка с рабочего стола для IOS

Наверно для пользователей IOS не будет секретом что в Safari можно на рабочем столе расположить ссылку на сайт.
Вот пример такой ссылки на Forismatic.

Ниже пример HTML кода для иконки (IOS сам её зашкалирует, добавит скругление углов), обьявления что данную ссылку надо открывать как приложение (запускается в full-screen), а также код, прячущий URL bar. При желании можно даже показать сплеш окно.

- обьявляет что бы открывалось в full-screen, прятался URL bar - меняем цвет status bar на чёрный (доступные значения default, black, black-translucent). по умолчанию default - ссылка на иконку, которая отображается на рабочем столе.

Живой пример всего вышеописанного можем посмотреть .

Сегодня многие компании уделяют созданию качественных мобильных ресурсов гораздо больше внимания, ведь по последним данным 80% интернет-пользователей применяют портативные устройства для поиска необходимой информации. Более того, маркетологи готовятся к большим изменениям в Google-алгоритме, которые вступили в силу 21 апреля 2015 года. В официальном блоге компании сказано, что теперь качество мобильной оптимизации ресурса будет во многом определять его позицию в поисковой выдаче.

Грядущий апдейт окажет на систему ранжирования гораздо больше влияния, чем те же Panda или , и именно поэтому совершенствование мобильного опыта должно стать вашим приоритетным направлением на ближайшее будущее. Согласно статье от Search Engine Land, посвященной данному обновлению, все сайты будут подвержены жесткой проверке на адаптивность к мобильным устройствам.

Чтобы вы могли в полной мере подготовить свой ресурс к столь серьезным изменениям, мы подобрали для вас 15 вдохновляющих примеров мобильного веб-дизайна.

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

Мобильный сайт компании остается успешным по двум основным причинам: он упрощает пользователям поиск информации о офферах и продает их за счет красивых изображений.

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

Шаблон мобильного сайта – незаменимое решение для современного сайта, который должен соответствовать самым высоким требованиям. Любой качественный веб-ресурс должен иметь дизайн, который адаптируется под мобильные устройства, и для этого шаблон должен быть адаптивным или отзывчивым. Такую особенность, в частности, имеют шаблоны WordPress. Сайты многих мировых брендов работают на базе этой платформы, например журнал Harvard Business Review , певица Кэти Перри , фантастическая сага Star Wars и компания Mercedes-Benz . Все эти сайты адаптированы мод мобильные устройства, что является существенным плюсом.

Сейчас очень важно, чтобы сайт был оптимизирован не только под поисковые системы, но и адаптирован под мобильные устройства. В первую очередь это связано с увеличением популярности смартфонов и планшетов среди рядовых пользователей. Если ваш сайт не будет «дружественным» к мобильным устройствам, он будет выглядеть по меньшей мере неудобно: маленькие шрифты, не влезающий на экран текст, который приходится прокручивать вправо, огромные картинки и еще куча неприятностей. Мобильный пользователь просто уйдет с такого сайта на сайт вашего конкурента. Важность адаптации под мобильные сайты продиктована еще и тем, что мобильный трафик в общей доли может доходить до 50%. Изначально забыв о том, что сайт должен иметь отзывчивый или адаптивный дизайн, вы рискуете не только потерять огромную часть своей потенциальной аудитории, но и снизить свои шансы на успех в принципе.

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

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

Шаблон мобильного сайтаFlatsome – многоцелевая и адаптивная тема WordPress

Flatsome станет прекрасным выбором для создания сайта любого типа, будь то блог, магазин, портфолио и т. д. Универсальность данной темы выражена также в прекрасной адаптивности к устройствам различного типа и ко всем расширениям экранов. Тема будет отлично смотреться и работать как на мобильных девайсах, так и на ноутбуках и персональных компьютерах. Простой редактор страниц Drag and Drop позволит вам создавать и редактировать страницы вашего веб сайта так, как вы этого захотите. Тема также оснащена плагином WooCommerce, так что у вас будет возможность создать свой интернет-магазин.

Porto – отличная и красочная тема WordPress

Porto – это универсальная и полностью отзывчивая тема WordPress WooCommerce для бизнеса, которая также подходит для создания любых сайтов. Porto предоставляет вам возможность воспользоваться множеством элементов и мощными функциями, которые помогут вам настроить все, что вы только захотите. По сравнению функциями других универсальных тем, Porto отличается расширенными функциями WooCommerce, эксклюзивными макетами страниц, функциями настройки дизайна и прочим. Porto гарантирует супер быструю работу на всех устройствах, что очень важно для любого бизнеса и интернет магазинов.

Puca – оптимизированная под мобильные устройства тема WordPress WooCommerce

Puca – это чрезвычайно гибкая и настраиваемая тема WP WooCommerce, которая может быть установлена и изменена по вашему усмотрению в течение нескольких минут с помощью быстрого импорта демо макетов. Puca может быть использована для различных целей: магазины направления Fashion, магазины мебели, электроники и т. д. Тема полностью совместима со всеми стандартами SEO, что поможет вашему бизнесу занимать топовые места в поиске Google. Все страницы Puca полностью адаптивны, поэтому их можно просматривать независимо от типа устройства и расширения дисплея.

Шаблоны мобильных сайтов для бизнесаLawyer & Attorney – шаблон для сайта юриста, адвоката и нотариального бюро


Это универсальный юридический шаблон, который можно использовать и в финансовой сфере. Чтобы создать на нем сайт, нужно импортировать готовый сайт или создать его самому через интерфейс drag-and-drop построителя. Готовый сайт с целевым дизайном имеет стандартные разделы с направлениями юридической практики, примерами успешно завершенных дел, членами команды и режимом работы. Можно добавить форму для записи на бесплатную юридическую консультацию.

Кроме того что шаблон отзывчивый и работает хорошо с сенсорными устройствами, он еще и поддерживает SEO-плагины и имеет высокую скорость загрузки, несмотря на использование CSS-анимаций. На сайт можно добавлять красивые иконки (1200+ штук) и слайдер с потрясающими эффектами.

Houzez – шаблон мобильного сайта агентство недвижимости


Это не просто шаблон для риелтора или риелторского агентства. На его базе можно получить полноценную систему управления объектами недвижимости с возможностью их размещения в каталоге. Это позволит увеличить приток клиентов на ваш сайт. Есть несколько демо для импорта. Можно использовать эффект параллакса и добавить видео на задний фон.

Каталог поддерживает несколько макетов для отображения объектов списком или сеткой, а также макетов страниц отдельных объектов. Поиск осуществляется по различным критериям: размер, тип, стоимость, местоположение и удобства. При поиске имущества пользователь может видеть объекты, находящиеся от него поблизости. Можно детально рассмотреть объект, используя функцию «Виртуальная экскурсия 360°». Шаблон поддерживает профессиональные плагины iHomeFinder и dsIDXpress.

Total – универсальный шаблон сайта под мобильные устройства для любого бизнеса


Один из самых продаваемых на ThemeForest шаблонов для использования в различных сферах деятельности: дизайн интерьера, разработка, SEO, сфера обслуживания, строительство, медицина и так далее. Можете установить одну из демо-тем для своего применения, но если у вас есть время, не поленитесь и воспользуйтесь инструментом drag-and-drop построителя Visual Composer, чтобы получить действительно уникальный дизайн. Для этого есть специальные модули для портфолио, отзывов, персонала, галерей и других разделов.

Шаблон поддерживает функции магазина, форума и слайдера. С помощью плагина Events Calendar можно планировать, добавлять и приглашать на события, а с плагином Contact Form 7 можно добавить на сайт удобную контактную форму. Поддержка SEO-плагина Yoast.

Шаблоны сайтов для мобильных устройств – Блог и журналSoledad – концептуальный шаблон мобильного сайта WordPress для блога и журнала


Это самый продаваемый шаблон в категории «Блог и журнал» за 2016 год. Для его настройки используется инструмент Live Customizer, который работает в режиме real-time и поддерживает более 300 опций. Также чтобы настроить или создать сайт с нуля, есть плагин Visual Composer. Более 900+ вариантов главной страницы для журналов и блогов на различные темы (путешествия, музыка, видео, игры, фильмы, еда, здоровье, машины, мода и так далее) и 300+ макетов слайдера. Пять макетов для оформления записей, три макета боковой панели и шесть макетов портфолио. Потрясающие сетки галереи.

Caress – полноценный шаблон мобильного блога на Вордпрессе


Тема Caress имеет чистый и свежий дизайн, который можно легко настроить так, как вам захочется. Для этого в инструменте Live Customizer есть 70+ различных опций. Шаблон особенно подойдет блогерам, которые загружают много графического контента – в нем предусмотрена поддержка загрузки фотографий с высоким разрешением, организация галерей и добавление видео, которые в записях будут выглядеть очень гармонично.

Для оформления блога и категорий доступно 14 макетов. Два вида слайдера с липкими записями. Боковую панель можно тоже сделать липкой и добавить туда раздел товаров магазина WooCommerce и девять виджетов для социальных сетей и записей. В футере тоже есть области для виджетов, в том числе для карусели фото из Instagram.

Vlog – шаблон видеоблога или журнала WordPress


Этот мастерски оформленный шаблон строго ориентирован на представление видеозаписей на различную тематику. Это может быть видеоблог, сайт с видеоуроками или журнал для вирусных видео. Для этого в нем есть полная совместимость с известными видеосервисами YouTube, Vimeo и Dailymotion.

Шаблон поддерживает более 200 изысканных макетов и возможностей для красивого представления текстового и видеоконтента нужным для вас способом. С помощью плагина Series можно группировать и создавать из статей и видеозаписей плейлисты, что очень удобно для обучающих видео. Плагин Video Thumbnails поможет настроить миниатюрное изображение для видео. Аналогично YouTube посетители могут развернуть видео на весь экран или посмотреть его позже. Размещая баннеры, вы сможете заработать на рекламе.

Шаблоны сайт под мобильные устройства – Интернет-магазиныOxygen – тема WooCommerce магазина с возможностями для настройки


Специализированный шаблон мобильного сайта Oxygen поможет вам получить магазин с изысканным дизайном и поддержкой основных функций для продажи товаров. Для страниц можно абсолютно бесплатно создать свои макеты, используя Visual Composer. Слайд-шоу поможет привлечь потенциальных покупателей к ходовым товарам, акциям и спецпредложениям. Навигацию можно оформить с фиксированным боковым меню, что может быть очень удобно.

С помощью интерактивного модуля покупатели смогут быстро посмотреть интересующий товар, не покидая страницы каталога. Лучшие товары можно добавлять в список желаемых или в корзину, которая всегда доступна в верхней части сайта. Некоторые товары можно также оформить в виде лукбука. Тема имеет отзывчивый дизайн и полностью поддерживает все жесты с мобильных устройств.

Savoy – шаблон интернет-магазина в минималистическом стиле на базе AJAX


Тема Savoy имеет простой и в то же время красивый дизайн, который позволяет сделать основной акцент на продаваемых товарах. Функционал AJAX будет удобным как на стационарных ПК, так и на мобильных устройствах. Его преимущество в том, что пользователю не нужно переходить на отдельную страницу, чтобы совершить какое-то действие. В частности, поддерживается простой Ajax-поиск товаров.

Для оптимизации производительности магазина используется функция «ленивой загрузки» фотографий товаров. Поддержка полноэкранной галереи товаров с возможностью приближения изображения. Поддержка быстрого просмотра, вишлиста и формы для входа/регистрации во всплывающем окне.

Есть несколько макетов страниц блога. Слайдеры и галереи свободно реагируют на мобильные сенсорные жесты.

Разные шаблоны для сайтов, поддерживающих мобильные устройстваBellevue – шаблон мобильного сайта отеля с поддержкой услуги бронирования


В этой теме есть семь демо для различных вариантов сайта, в том числе и для одностраничного. Премиум версия плагина WP Booking System предоставит посетителям возможность для простого бронирования номера в вашем отеле. С Events Calendar вы сможете добавить в календарь важные события с поддержкой iCal от Apple и экспорта в Gmail. Также есть MasterSlider с поддержкой мобильных жестов.

Эффект параллакса сделает сайт визуально более привлекательным. Блог доступен в двух макетах: стандартный и Masonry. Потрясающие макеты страниц для комнат и номеров. Украсить сайт поможет комплект из 1300+ четких и масштабируемых векторных иконок, а также CSS3-анимации. Для конверсии можно добавить на сайт любую форму. Поддержка сезонных скидок и оплаты через WooCommerce.

Sport – шаблон спортивного клуба на Вордпресс


Sport – это специализированный шаблон мобильного сайта для спортивного клуба, центра или сообщества. Дизайн простой и чистый, поэтому на вашем сайте будет удобно сидеть как с обычного ПК, так и с мобильных устройств, в том числе и с iPhone и iPad с повышенными требованиями к качеству изображения.

В комплекте есть два готовых сайта с двумя цветовыми схемами, которые легко настраиваются через админ-панель. Для создания шапки есть специальный построитель с поддержкой 40 опций для рекламных объявлений и ссылок на социальные сети. Четыре типа галереи: Isotope, Masonry, со слайдером и одиночные фотографии (Singles). Поддержка плагинов форума, социальной сети, календаря событий и интернет-магазина очень пригодится сайту спортивного клуба.

Выбирайте для своих целей только качественный шаблон мобильного сайта, и вы точно не пожалеете об этом. Еще больше тем для мобильных сайтов можно найти в наших обзорах — и .

Александр - основатель проекта сайт «Веб-лаборатория успеха», созданного в поддержку начинающим и продолжающим интернет-предпринимателям.Убежденный трудоголик, за плечами которого профессиональный опыт руководства редакцией интернет-журнала, создания и управления собственным интернет-магазином. Основной род занятий: продвижение бизнесов (в т.ч. интернет-магазинов) через Facebook и Google Adwords. Основное увлечение: монетизация сайтов через инструменты партнерского маркетинга и Google Adsense. Личные подтвержденные рекорды: 3 миллиона посетителей блога в месяц.

    Есть решение

    Вопрос по сабжу. Я собственно так понял, что?mobile=1 удаляет флаг "nomobile" в файле сессии.Если этот параметр указать в десктопной версии браузера, то шаблон мобильной версии не подключается.Если на мобильных устройствах, то...

    Вот допиленный вариант для Shop-Script 6: public static function isMobile($check = true) { if ($check) { if (self::get("nomobile") !== null) { if (self::get("nomobile")) { waSystem::getInstance()->getStorage()->write("nomobile", false); } } elseif (self::get("mobile")) { waSystem::getInstance()->getStorage()->write("nomobile", true);...

    У нас сайт http://kotofey.md (припаркован к webasyst), он является зеркалом https://kotofey.webasyst.cloud (шаблон facebook) на основе которого сделано приложение онлайн-магазин в facebook- https://www.facebook.com/kotofey.md/app/2151596388...есть...

    Поменять пункты меню в мобильной версии

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

    ИНТЕРНЕТ МАГАЗИН МОБИЛЬНАЯ ВЕРСИЯ

    ПОЛНОСТЬЮ КОСТОМИЗИРОВАТЬ ШАБЛОН МОБИЛЬНОЙ ВЕРСИИ EXPRESS SHOP И СДЕЛАТЬ ИНТЕРНЕТ МАГАЗИН.

    Верстка мобильной версии сайта

    Коллеги, добрый день.После неудачного опыта в работе с одним из экспертов с данного форума (работа длилась с 10.12.2016 но так и не была завершена, а теперь разработчик и вовсе пропал) обращаюсь к Вам с просьбой доделать полноценную мобильную версию...

    Добрый день, столкнулся с очень странной трактовкой разработчиков о том что такое мобильное устройство, а что им не является. Когда в настройках Webasyst (Сайт или Магазин) я включаю опцию "Мобильная тема оформления" (Тема оформления для...

    Уважаемые разработчики посмотрите это видео на нем запечатлен человек...

    Есть решение

    Доброго времени сутокНужно вывести разный контент в зависимости от мобильной или пк версии.Как в коде шаблона выполнить проверку мобильная версия сейчас или нет?

    {if $wa->isMobile()} .... {/if}

    +1

    Есть решение

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

    А можно немного подробнее по поводу CSS

    Сделать мин. сумму заказа в мобильной версии и вставить картинку.

    Нужно сделать:1) Мин. сумму заказа в мобильной версии сайта (в обычной версии она прописана в шаблоне cart.js, а в мобильной ней)2) Вставить картинку на странице сайта таким образом, чтобы она разворачивалась в полный размер при клике.

    Добрый день!Имеется такая ситуация: мобильная версия сайта вроде бы работает как надо, но для некоторых страниц, в частности личный кабинет покупателя, подгружается настольный шаблон, хотя мобильная версия имеется.Подскажите, где нужно поправить, чтобы...

    Чтобы одолеть полчища ботов, которые регистрировались каждый день, пришлось установить гугл рекапчу v.2, боты исчезли, но если у обычных людей не срабатывает галочка "Я не робот" и вылезает проверка, то в мобильной версии сайта (шаблон:...

    Есть решение

    Добрый день, подскажите в какой файл прописать счетчик и будет ли он отображаться в таком виде, как на сайте?Из основного шаблона в мобильный я перенес файл liveInternet.js в котором код счетчика, но вот вставляю в мобильную версию сайта: