Типы браузеров: полноэкранные браузеры

Обновлено: 03.07.2024

Скотт Оргера — бывший писатель Lifewire, освещающий технологии с 2007 года. Он имеет более 25 лет опыта работы программистом и руководителем отдела контроля качества, а также имеет несколько сертификатов Microsoft, включая MCSE, MCP+I и MOUS. Он также имеет сертификат A+.

Что нужно знать

На Mac выберите зеленый кружок в верхнем левом углу Chrome или используйте сочетание клавиш Ctrl + Command + F.
В Windows нажмите F11 или выберите три точки в правом верхнем углу и нажмите квадратный значок в разделе "Масштаб".
Чтобы увеличить текст в Chrome, удерживайте нажатой клавишу Ctrl или Command и нажимайте плюс (+) или минус (-) на клавиатуре, чтобы увеличить или уменьшить масштаб.

В этой статье объясняется, как использовать полноэкранный режим в Google Chrome для Windows и macOS.

Включить и отключить полноэкранный режим Chrome в macOS

Для Chrome на macOS: в верхнем левом углу Chrome выберите зеленый кружок, чтобы перейти в полноэкранный режим, и еще раз, чтобы вернуться к полноэкранному режиму.

Есть еще два варианта активации полноэкранного режима:

Чтобы выйти из полноэкранного режима, повторите этот процесс.

Включить и отключить полноэкранный режим в Chrome для Windows

Самый быстрый способ перевести Chrome в полноэкранный режим в Windows — нажать F11 на клавиатуре. Другой способ — через меню Chrome:

В правом верхнем углу Chrome выберите значок меню (три точки).

В разделе "Масштаб" выберите квадратный значок справа.

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

О полноэкранном режиме Chrome

Полноэкранный режим Google Chrome скрывает отвлекающие факторы на рабочем столе, в том числе панель закладок, кнопки меню, открытые вкладки, а также системные часы и панель задач. Когда вы используете полноэкранный режим, Chrome занимает все пространство на экране.

Как увеличить страницы в Chrome

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

В правом верхнем углу Chrome выберите значок меню (три точки).

Перейдите в Масштаб и выберите +, чтобы увеличить содержимое страницы, или выберите -, чтобы уменьшить размер.

В качестве альтернативы можно использовать сочетания клавиш для изменения размера содержимого страницы. Удерживая нажатой клавишу Ctrl (или клавишу Command на Mac), нажимайте клавиши "плюс" или "минус" на клавиатуре, чтобы увеличить или уменьшить масштаб соответственно.

Нажмите "Полный экран", чтобы переключиться в полноэкранный режим.

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

Google Chrome

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

Нажмите "Полноэкранный режим", чтобы переключиться в полноэкранный режим.

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

Опера

Нажмите кнопку "Вид" на верхней панели навигации Opera, чтобы открыть меню "Вид".

Нажмите "Полный экран", чтобы начать просмотр в полноэкранном режиме.

Нажмите "F11" на клавиатуре, чтобы вернуться к обычному виду.

Клавиша F11 позволяет переключаться между полноэкранным и стандартным режимами во всех основных веб-браузерах, включая Internet Explorer.

Информация, представленная в этой статье, относится ко всем версиям Google Chrome, Opera 10 и Firefox 22 для Windows. Инструкции могут незначительно или существенно отличаться для других версий программного обеспечения.

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

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

Полноэкранный режим приложения или сайта

Существует несколько способов, которыми пользователь или разработчик может перевести веб-приложение в полноэкранный режим.

Запрос браузера на полноэкранный режим в ответ на жест пользователя.
Установите приложение на главный экран.
Подделка: автоматическое скрытие адресной строки.

Запрос браузера на полноэкранный режим в ответ на жест пользователя

