Safari режим мобильного телефона
По умолчанию Safari для iPadOS маскируется под настольный браузер (со строкой пользовательского агента Safari для Mac для загрузки). И с учетом того, что iPadOS ориентирована на настольные компьютеры, это имеет смысл.
Тем не менее, iPad по-прежнему в основном использует сенсорный ввод, и есть несколько случаев, когда некоторые настольные сайты не работают с вашими любимыми жестами.
Таким образом, вы можете переключить определенные сайты в мобильный режим, если их настольные версии не отвечают должным образом. Но как это сделать?
К счастью, Safari для iPadOS предлагает несколько способов запуска сайтов в мобильном режиме. Давайте проверим три лучших метода, которые работают безупречно.
Вы можете легко настроить Safari на переключение вкладки в мобильное представление всякий раз, когда у вас возникнут проблемы с представлением сайта на рабочем столе. Начните с нажатия значка ᴀA в левом углу адресной строки Safari.
В появившемся меню нажмите Показать мобильный веб-сайт. Как только вы это сделаете, Safari автоматически перезагрузит вкладку и покажет вам мобильную версию сайта.
Сайт на вкладке будет продолжать отображаться в мобильном режиме, даже если вы перейдете на другую страницу того же сайта.
Заметка: Изменение применяется только к активной вкладке, которую вы в данный момент просматриваете, а не ко всему браузеру. Вы должны повторить это действие для других вкладок, если хотите переключить другие сайты в мобильное представление.
Если вы хотите вернуться в режим рабочего стола, снова откройте меню со значками ᴀA, а затем коснитесь параметра «Показать сайт рабочего стола». Safari автоматически вернет вкладку в режим рабочего стола, если вы перейдете на другой веб-сайт.
Если вы хотите постоянно загружать определенный веб-сайт в мобильном режиме, независимо от того, на какой вкладке вы находитесь, вам необходимо внести небольшие изменения в настройки содержимого сайта. Вызовите меню ᴀA, а затем нажмите «Настройки веб-сайта».
На открывшейся странице настроек веб-сайта выключите переключатель рядом с параметром «Запросить сайт рабочего стола» и нажмите «Готово», чтобы применить изменения.
Safari автоматически обновит веб-сайт и перезапустит его в мобильном режиме. И это будет продолжаться, даже когда вы запустите сайт (и все связанные с ним веб-страницы) на других вкладках. Это будет продолжаться, даже если вы выйдете из приложения Safari и снова откроете его.
Если вы хотите вернуться к использованию настольной версии веб-сайта, обязательно откройте сайт на той вкладке, на которой вы сейчас находитесь, откройте лист настроек веб-сайта из меню на основе значков ᴀA, а затем включите переключатель для запроса рабочего сайта.
Кроме того, вы можете временно запросить настольную версию, нажав опцию «Показать настольный сайт» в меню ᴀA.
3. Загрузите все сайты в мобильном режиме.
Устали загружать сайты в режиме рабочего стола? Фактически вы можете настроить Safari для загрузки всех веб-сайтов в мобильном режиме по умолчанию. Это идеально, если у вас нет клавиатура или мышь на вашем iPad, и вместо этого хотите получить отличные сенсорные возможности Safari.
Начните с открытия приложения «Настройки» на своем iPad. Спуститесь в левую часть экрана, выберите Safari, а затем пролистайте список настроек Safari, пока не дойдете до раздела «Настройки для веб-сайтов». Нажмите на опцию Request Desktop Website под ним.
Заметка: Safari будет продолжать открывать сайты в мобильном режиме, пока вы не вернетесь к параметру «Запросить веб-сайт рабочего стола» в разделе «Настройки»> «Safari» и не включите переключатель рядом с «Все веб-сайты».
Если есть сайты, которые вы вручную настроили для отображения в мобильном режиме с помощью предыдущего метода, экран запроса веб-сайта рабочего стола будет отображаться несколько иначе.
Мобильный режим спешит на помощь
Apple поступила правильно, настроив Safari на iPadOS для запуска сайтов в режиме рабочего стола по умолчанию. Однако использование клавиатуры и мыши для взаимодействия с некоторыми из более сложных сайтов, безусловно, имеет значение. Так что в следующий раз, когда веб-сайт расстроит вас, знайте, что мобильный режим находится всего в нескольких нажатиях.
Следующий:
Знаете ли вы, что в iPadOS можно использовать несколько окон Safari? Вот все, что вам нужно знать об их использовании.
Есть несколько способов потестировать и подебажить сайт или веб-приложение в мобильном Safari:
- с помощью user agent в десктопном браузере;
- с помощью физического устройства – реального iPhone или iPad подключенному к Mac через USB-порт;
- с помощью виртуального устройства – симулятора iOS в Xcode.
Во всех трех случаях понадобится Mac и десктопный Safari со включённым Web Inspector.
Как включить Web Inspector в Safari
Если в воем Safari на Mac вы не можете найти веб-инспектор, значит его нужно включить. Для этого, из главного меню перейдите Safari – Preferences – Advanced (Safari – Настройки – Дополнения), отметьте пункт Show Develop menu in menu bar (Показывать меню Разработка в строке меню). В меню появится пункт Develop (Разработка), а в контекстном меню Safari, пункт для вызова веб-инспектора Inspect Element (Исследовать Элемент).
Горячие клавиши для вызова веб-инспектора: Opt + Cmd + I
Используя команды меню Develop, можно просматривать код веб-страниц, менять юзер агент, включать и отключать различные элементы страниц, чистить кэш и другое.
Отладка мобильного Safari с помощью User Agent и Web Inspector
Чтобы эмулировать работу сайта на мобильном Safari, перейдите на сайт, включите режим адаптивного дизайна Develop – Enter Responsive Design Mode (Разработка – Войти в режим адаптивного дизайна), затем выберите устройство и при необходимости юзер агент (версию мобильного браузера).
Для отладки используйте веб-инспектор. Доступны те же инструменты инспектора, что и для десктопной версии сайтов, включая консоль.
Отладка мобильного Safari с помощью iPhone или iPad
В настройках мобильного Safari: Settings – Safari – Advanced (Настройки – Safari – Дополнения) включите Web Inspector (Веб-инспектор).
На устройстве в мобильном Safari перейдите на сайт, отладку которого хотите провести. Затем откройте Safari на Mac. Если устройство корректно подключилось, то в меню Develop (Разработка) появится пункт с названием вашего устройства, а в подменю будет пункт с названием открытого на устройстве сайта. Клик по нему запустит веб-инспектор и вы сможете провести отладку.
Отладка мобильного Safari с помощью симулятора iOS в Xcode
Удобный способ для разработки и тестирования адаптивных сайтов и веб-приложений на устройствах максимально приближенных к реальным.
Simulator – это приложение, которое поставляется в комплекте с Xcode. Скачайте его из магазина приложений .
Откройте Xcode. В меню выберите Xcode – Open Developer Tool – Simulator (Xcode – Открыть инструменты разработчика – Симулятор). Когда симулятор запустится, рекомендую сразу закрепить его в Dock, чтобы каждый раз не запускать Xcode.
Выберите устройство для эмуляции в меню Hardware – Device.
В устройстве на эмуляторе откройте Safari и перейдите на сайт. Затем откройте Safari на Mac. В меню Develop (Разработка) появится пункт с Simulator – Модель выбранного устройства, а в подменю будет пункт с названием открытого на устройстве сайта. Клик по нему запустит веб-инспектор и можно будет провести отладку.
Полезные ссылки
На этом всё. Но вы можете поддержать проект. Даже небольшая сумма поможет нам писать больше полезных статей.
Если статья помогла или понравилась, пожалуйста поделитесь ей в соцсетях.
Узнайте, как просмотреть отзывчивый вид мобильного сайта в macOS Safari на компьютере или ноутбуке. Мобильный сайт можно просматривать в режиме разработчика в Safari.
Вы хотите загрузить сайт для ПК в мобильной версии в браузере Safari на компьютере с macOS? Мы вас прикрыли. Ниже приведены подробные инструкции по включению опции просмотра мобильного сайта в Safari.
Этот параметр обычно используется веб-разработчиками и дизайнерами, когда они хотят проверить внешний вид нового сайта на экранах разных размеров. Когда вы загружаете веб-сайт в настольном браузере Safari, будет загружена полная версия рабочего стола. Однако, чтобы переключиться на мобильный сайт, вы можете либо уменьшить размер экрана, либо включить режим адаптивного дизайна.
Аналогичная опция также доступна в инструментах разработчика Chrome, где вы можете переключать настройки устройства, чтобы переключаться между отзывчивым и обычным представлением рабочего стола.
Связанный: Как запросить и просмотреть настольный сайт в Safari iOS / iPadOS?
Как упоминалось ранее, мобильный вид в Safari поможет проверить работу веб-сайта без использования Safari на iPhone. Просто включите меню разработки и запустите режим адаптивного дизайна.
Как включить меню разработки в Safari macOS?
Нам нужно включить меню разработки, чтобы просмотреть вариант адаптивного сайта. Развитое меню по умолчанию скрыто, но вы можете легко включить его.
Вот шаги, чтобы включить панель меню «Разработка» в браузере Safari на компьютере Mac:
Это активирует меню «Разработка» в списке строк меню браузера Safari.
Как просмотреть мобильный адаптивный сайт в Safari Mac?
Нет такой отдельной опции, которая могла бы помочь нам создать адаптивный веб-дизайн для мобильных устройств. Однако эта опция скрыта в меню «Разработка». Это поможет вам отобразить мобильное представление в браузере Safari Mac.
Вот шаги для просмотра мобильного адаптивного веб-дизайна в Safari macOS:
- Запустите браузер Safari на компьютере Mac.
- Открыть сайт что вы хотите в мобильной версии сайта.
- Щелкните меню «Разработка», чтобы просмотреть параметры.
- В раскрывающемся списке выберите параметр «Перейти в режим адаптивного дизайна».
Это перезагрузит веб-сайт и перейдет в режим адаптивного дизайна. Здесь вы можете выбрать различные типы устройств и разрешение экрана в зависимости от ваших потребностей.
Просто переключитесь между моделями iPhone или iPad, указанными на странице, чтобы просмотреть мобильный сайт в браузере компьютера Safari.
Это позволит нам просматривать адаптивный сайт для мобильных устройств в браузере Safari на компьютере с macOS. Мобильный сайт будет основан на модели, выбранной в режиме адаптивного дизайна.
Точно так же вы также можете включить просмотр сайта на рабочем столе на устройстве iPhone или iPad. Это поможет получить все возможности рабочего стола на устройстве с маленьким экраном.
Вы когда-нибудь пробовали использовать режим разработчика в сафари? Что вы думаете об этой функции?
Наконец, вот рекомендуемые веб-браузеры для вашего компьютера и мобильного телефона, которые вам стоит попробовать.
Создание и отладка веб-сайтов и веб-приложений для мобильных устройств может быть трудной задачей. На рабочем столе у нас есть мощные инструменты для отладки; у большинства браузеров есть веб-инспектор. Но у нас нет таких инструментов для устройств, как iPhone и iPad . то есть, до сих пор!
С недавним выпуском Safari 6 и iOS 6 теперь можно использовать веб-инспектор для создания и отладки веб-сайтов на рабочем столе и на мобильном Safari. Как? Процесс настройки простой. Следуйте этому руководству, и у вас под рукой появятся очень мощные средства отладки для мобильных устройств практически мгновенно.
Современные инструменты для разработчиков браузеров оказали огромную помощь в создании веб-сайтов и веб-приложений. Chrome имеет инструменты для разработчиков. Fire Fox? Firebug. Сафари? Веб-инспектор. Все чрезвычайно мощные инструменты в веб-разработке.
Как бы то ни было, до этого момента отладка веб-сайтов и веб-приложений на мобильных устройствах была трудной задачей. Поскольку Safari и Chrome работают на движке webkit, есть много общего в том, как рабочий стол и мобильный браузер отображают веб-макет. Таким образом, большинство дизайнеров/разработчиков создают и настраивают свои веб-сайты на рабочем столе, используя один из этих браузеров, предполагая, что в результате действия движка webkit страница будет одинаково выглядеть и на мобильном устройстве.
Однако мобильные и настольные платформы на самом деле совершенно разные. Они имеют различную ёмкость памяти, потенциал производительности, устройства ввода и сетевое подключение. Поэтому стало крайне важно, чтобы отладочные инструменты дизайнера для мобильных устройств стали более эффективными и соответствовали аналогам на рабочем столе.
Новые программные версии Apple для iOS 6 и Safari 6 привнесли множество функций инструментов отладки для настольных компьютеров, которые мы все знаем и любим по мобильным устройствам. Этот урок покажет простой процесс получения настроек для отладки мобильных сайтов с помощью веб-инспектора Safari.
Вначале обратите внимание на совместимость: для пользователей Windows есть несколько плохих новостей. Вы можете отлаживать только удалённый веб-инспектор на Mac. Safari 6 для Windows недоступен. Кроме того, Safari 6 доступен только для компьютеров Mac с OSX Lion и выше.
Методы использования веб-инспекторов
Существует два метода использования веб-инспектора в мобильном Safari:
- Метод реального устройства: используйте реальный iDevice (iPhone, iPad и т. д.), подключенный к компьютеру через USB-порт
- Метод виртуального устройства: используйте симулятор iOS, который является частью Xcode
Мы рассмотрим оба этих метода и выберем наиболее подходящий для вашей ситуации.
Шаг 1. Убедитесь, что вы в курсе
Поскольку отладка мобильных устройств с веб-инспектором - это новая функция, вам необходимо убедиться, что у вас есть всё самое последнее программное обеспечение.
Реальный метод устройства: чтобы использовать веб-инспектор в тандеме с реальным iDevice, вам понадобится следующее:
- IDevice (iPhone, iPad, iTouch), работающий под управлением iOS 6
- USB шнур
- Safari 6
- Mac OSX Lion (10.7.4) или выше
Метод виртуального устройства: чтобы использовать веб-инспектор в тандеме с симулятором iOS, вам понадобится следующее:
- Safari 6
- Mac OSX Lion (10.7.4) или выше
- Xcode 4.5 с iOS 6 SDK (available in the app store)
Проверка версий программного обеспечения: чтобы проверить, используете ли вы iOS 6 на вашем iDevice, перейдите в "Settings > General > About" на вашем устройстве.
Чтобы проверить, используете ли вы Safari 6, откройте панель инструментов Safari и нажмите «Safari> About Safari».
Чтобы убедиться, что вы используете Lion, нажмите на логотип Apple в строке меню и выберите "About this Mac"
Чтобы убедиться, что вы используете правильную версию Xcode, откройте Xcode и выберите «Xcode> About Xcode»
Шаг 2. Включение инструментов разработчика
Вы должны включить инструменты разработчика и веб-инспектора в настольных и мобильных версиях Safari.
Метод реального устройства: если вы собираетесь использовать реальное устройство, подключите его к своему Mac через USB.
Метод виртуального устройства: если вы собираетесь использовать имитатор iOS, откройте Xcode, затем щёлкните правой кнопкой мыши значок док-станции и выберите "Open Developer Tool > iOS Simulator".
Mobile Safari: на вашем реальном iDevice или в симуляторе iOS перейдите в "Settings > Safari > Advanced" и включите "Web Inspector".
Desktop Safari: если вы этого ещё не сделали, убедитесь, что ваши инструменты разработчика в Safari включены. Вы сможете в этом убедиться, открыв "Develop" в строке меню.
Если вы не видите "Develop" в строке меню, перейдите в панель меню и нажмите "Safari > Preferences > Advanced" и установите флажок "Show develop menu in menu bar".
Шаг 3. Проверьте свой веб-сайт
Теперь, когда у вас открыт iOS Simulator или ваш iDevice подключен к Mac через USB (или оба!), вы готовы начать использовать веб-инспектор на своем сайте.
На вашем Mac откройте Safari и перейдите в раздел "Develop". Теперь вы должны увидеть любые iDevices (виртуальные или реальные), которые вы подключили и запустили с помощью своего mac. На скриншоте ниже вы увидите, что у меня в меню два устройства: одно - симулятор iOS, а другой - настоящий iPhone, подключенный к моему mac.
Чтобы начать проверку, просто введите URL-адрес страницы, которую вы хотите проверить в мобильном Safari, а затем выберите этот сайт в меню "Develop". Вы можете начать проверку сайтов на своем реальном iDevice или с симулятора iOS. Когда вы выберете страницу, на странице появится синее наложение, указывающее ваш выбор.
Выбрав сайт, веб-инспектор Safari откроется и позволит вам начать проверку вашего веб-сайта. Вот оно!
Заключение
Теперь, когда в ваших руках есть веб-инспектор Safari, у вас гораздо больше контроля при создании и отладке веб-сайтов и веб-приложений.
Ниже примеры некоторых вещей, которые вы можете теперь делать, когда отлаживаете мобильные сайты:
В сегодняшнем руководстве мы покажем вам, как вы можете открывать мобильные сайты на вашем Mac в Safari под управлением macOS. Давайте погрузимся прямо в это!
Откройте Safari на своем Mac, введите URL-адрес, нажмите Return, и вы увидите версию веб-сайта для настольного компьютера, как и должно быть. Но что, если вы хотите увидеть мобильную версию сайта? Конечно, вы можете сделать это, изменив размер Safari, перетаскивая его из углов, что, кстати, работает на очень немногих веб-сайтах, но я говорю о реальном мобильном веб-сайте, который вы видите на своей странице. iPhone или устройство Android. Ну, это довольно просто. Следуйте инструкциям ниже, и вы тоже это узнаете.
Понизить версию MacOS Big Sur Beta до macOS Каталина [Как сделать]
Руководство
1. Откройте Safari на вашем Mac.
2. Теперь нажмите «Safari» в строке меню.
3. Теперь нажмите «Настройки», затем «Дополнительно».
4. В самом низу вы увидите опцию «Просмотреть меню разработки в строке меню».
5. Вы увидите новую запись в строке меню под названием Develop. Нажмите на него, чтобы открыть.
Загрузите macOS Big Sur Beta на свой Mac [Как сделать]
7. Теперь откройте любой веб-сайт в Safari, и откроется мобильная версия.
Если вы хотите отменить изменения, просто откройте меню «Разработка», наведите курсор мыши на User Agent и выберите «По умолчанию» вверху. Вот и все.
Теперь, на данный момент, вы должны задаться вопросом: почему я хочу открывать мобильные веб-сайты в настольном Safari? Ну, во-первых, вы знаете, как это сделать. Во-вторых, если вы разработчик, вы можете протестировать свой сайт, не открывая его сразу на iPhone. Не в последнюю очередь, это весело! Так почему бы не поделиться своими новыми знаниями с окружающими, а?
Читайте также: