Приветствую, мои уважаемые читатели блога. На связи Галиулин Руслан. Сегодня будем говорить про мобильные версии сайтов которые должен иметь каждый сайт или блог чтобы продвинуться в ТОП поисковых систем. В статье дам коды стилей и готовые примеры верстки страниц, которые сможете скачать к себе на компьютер.

Если Ваш сайт до сих пор не мобилен, рекомендую воспользоваться моими советами или обратиться к профессионалам - http://www.Mobile-version.ru которые сделают все по стандартам поисковых систем. По этой же ссылке можно и проверить свой сайт на мобильность.

В 2013 году Google начал давление на вебмастеров (https://webmasters.googleblog.com/2013/06/changes-in-rankings-of-smartphone_11.html ), убеждая в необходимости создания облегченных модификаций сайтов, а с 2015 года мобильность стала одним из аспектов ранжирования (https://webmasters.googleblog.com/2015/04/rolling-out-mobile-friendly-update.html ). Не отстает и Яндекс, создавший специальный алгоритм «Владивосток», учитывающий пригодность сайта для просмотра с телефонов.

Mobile Friendly сегодня - это не просто забота о посетителях, а непременное условие продвижения.

Когда сайт создается с нуля, применяют подход Mobile First. Но у большинства в наличии старые рабочие проекты. Главный вопрос, который в таких ситуациях вызывает мобильная версия сайта - как сделать ее, не испортив имеющийся шаблон?

Есть три подхода:

  • Отдельный адрес и макет - размещается на поддомене вида m.site.ru. Перенаправление происходит посредством серверного редиректа по юзер-агенту.
  • Адаптивный дизайн - url и html остаются теми же, что и в настольном формате, но в CSS медиа-запросами отдаются правила для разных экранов.
  • RESS - респонсивный дизайн, адрес остается прежним, но сервер посылает наборы стилей в зависимости от того, какой тип оборудования запрашивает страницу.

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

Мобильная версия сайта: как сделать правильно

Дальнейшие действия потребуют уверенных базовых знаний html и css или умения быстро гуглить непонятные вещи.

Информация для новичков: в CSS слова перед фигурными скобками означают конкретные куски html файла, за отображение которых они отвечают. Пишутся чаще с точкой или решеткой - #место {свойство: значение;}.

Шаг 1. Снимаем ограничения.

Владельцы резиновых макетов могут пропустить этот шаг. Остальным придется потрудиться.

Width - ищем в коде крупные участки с жестко заданным отображением. Если параметр указан в пикселях или пунктах - нужно сменить его значение на проценты, em и прочие единицы, восприимчивые к окружению. Часто главный контейнер или область контента имеет фиксированный width - в большинстве случаев ограничения снимаются его заменой на max-width.

Картинки - вместо четких размеров прописываем свойства для тега img, которые придадут адаптивность изображениям. Фотографии будут менять пропорции в рамках родительских контейнеров.

img {

Max-width: 100%;

Height: auto;

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

table {

Display: block;

Width: 100%;

Overflow-x: scroll;

Overflow-y: hidden;

Ms-overflow-style: -ms-autohiding-scrollbar;

Webkit-overflow-scrolling: touch;

Обтекания - задаются свойством float. Установка этого параметра позволит блокам перемещаться в зависимости от параметров окна, подстраиваясь под элементы с устойчивой позицией или в рамках родительских контейнеров. Стандартные div-элементы по умолчанию переводятся каждый на новую строку. Например, разместив в контейнере 1000 px div-блоки по 200 px, можно увидеть такую картину.

Блоки встали друг над другом. Добавление обтекания убирает переводы строк, выставляет элементы в линию на все доступное пространство.

Шаг 2. Планирование реорганизации контента.

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

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

Шаг 3. Удобство.

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

Область контента: для телефонов, как правило, задают ширину основного блока в CSS до 100% в зависимости от доступного пространства. Это означает, что текст, модули, реклама, содержимое сайдбаров будут выдаваться на малых устройствах в один столбик.

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

Помогайте своим посетителям определить активное пространство - отступы, выделения, смена цвета и прочие вещи, которые можно задать для касаний, прописывайте псевдокласс hover для ссылок и кнопок.

Реализация Media Queries с примерами

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

Media queries - логические выражения, обращение к ним подразумевает ответ с параметром true или false. Если результат запроса true, то есть, юзер-агент или размеры устройства соответствуют заданному типу носителя, то автоматически применяются правила стиля, указанные внутри media-блока.

Медиа запросы можно назначать по параметрам:

  • ширина и высота окна браузера;
  • ширина и высота устройства;
  • ориентация - ландшафтный или портретный режим;
  • разрешение экрана.

Актуальный список аргументов доступен в официальной спецификации.

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

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

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

Для исправления убираем фиксированные рамки, прописав в стили шаблона:

@media only screen and (max-width: 1000px) {

Nav { width: 100%; }

Теперь если ширина экрана юзера составляет менее 1000 px, то width меню будет равен 100% его размера. Основная версия шаблона при этом выглядит, как прежде. Замена свойства убрала нижнюю полосу прокрутки при сжатии экрана.

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

Дописываем в тот же самый медиаквери:

Block { width: 35%;}

Как узнать оптимальные размеры для блоков своего сайта? Считать вручную или взять за основу любую готовую сетку - fluid grid. Можно ориентироваться на имеющиеся стандарты: в двухколоночных макетах при ширине окна 980-1050px обертка принимается за 95%, контент - 60% и на сайдбар оставляют 30%. Оставшееся пространство уходит на формирование бордюров и margin для аккуратности.

Впрочем, можно применить box-sizing для контента, чтобы не высчитывать каждый раз пиксели, а работать по общим габаритам.

Переходим к заданию отображения на экранах с меньшим разрешением:

@media only screen and (max-width: 600px) {

Block {

Float:none;

Width:85%;

Margin: 1em auto;

Если экран менее 600 px, то наши блоки должны встать в одну колонку - убираем обтекания, задаем новые отступы, оцентровываем и меняем ширину. Чаще ставится 100%, но если это по каким-то причинам неудобно, устанавливаем свой размер.

Так задавать можно не только габариты блоков контента, но и их отображение. Например, запретить показ крупных элементов, заменив их на любые удобные.

Продемонстрируем возможности на примере смены цветов и отображений.

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

Скрытие навигации требуется в большинстве случаев - она заменяется кнопкой. Уместнее это делать при помощи javascript, можно использовать готовые решения.

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

Объявить @media правила можно в любом месте внутри существующей таблицы стилей или создать отдельную для этих деклараций, а затем импортировать ее в основной CSS с помощью @import-правила.

Мобильная версия сайта: как сделать и на что обратить внимание

Медиаквери понимают все современные браузеры, но это не сработает в IE 8 и ниже. Проблема решается обращением к старым IE посредством условных комментариев. Их нужно прописывать в коде шаблона, а не в CSS.

Сам скрипт доступен на гитхабе (https://github.com/scottjehl/Respond ), добавляет в старые IE поддержку минимальных и максимальных габаритов и медиаквери.

Еще одна проблема - адаптивный дизайн подразумевает использование Html5, который опять же непонятен старым браузерам. Лечится хаком:

Document.createElement("header");

Document.createElement("nav");

Document.createElement("section");

Document.createElement("article");

Document.createElement("aside");

Document.createElement("footer");

Код прописывается в html, дополнительно в CSS устанавливается блочное отображение созданных элементов:

header, nav, section, article, aside, footer {display:block;}

Сразу же затронем вопрос - как сделать, чтобы некоторые скрипты отображались лишь при заданных параметрах экрана. Если стоит jquery, в код шаблона потребуется добавить простенький скрипт. Цифры меняются на необходимые. Читается так: если ширина окна превышает 980 пикселей, к странице применяется скрипт, указанный в пути. Можно задать несколько, синтаксис пишется по аналогии через точку с запятой внутри фигурных скобок.

If ($(document).width() > 980) {

$.getScript("путь к скрипту");

Еще один момент - как мобильный браузер айфона должен обрабатывать отдаваемый контент, разрешено ли его увеличение. Для этого в head прописывается инициальная шкала:

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

Если сайт переверстывается на локальном сервере, корректность можно определить в ami.responsivedesign.is . Владельцам денвера для верного отображения потребуется сменить кодировку на utf-8, отредактировав серверный файл httpd.conf.

Сервис продемонстрирует, как выглядит проект на разных устройствах.

Дополнительно шаблон тестируется https://developers.google.com/speed/pagespeed/insights/ или в спецформе https://www.google.com/webmasters/tools/mobile-friendly , а также в вебмастерских.

В Яндексе это выглядит подробно, а Google просто сообщит, что проблемы отсутствуют.

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

Ниже нажав на одну из кнопочек вы сможете скачать 2 примера страницы свертанной в данном уроке и уже просто работать с готовыми страницами и копировать код.

С уважением, Галиулин Руслан.

    в низу странички есть пункт полноэкранный режим, нажимаете его и с мобильного переходите в обычный режим

    Неужели на нашем любимом Большом Вопросе попадаются настолько легкие вопросы!?

    Так же, как уже уточнили, можно в браузерной строке удалить букву m, только не забудьте и стоящую после нее точку, она так же подлежит удалению)

    Там в самом низу страницы если прокрутить написанно перейти на полную версию сайта,нажимаете и вс.

    Если вы сидя с компьютера перешли на мобильную версию и не знаете как из нее выйти, то вам нужно перейти на главную страницу и справа внизу вы увидите кнопку Полная версия.

    Есть еще один способ. Нажмите на адресную строку и удалите в адресной строке букву m.

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

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

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

    По мне мобильная версия ВКонтакте намного удобнее и пользуюсь я именно этой (мобильной) версией ВК.

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

    Прокручиваем страницу (пока в мобильной версии) вниз и находим кнопку Полная версия и нажимаем эту кнопку. У меня эта кнопка находится внизу настроек и помощи:

    Нажимаем на нее и нас перебрасывает в/на полную версию сайта, тем самым мы вышли из мобильной версии.

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

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

    Или просто воспользоваться функцией - перейти на полную версию, перейдя на полную версию, которая отображается в компьютере - вы сможете увидеть кнопку - Выйти.

    Я сразу и не понял в чем, собственно, вопрос. Подумал, что Вы с телефона не можете выйти из мобильной версии вконтакте. Если так, то можно зайти в диспетчер задач телефона и просто снять задачу.

    Если же у Вас проблема на самом компьютере, то я даже никогда не обращал внимания на то, что внизу страницы вконтакте есть кнопка мобильная версия и полная версия. Нажмите просто на ту версию, которая Вам нужна.

    Я выхожу из приложения ВКонтакте на смартфоне редко. Было пару раз, когда сыну нужно было зайти на свою страницу.

    Сначала на меню(там где ваша аватарка, новости, ответы, сообщения и так далее по списку) выбираете настройки, открываете.В меню настроек в самом низу будет строка выйти.Нажимаете и выходите.

    Потяните страницу вправо. В главном меню в мобильной версии зайдите в настройки. Далее спуститесь вниз по списку. Там и будет кнопочка выйти. Кликайте на не и выходите из мобильной версии.

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

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

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

    Если же вы сидите в мобильной версии через браузер, то следует перейти к полной версии (кнопка в верхнем левом углу) и выйти обычным способом.

Бывает, что открывается мобильная версия ВКонтакте, а надо войти в полную версию (для компьютера, обычную, веб-версию). Как это сделать?

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

Как переключиться на полную версию

Если ты сейчас в мобильной (m.vk.com), можно самому переключиться с мобильной на полную:

Как открыть полную версию ВК на компьютере, планшете

Нажми «Версия для компьютера» в левой колонке меню, внизу (предпоследний пункт):

Как открыть полную версию ВК на телефоне

Внимание! Для мобильного приложения этот совет не подходит (приложение — это установленная у тебя на телефоне программа с иконкой «VK»). Полную версию можно открыть в мобильной версии сайта ВК, в которую ты заходишь через браузер на телефоне (например, Chrome или Safari) по адресу m.vk.com.

  • Открой главное меню в мобильной версии (кнопка в левом верхнем углу в виде трех полосок).
  • Прокрути его вниз, если не видно все пункты.
  • Нажми «Версия для компьютера».

    • А еще можно открыть полную версию ВК просто по ссылке (об этом — далее).

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

    Как быстро открыть полную версию ВКонтакте

    Ты можешь открыть полную версию ВКонтакте через стартовую страницу «Вход». Открой ее по адресу сайт , найди ВКонтакте и нажми туда. Можно подключить свою страницу кнопкой «Вход» (надо будет дать разрешение на доступ), чтобы всегда видеть, есть ли у тебя новые сообщения и другие события, не заходя в онлайн. Входить в полную версию ВК можно одним нажатием на прямоугольник «ВКонтакте», а также быстро открывать сообщения, друзей в онлайне, новые комментарии и т.п.

    Как открыть полную версию ВКонтакте по ссылке

    Полную версию ВКонтакте можно открыть напрямую по этой ссылке: Полная версия . Полная версия еще называется «обычная», «нормальная», «веб-версия», «компьютерная», «десктопная».

    Как сделать, чтобы по ссылке открывалась полная версия ВК, а не мобильная?

    Пример.
    Было https://m.vk.com/сайт
    Стало https://vk.com/сайт

    Точно таким же способом можно исправить адрес в адресной строке браузера, чтобы открыть полную версию той же самое страницы, на которой ты находишься. Надо нажать на адресную строку, убрать в начале букву m и точку, а затем нажать Enter на клавиатуре (или кнопку «Перейти», «Открыть» в самом браузере).

    Зачем нужна полная версия ВК, чем она лучше мобильной?

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

    Почему открывается мобильная версия?

    Обычно это бывает из-за того, что кто-то запостил ссылку типа m.vk.com... — вот эта буква «m» в начале ссылки и ведет тебя на мобильную версию. Просто тот человек сидел через мобильную и скопировал такую ссылку у себя. Когда по ней переходят другие люди, они попадают на мобильную. Ничего страшного, ведь ты теперь знаешь, как зайти в полную версию ВКонтакте!

    Почему в полной версии что-то не работает, не получается?

    Чаще всего, если у тебя проблемы в полной версии сайта ВКонтакте — значит, у тебя проблемы с твоим браузером. Очисти временные файлы , переустанови его, обнови или поставь другой.

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

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

    Кроме экономии трафика, облегченный вариант сайта помогает “разгрузить” работу ПК со слабыми характеристиками. Чтобы зайти на мобильную версию ВК через ПК, достаточно набрать адрес в формате https://m.vk.com/ , а не https://vk.com/. Перед нами появляется упрощенный (в сравнении с полной компьютерной версией) интерфейс. Есть необходимые поля для ввода телефона или e-mail, использующихся в качестве логина, и пароля. Никакой лишней информации, никаких картинок.

    Поля для ввода учетных данных

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

    В мобильной версии VK через компьютер можно:

    • переписываться с друзьями;
    • просматривать видеозаписи;
    • знакомиться с новыми комментариями и ответами в разделе “Уведомления”;
    • читать информацию в группах;
    • прослушивать музыку и многое другое.

    К разочарованию геймеров, в версии для смартфонов не запускаются игры и приложения. Выход – пользоваться для этого полной версией сайта. Не нужно открывать новую вкладку и снова вводить адрес, достаточно кликнуть на кнопку “Полная версия” в самом низу колонки с названиями разделов, которая расположена на странице слева.

    Но это не единственный способ доступа к мобильной версии ВК через компьютер.

    Вход в мобильную версию ВК на компьютере через Google Chrome

    Если пользователь для работы в интернете предпочитает браузер Google Chrome и желает просматривать ВК в мобильной версии, то можно применить инструменты разработчика. Открываются они следующими способами:

    • клавишей F12;
    • сочетанием кнопок Ctrl + Shift + I;
    • входом в меню (три вертикальные точки в правом верхнем углу сайта), затем “Дополнительные инструменты” и “Инструменты разработчика”.

    Потом нужно одновременно нажать Ctrl + Shift + M либо кликнуть по иконке Toggle device toolbar.

    Открываем Toggle device toolbar

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

    Отображение страницы как на экране телефона

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

    Выбираем гаджет

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

    Выбираем гаджет

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

    Устанавливаем масштаб страницы и другие значения

    После названий гаджетов и параметров разрешения экрана видим zoom – масштаб выставляется в пределах 50–150% (после нажатия на стрелочку рядом с установленным значением). В следующей вкладке мобильную страницу ВК можно отключить от интернета (режим offline) и заново подключить (online). И, наконец, нажимая на значок вращения, мы поворачиваем открытое окно сайта так, как нам удобно – в вертикальное либо горизонтальное положение.

    Управляем отображаемой областью

    Курсор в мобильной версии ВК представляет собой небольшой кружок серого цвета. Этого размера вполне хватает для того, чтобы точно выбирать нужные разделы. Страница прокручивается либо колесиком мышки, либо захватом и перемещением ЛКМ. Панель с инструментами разработчика закрывать не следует, т. к. вместе с ней исчезнет экран выбранного мобильного устройства.

    Такой же способ отображения мобильной версии ВК на компьютере можно применить и в Яндекс.Браузере. Есть только одно отличие – в вызове инструментов разработчика из главного меню. Необходимо зайти в него (три горизонтальные полоски в правом верхнем углу страницы), затем “Дополнительно”→”Дополнительные инструменты”→”Инструменты разработчика”. Кнопка F12 и сочетание клавиш Ctrl + Shift + I работают так же, как и в Google Chrome.

    Таким образом, в мобильную версию ВК можно войти не только с привычного гаджета, но и через компьютер.

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

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

    Большой недостаток такой схемы - психологический дискомфорт человека, увидевшего с планшета или смартфона совсем не тот сайт, который он привык читать с ПК или ноутбука. Появляется потребность «поиска нужной кнопки» (или, например, исчезнувшей третьей колонки), возникает связанное с этим раздражение, т.к. люди уже избалованы современными сервисами, делающими за нас буквально все. В данном же случае человек видит урезанный функционал любимого сайта, отсутствие привычных меню на нужном месте и т.п. Сразу появляется желание перейти в футер ресурса и нажать кнопку «Полная версия» или вообще закрыть его почитать что-то еще.

    Есть мнение, что самый лучший дизайн - тот, который максимально хорошо и удобно смотрится на большинстве устройств в неизменном для глаза виде. По крайней мере, я к этому стремился.

    В итоге, пользуясь самым распространенным мобильным браузером под Android - Google Chrome и видя явно «урезанную» внешне страницу какого-либо сайта, мне постоянно приходилось ставить в «Настройках» галочку «Полная версия». Сделать такую настройку постоянной оказалось в Chrome невозможно. Для некоторых сайтов показ «полной версии» запоминается, для других - нет, для третьих (например, МТС) вообще не срабатывает. В определенный момент с меня этого хватило. Пришлось искать альтернативу.

    К сожалению, мой любимый настольный Mozilla Firefox , в котором так удобно работать на ПК с исходным кодом, в мобильном варианте меня огорчил - не понравилось масштабирование шрифтов, а система отключения «мобильных версий» в нем аналогична Chrome и не постоянна.

    Браузер Opera для Android. Скачав его на свой смартфон, я, наконец, решил данную проблему. Прежде всего, речь идет не об Opera Mini, которая пусть и сжимает трафик, но крайне убога в своей реализации, т.к. не понимает многие скрипты и стили, искажая привычный дизайн современных сайтов. Мы говорим о полной версии мобильной Opera. Для желающих экономить трафик и сжимать картинки - в ней тоже есть режим «Турбо» (Opera Turbo), так что просто активируйте его в «Настройках». Там же вы найдете и нужный нам пункт:

    User agent: «Мобильное устройство» или «Настольный компьютер».

    По умолчанию стоит «Мобильное устройство». Выбираем «Настольный компьютер».

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

    К счастью, браузер Opera меня устроил и в других отношениях: удобная настройка «Вид приложения» - «Телефон», «Классика» или «Планшет» настраивает отображение дополнительных кнопок и меню. Шрифты масштабируются как надо, странички выглядят опрятно и читаемо.

    Единственное, жаль, что я пока так и не смог подобрать для себя универсальный браузер как для настольного ПК, так и смартфона, потому не могу пользоваться удобной системой синхронизации закладок, истории и тому подобного.