element.requestFullscreen() (в настоящее время имеет префикс в Chrome, Firefox и IE) отображает элемент в полноэкранном режиме.
document.exitFullscreen() (в настоящее время имеет префикс в Chrome, Firefox и IE. Вместо этого Firefox использует cancelFullScreen()) отменяет полноэкранный режим.
document.fullscreenElement (в настоящее время имеет префикс в Chrome, Firefox и IE) возвращает значение true, если какой-либо из элементов находится в полноэкранном режиме.

Когда ваше приложение работает в полноэкранном режиме, вам больше не доступны элементы управления пользовательским интерфейсом браузера. Это меняет способ взаимодействия пользователей с вашим опытом. У них нет стандартных элементов управления навигацией, таких как «Вперед» и «Назад»; у них нет аварийного люка, которым является кнопка «Обновить». Важно учитывать этот сценарий. Вы можете использовать некоторые селекторы CSS, чтобы помочь вам изменить стиль и представление вашего сайта, когда браузер переходит в полноэкранный режим.

Приведенный выше пример немного надуманный; Я скрыл всю сложность использования префиксов поставщиков.

Реальный код намного сложнее. Mozilla создала очень полезный скрипт, который можно использовать для переключения в полноэкранный режим. Как видите, ситуация с префиксом поставщика сложна и громоздка по сравнению с указанным API. Даже с немного упрощенным кодом, приведенным ниже, он по-прежнему сложен.

Мы, веб-разработчики, ненавидим сложность. Хороший высокоуровневый абстрактный API, который вы можете использовать, — это модуль Screenfull.js Синдре Сорхуса, который объединяет два немного разных API JS и префиксы поставщиков в один согласованный API.

Советы по полноэкранному API

Делаем документ в полноэкранном режиме

Рис. 1. Полноэкранный режим элемента body.

Естественно думать, что вы используете полноэкранный режим элемента body, но если вы используете движок рендеринга на основе WebKit или Blink, вы увидите странный эффект уменьшения ширины body до наименьшего возможного размера, который будет содержать все содержимое. (Mozilla Gecko подойдет.)

Рисунок 2. Полноэкранный режим элемента документа.

Чтобы это исправить, используйте элемент документа вместо элемента body:

Полноэкранный режим видеоэлемента

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

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

Это дает вам гораздо больше гибкости, поскольку вы можете комбинировать объект-контейнер с псевдоселектором CSS (например, чтобы скрыть кнопку "goFS").

Используя эти шаблоны, вы можете определить, когда работает полноэкранный режим, и соответствующим образом адаптировать пользовательский интерфейс, например:

Предоставив ссылку на стартовую страницу.
Предоставив механизм для закрытия диалогов или перехода назад.

Запуск страницы в полноэкранном режиме с главного экрана

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

На основных мобильных платформах это довольно легко реализовать с помощью метатегов или файлов манифеста следующим образом.

С момента выпуска iPhone пользователи могут устанавливать веб-приложения на главный экран и запускать их как полноэкранные веб-приложения.

Если для содержимого задано значение yes, веб-приложение работает в полноэкранном режиме; в противном случае это не так. По умолчанию Safari используется для отображения веб-контента. Вы можете определить, отображается ли веб-страница в полноэкранном режиме, используя логическое свойство JavaScript window.navigator.standalone, доступное только для чтения. яблоко

Chrome для Android

Команда Chrome недавно реализовала функцию, которая указывает браузеру запускать страницу в полноэкранном режиме, когда пользователь добавил ее на главный экран. Она аналогична модели Safari для iOS.

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

Лучше использовать манифест веб-приложения.

Манифест веб-приложения (Chrome, Opera, Firefox, Samsung)

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

Сообщение браузеру о вашем манифесте
Описание запуска

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

Chrome поддерживает манифесты, начиная с версии 38 для Android (октябрь 2014 г.), и это дает вам возможность управлять тем, как ваше веб-приложение отображается при его установке на главный экран (через свойства short_name , name и icons) и как оно должно выглядеть. запускаться, когда пользователь щелкает значок запуска (через start_url , display и Orientation ).

