Как всегда открывать полную версию веб-сайта на iPhone и iPad
Несколько лет назад попытка открыть более-менее серьезный сайт на смартфоне превращалась в весьма плохую затею, так как на небольшом экране невозможно полноценно отобразить все ссылки, текст, графику, видеоролики. Кроме того, иногда вдобавок все это перекрывает ещё и громадный рекламный баннер. Соответственно нужно было как-то увеличивать отображаемый контент и работать с вебстраницей «по частям». К счастью, вебдизайнеры довольно быстро сообразили, что можно делать версии сайтов, адаптированные для мобильных устройств, с которыми будет удобно работать. Некоторые разработчики также решали проблему, выпуская мобильные приложения для iOS, Android и Windows.
Safari — лучший браузер на мобильных гаджетах Apple, который имеет много возможностей
Какая версия сайта открывается по умолчанию на iPhone и iPad
На сегодняшний день большинство сайтов сами умеют определять, с какого устройства и каким браузером их пытаются открыть, и если пользователь работает в браузере на смартфоне или планшете, ему по умолчанию будет загружена мобильная версия сайта. Так работает практически на всех Android смартфонах и планшетах, и на iPhone. На iPad так происходит до версии iOS 12 включительно. Начиная с iPadOS 13, встроенный браузер Safari по умолчанию пытается открыть версию, предназначенную для десктопных браузеров.
Как открыть версию сайта для компьютера на iPhone
Иногда все же требуется работать не с мобильным приложением, а с самим сайтом, причем с его полной десктопной версией. У меня такая необходимость возникала при работе с сайтом моего банка, поскольку в мобильном приложении реализованы не все функции клиент-банка. Также это было необходимо для прослушивания «бесплатной» музыки и расширенного управления списком друзей ВКонтакте, для сортировки плейлистов на YouTube-канале. Да и мало ли сценариев может быть в жизни, когда на какое-то время на экране мобильного гаджета возникает необходимость отобразить версию веб страницы для компьютера.
Чтобы отобразить десктопную версию сайта на iPhone и iPad под управлением iOS ранее 13 версии, нужно в Safari тапнуть по кнопке «Поделиться» и внизу меню прокрутить вправо и выбрать соответствующий пункт.
Или воспользоваться более легким способом – коснуться и удерживать палец на кнопке «Обновить» в адресной строке браузера. Последний поймёт, что ему нужно запросить десктопную версию сайта.
Начиная с iOS 13, на iPhone необходимо в левой части адресной строки Safari тапнуть на кнопке АА и в открывшемся меню выбрать «Запрос настольного веб-сайта».
Открываем десктопную версию сайта на iPhone
Если же по каким-то причинам требуется напротив открыть мобильную версию сайта, например на iPad, где по умолчанию iPadOS настроена на открытие версии для компьютера, то нужно в меню, открываемом при тапе по кнопке АА, выбрать «Запрос мобильного веб-сайта».
Открываем мобильную версию сайта на iPad
Как всегда открывать нужный сайт на iPhone в настольной версии
Для того, чтобы всегда открывать определенный сайт на iPhone в десктопной версии в iOS 13, нужно в меню Safari, открываемом по тапу на кнопке АА в адресной строке, выбрать «Настройки веб-сайта» и в открывшейся странице параметров включить первый сверху переключатель «Запрос настольного веб-сайта». Теперь нужный сайт всегда будет открываться в своей полной версии, предназначенной для просмотра на компьютере.
Этот сайт всегда будет открываться на iPhone в полной версии
Как узнать, какие сайты будут всегда открываться на iPhone в полной версии
Для управления сайтами, которые открываются в десктопной версии, предназначен соответствующий пункт настроек Safari. Достаточно пройти по пути Настройки–Safari и в разделе «Настройки для веб-сайтов» выбрать второй пункт «Запрос настольного веб-сайта». Откроется страница настроек, на которой будут представлены все сайты, для которых пользователь определил режим открытия в полной версии. Напротив каждого сайта есть переключатель, который можно перевести в положение «Выключено», если нужный сайт потребуется открыть по умолчанию в мобильной версии.
Управление сайтами, которые открываются в настольной версии в настройках
Также возможно полное удаление из списка сайта, для которого предусмотрено исключение в виде открытия его в настольной версии. Для этого тапаем справа вверху по кнопке «Править» и, отметив нужные записи, тапаем «Удалить» в верхнем левом углу. При желании можно удалить все записи для чего тапаем «Удалить все настройки».
Вам также могут быть интересны еще 7 трюков для работы в Safari на iPhone и iPad.
Как открывать вообще все сайты на iPhone исключительно в полной версии
Если пользователем не был добавлен ни один сайт для открытия его на iPhone в настольной версии, то в соответствующем пункте настроек Safari будет только один пункт «Все веб-сайты» с переключателем в положении «Выключено». Достаточно перевести этот переключатель в положение «Включено», как браузер начнёт запрашивать всегда десктопные версии сайтов. Кстати, на iPad под управлением iPadOS этот переключатель по умолчанию стоит в положении «Включено».
Так все сайты на устройстве будут открываться в настольной версии
Как на iPad вернуть загрузку мобильной версии сайта по умолчанию
Бывают и обратные ситуации, когда мобильное приложение для конкретного сайта написано исключительно для iPhone. Соответственно, при установке его на iPad оно отображается в небольшом окошке причём только в портретной ориентации. Смотрится это ужасно неэстетично и работать с этим некомфортно. Пользователи Instagram на iPad понимают, о чем я. В тоже время полная версия сайта может быть слишком перегружена различными элементами и, как результат, быть плохоюзабельной даже на немаленьком экране iPad Pro.
В таком случае отличным решением является как раз выбор мобильного представления сайта. Для меня таким сайтом является фирменный сервис «Укрзалізниці» для покупки билетов на железнодорожный транспорт. Соответствующее мобильное приложение существует исключительно для iPhone, а с полной версией сайта удобно работать только на компьютере с хорошей диагональю экрана. Поэтому для таких случаев я тапаю по кнопке АА в адресной строке Safari, выбираю «Настройки веб-сайта» и перевожу переключатель «Запрос настольного веб-сайта» в положение «Выключено». При этом соответственно всегда есть возможность управлять такими исключениями также как и на iPhone в настройках Safari в разделе «Настройки для веб-сайтов» пункт «Запрос настольного веб-сайта».
Отключаем полную версию сайта на iPad
Управление списком сайтов на iPad, которые всегда открываются в мобильной версии
Пользуетесь ли вы соответствующими возможностями на iOS и iPadOS? Делитесь мнением в комментариях и в нашем Telegram-чате.
Как посмотреть мобильную версию сайта с компьютера?
Возможность посмотреть мобильную версию сайта с компьютера — это полезный навык, который пригодиться дизайнерам, тестировщикам, маркетологам и специалистам, часто работающим с сайтом.
- В Google Chrome;
- В Mozilla Firefox;
- Ручной метод;
- Для чего это нужно.
Видеоинструкция
В правом-верхнем углу кликаем на значок «Мобильный телефон».
Теперь сайт открыт с мобильного телефона, а при необходимости можно сменить вид на нужный смартфон/планшет, где справа будет указано расширение.
Также доступно изменение масштаба.
Дополнительно можно выбрать способ отображения (online/offline).
При необходимости стоит изменить ориентацию экрана на альбомную или стандартную.
В Mozilla Firefox
Посмотреть мобильную версию сайта с компьютера в Mozilla можно аналогично кликнув в любую точку сайта правой клавишей мыши и в меню выбрав «Исследовать элемент».
Далее в нижнем-правом углу потребуется выбрать вид «Мобильный телефон».
При необходимости нажав на «Адаптивный» можно выбрать нужную модель смартфона.
Справа можно настроить разрешение экрана (настраивается вручную).
Далее идет возможность изменить ориентацию экрана.
После можно изменить DPR (Соотношение пикселей устройства к снимку экрана).
Как и в Google Chrome можно изменить способ подключения на 2G, 3G, GPS, 4G или
- Без ограничения;
- GPRS;
- Regular 2G;
- Goog 2G;
- Regular 3G;
- Good 3G;
- Regular 4G/LTE;
- DSL;
- Wi-Fi.
Также при необходимости можно включить имитацию устройства (требует перезагрузки браузера).
Ручной метод
В случае отсутствия навыков работы с консолью разработчика можно вручную изменить параметры экрана, изменяя размер браузера. Например, потянув за один из углов или стенок браузера можно сжать его до разрешений мобильного телефона или любого другого устройства.
Для чего это нужно?
Данный навык будет полезен при:
- Проверки корректности отображения верстки сайта;
- Тестировании турбо-страниц (в том числе и для интернет-магазинов) и AMP;
- Тестировании мобильной выдачи.
Подписывайтесь на наш канал в Яндекс.Дзен
Подписывайтесь на наш Telegram-канал
Как проверить мобильную версию сайта с компьютера
Иногда возникает необходимость проверить есть ли у сайта версия для мобильных устройств. Может ли дизайн сайта адаптироваться под раздичные виды устройств и разные размеры экранов.
Изображение. Обычная версия дизайна сайта
Самый простой вариант для проверки мобильной версии, который первым приходит в голову — это просто открыть сайт со своего мобильного телефона. Если у сайта присутствует мобильная версия или сайт адаптируется под любые виды устройств, то при его открытии на смартфоне можно увидеть следующее:
Изображение. Мобильная версия дизайна сайта
- Вам удобно просматривать содержимое сайта. Тексты читаются легко. Кнопки и ссылки можно нажать не увеличивая экран.
- Сайт влезает целиком по ширине экрана смартфона.
- При повороте экрана блоки сайта (тексты и картинки) перестраиваются. Не возникает искажений в контенте и элементах дизайна.
- Основное меню сайта (возможно и контактные данные) вынесены в отдельное окно, которое появляется при нажатии специального значка в верхней части экрана.
- Контактные телефоны кликабельны. При нажатии телефон открывается для набора в телефонной книге смартфона.
Иногда необходимо проверить мобильную версию сайта, когда под рукой нет смартфона. Или же бывает необходимость проверить мобильную версию сайта на разных смартфонах. В этом случае в браузерах таких как Google Chrome или Mozilla Firefox есть специальный инструмент. С помощью него можно легко проверить мобильную версию сайта, выбирая нужное мобильное устройство в меню. При выборе нужного устройства браузер будет имитировать размеры его экрана и вы увидите как отображается ваш сайт.
Адаптивный дизайн или мобильная версия?
В чем же основное отличие мобильной версии от адаптивного дизайна? Все очень просто.
Адаптивный дизайн
Сайты с адаптивным дизайном имеют один файл стилей дизайна css, в котором прописано поведение всех блоков сайта в зависимости от размеров экрана устройства. При загрузке страницы на каком-либо устройстве сайт определяет ширину и высоту экрана и примеяет именно те стили из файла, которые подходят под этот экран. Причем блоки адаптируются не только при загрузке, но и моментально, при изменении размеров окна браузера. Другими словами в файле стилей заранее учтены все возможные размеры экранов.
Мобильная версия
Сайт с мобильной версией имеет два отдельных файла стилей дизайна. Например style.css и style_mobile.css Отдельный файл для ПК и отдельный файл для мобильных устройств. Нужный файл стилей подгружается в зависимости от устройства с которого сайт открывают. Сайт определяет это устройство и подключает тот подходящий файл стилей .css Как правило, в файле стилей для ПК прописано, что основная область для контента сайта зафиксирована посередине экрана и ширина этой области неизменна, например: 1024px. А в файле с мобильными стилями прописано, что контентная область сайта располагается по ширине устройства.
При создании сайтов наша веб студия в обязательном порядке создает либо мобильную версию, либо адаптивный дизайн, в зависимости от пожеланий клиента. Мы делаем это, так как с каждым годом все больше людей пользуются интернетом в основном со смартфонов. Если у вашего сайта отсутствует мобильная версия, то вы гарантировано теряете более половины клиентов.
Проверяем мобильную версию.
Чтобы проверить мобилную версию сайта с ПК нужно проделать ряд действий.
- 1. Откройте сайт в браузере GoogleChrome или MozillaFiefox
- 2. Нажмите F12, чтобы открыть инструменты разработчика
- 3. В открывшемся окошке найдите значок переключения на мобильные устройства и нажмите его.
- 4. Теперь в верхнем меню можно выбирать устройство. Выберите любое устройство из списка, например iPhone X
- 5. Нажмите F5, чтобы обновить страницу и чтобы отобразилась мобильная версия. Это необходимо сделать, так как сайт определяет тип устройства именно при загрузке страницы.
- 6. Все готово. Можно проверять сайт. Походите по страницам, попробуйте открыть меню, понажимать кнопки, чтобы увидеть мобильную версию сайта.
Проверяем адаптивный дизайн.
Для проверки адаптивности достаточно сменить полноэкранный режим браузера уменьшив окно. И затем просто тянуть мышью за правую или левую границу окна браузера. Если сайт с адаптивным дизайном, то он будет моментально реагировать и изменять свой вид (вы увидите: изменениние размеров блоков, текстов, изображений, перестроение и т.д.).
Как открыть с компьютера мобильную версию сайта
Нашли ошибку? Выделите мышкой и нажмите Ctrl+Enter
Просмотр мобильной верстки с ПК
Чтобы просмотреть мобильную версию сайта с ПК, необходимо воспользоваться средствами браузера для разработчиков.
В Google Chrome, Mozilla Firefox и Яндекс браузере инструменты разработчика открываются клавишей F12.
В браузере Opera нужно открыть меню браузера и кликнуть пункт Другие инструменты → Показать меню разработчика.
Появится пункт «Разработка». Отсюда можете вызвать подпункт «Инструменты разработчика» или зажать комбинацию Ctrl+Shift+I.
Расположение кнопки перехода в режим адаптивного дизайна у Google Chrome, Opera и Яндекс браузера:
Кнопка перехода в режим адаптивного дизайна у Mozilla Firefox: