Как выполнять js код только при определенном разрешении экрана

Обновлено: 04.07.2024

Давайте познакомимся с еще одним, довольно молодым API, необходимость которого уже давно терзает умы разработчиков игр, видеосайтов и прочих полноэкранных сервисов. Fullscreen javascript API пока является черновиком, но уже поддерживается в chrome, safari, ff и опере.

Internet-explorer (включая Ie10) как всегда замедляет прогресс, ну и пусть себе умирает.

Без лишних слов перейдем к примеру:

Спецификация представляет из себя:

2 метода: requestFullScreen и cancelFullScreen
2 свойства обекта document: fullscreenElement и fullscreenEnabled
1 событие fullscreenchange

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

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

Javascript

Выйти из полноэкранного режима

JavaScript

2 свойства объекта document

JavaScript

Событие об изменениии режима

JavaScript

Ну а пока API довольно новое, все свойства, события и методы можно использовать только с префиксами (03.2013)

Вот несколько функций, которые могут помочь.

JavaScript

Псевдокласс :full-screen предназначен для стилизации элементов в полноэкранном режиме.

Ниже приведен пример с префиксами -webkit- и -moz- , которые через некоторое время можно будет опустить и использовать просто :full-screen

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

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

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

JavaScript

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

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

Как сделать адаптивную вёрстку?

Для того, чтобы сайт подстраивался под разные типы устройств, необходимо задать значения под все диапазоны экранов в таблице стилей CSS. Каждый шаблон состоит из блоков, у которых есть свой класс или идентификатор. Необходимо найти в таблице стилей нужный блок и прописать его поведение при различных экранных разрешениях. Возьмём, к примеру, фрагмент из таблицы стилей моего сайта. Блок w-container.

Как видно из первой строчки, стандартная максимальная ширина для десктопного разрешения экрана составляет 940 пикселей. Из второй строчки легко заметить, что если максимальное разрешение экрана устройства в ширину не более 991 пикселя, блок будет растягиваться максимум на 728, что предотвратит разрушение структуры шаблона и контент будет всегда в зоне видимости.

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

Как скрыть часть информации от мобильных устройств?

Как Вы уже поняли, в помощь нам приходит media screen в CSS, с помощью которого можно регулировать отображение структуры сайта в зависимости от разрешений экранов. Для начала, нам нужно заключить скрываемую информацию в дополнительный div-контейнер, назовём его hidemobile.

А после этого, добавить в style.css вашего сайта следующий фрагмент кода:

В этом случае, если разрешение экрана устройства менее 600 пикселей, контент, заключенный в этот div, на нём не отобразится. Значение max-width Вы можете поменять на своё усмотрение.

Как сделать информацию видимой только на мобильных устройствах?

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

Порядок действий схожий с предыдущим пунктом. Обернем нужный контент в новый div.

А после добавим в style.css сайта этот фрагмент кода:

Удачной вёрстки!

Как мы выяснили, при помощью несложных CSS-конструкций с применением media screen можно управлять отображением информации на странице. Также, предлагаю вам почитать каким должен быть продающий сайт и способы отправки HTML-писем.

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

doc_w = $(document).width();
doc_h = $(document).height();
//или
win_w = $(window).width();
win_h = $(window).height();

но если же надо знать размеры каждый раз при ресайзе окна то код будет следующим:
$( window ).resize(function() <$( "body" ).prepend( "<div>" + $( window ).width() + "</div>" );>);

На JavaScript код, определения разрешения экрана

scr_w=screen.width;
scr_h=screen.height;

На JavaScript определяем размер клиентской части окна браузера

client_w=document.body.clientWidth;
client_h=document.body.clientHeight;

Кроссбраузерное получение размеров окна на JS

function getPageSize() var xScroll, yScroll;

if (window.innerHeight && window.scrollMaxY) xScroll = document.body.scrollWidth;
yScroll = window.innerHeight + window.scrollMaxY;
> else if (document.body.scrollHeight > document.body.offsetHeight) < // all but Explorer Mac
xScroll = document.body.scrollWidth;
yScroll = document.body.scrollHeight;
> else if (document.documentElement && document.documentElement.scrollHeight > document.documentElement.offsetHeight) < // Explorer 6 strict mode
xScroll = document.documentElement.scrollWidth;
yScroll = document.documentElement.scrollHeight;
> else < // Explorer Mac. would also work in Mozilla and Safari
xScroll = document.body.offsetWidth;
yScroll = document.body.offsetHeight;
>

var windowWidth, windowHeight;
if (self.innerHeight) < // all except Explorer
windowWidth = self.innerWidth;
windowHeight = self.innerHeight;
> else if (document.documentElement && document.documentElement.clientHeight) < // Explorer 6 Strict Mode
windowWidth = document.documentElement.clientWidth;
windowHeight = document.documentElement.clientHeight;
> else if (document.body) < // other Explorers
windowWidth = document.body.clientWidth;
windowHeight = document.body.clientHeight;
>

// for small pages with total height less then height of the viewport
if(yScroll < windowHeight) pageHeight = windowHeight;
> else pageHeight = yScroll;
>

// for small pages with total width less then width of the viewport
if(xScroll < windowWidth) pageWidth = windowWidth;
> else pageWidth = xScroll;
>

Поделись с друзьями:

комментария 4 для записи Определяем размер окна браузера (JavaScript, jQuery)

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

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

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

Преимущества медиа-запросов в JavaScript

В этот момент вы можете подумать: с какой стати разработчику использовать JS медиа-запросы, когда он может использовать CSS3?

Медиа-запросы JavaScript обладают двумя основными преимуществами.

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

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

В блоке кода выше у нас есть оператор «if», основанный на том, что он меньше 1024 (т.е. стандартный размер экрана для дисплеев рабочего стола). Предположительно, этот метод должен запускаться каждый раз, когда приложение работает на устройстве, меньшем, чем настольный компьютер.

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

Как использовать медиа-запросы JavaScript

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

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

Чтобы использовать этот API, мы вызываем и передаем строку медиа-запроса window.matchMedia() , определяющую размер экрана, на который мы хотим ответить.

Метод matchMedia () возвращает новый объект MediaQueryList, который мы назвали mQuery в приведенном выше примере. Этот объект хранит информацию о медиа-запросе, примененном к конкретному документу, а также вспомогательные методы для управляемого событиями и немедленного сопоставления. Это позволяет нам запускать настраиваемую логику в начале события изменения размера.

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

Легко, правда? Есть только одна загвоздка: window.matches может выполнить эту проверку только один раз. Чтобы облегчить адаптивный веб-дизайн, мы хотим постоянно проверять любые происходящие изменения. К счастью, есть еще один инструмент, который мы можем объединить с windows.matches, чтобы помочь нам в этом: метод addListener().

Метод addListener()

API matchMedia предоставляет метод addListener() , а также соответствующий метод removeListener(). Когда мы вызываем addListener() , мы передаем функцию обратного вызова, которая запускается всякий раз, когда обнаруживает изменение статуса соответствия медиа-запроса. Эта функция обратного вызова - функция, которая должна запускаться при изменении размера:

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

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

Вывод

Теперь вы должны иметь общее представление о медиа-запросах в JavaScript и о том, как они обеспечивают эффективный адаптивный дизайн. MatchMedia API может помочь вам создать медиа-запрос на JavaScript, а addListener() может позволить вам создать адаптивный кроссплатформенный интерфейс, вызывая функции обратного вызова.

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

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