Пример манифеста показан ниже. Он не показывает все, что может быть в манифесте.

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

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

Служебные приложения

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

Игры

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

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

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

Новостные сайты

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

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

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

Подделка: автоматическое скрытие адресной строки

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

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

Например, браузеры часто восстанавливают позицию на странице, когда пользователь возвращается к ней. Использование window.scrollTo отменяет это, что раздражает пользователя. Чтобы обойти это, вы должны сохранить последнюю позицию в localStorage и иметь дело с пограничными случаями (например, если пользователь открыл страницу в нескольких окнах).

Руководство по пользовательскому интерфейсу

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

Не полагайтесь на элементы управления навигацией

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

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

В iOS вы можете использовать логическое значение navigator.standalone, чтобы узнать, запустил ли пользователь начальный экран или нет.

Манифест веб-приложения (Chrome, Opera, Samsung)

При запуске в качестве установленного приложения Chrome не работает в полноэкранном режиме, поэтому document.fullscreenElement возвращает значение null, а селекторы CSS не работают.

Когда пользователь запрашивает полноэкранный режим с помощью жеста на вашем сайте, доступны стандартные полноэкранные API, включая псевдоселектор CSS, который позволяет адаптировать пользовательский интерфейс для реагирования на полноэкранное состояние, как показано ниже

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

Если пользователь запускает приложение в автономном режиме, медиа-запрос в режиме отображения будет автономным:

Файрфокс

Когда пользователь запрашивает полноэкранный режим через ваш сайт или пользователь запускает приложение в полноэкранном режиме, доступны все стандартные полноэкранные API, включая псевдоселектор CSS, который позволяет адаптировать пользовательский интерфейс для реагирования на полноэкранный режим, как показано ниже:

Интернет-обозреватель

В IE в псевдоклассе CSS отсутствует дефис, но в остальном он работает аналогично Chrome и Firefox.

Спецификация

Правописание в спецификации соответствует синтаксису, используемому IE.

Держите пользователя в полноэкранном режиме

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

Изменение URL-адреса программным путем с помощью window.location = "http://example.com" приводит к выходу из полноэкранного режима.
Пользователь, нажавший на внешнюю ссылку на вашей странице, выйдет из полноэкранного режима.
Изменение URL-адреса с помощью API navigator.pushState также приведет к выходу из полноэкранного режима.

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

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

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

Не перехватывайте событие первого касания и не вызывайте requestFullscreen() .

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

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

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

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

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

Заключение

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

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

Перейдите на вкладку "Безопасность", а затем нажмите кнопку "Пользовательский уровень" в разделе "Уровень безопасности".

Прокрутите вниз до пункта "Разрешить запускаемые сценарием окна без ограничений по размеру или положению" и нажмите "Отключить".

Нажмите кнопку "ОК" и нажмите "Применить", чтобы применить изменения.

Хром

Нажмите клавишу "F11" на клавиатуре, если браузер запускается в полноэкранном режиме.

Нажмите значок гаечного ключа в правом верхнем углу окна браузера.

Нажмите кнопку "Настройки", а затем нажмите "Настройки контента" в разделе "Конфиденциальность".

Нажмите переключатель рядом с параметром "Не разрешать запуск JavaScript на всех сайтах". Нажмите кнопку «ОК», чтобы сохранить изменения. Не забудьте снова включить его для веб-сайтов, которым он нужен по другим причинам.

Файрфокс

Нажмите клавишу "F11" на клавиатуре, если браузер запускается в полноэкранном режиме.

Нажмите кнопку "Firefox" в верхнем левом углу окна браузера, а затем выберите "Параметры".

Перейдите на вкладку "Содержание", а затем нажмите кнопку "Дополнительно" рядом с разделом "Включить JavaScript".

Установите флажок рядом с пунктом "Переместить или изменить размер всплывающих окон", чтобы отключить эту функцию. Нажмите кнопку "ОК", а затем еще раз "ОК", чтобы применить изменения.

Читайте также: