Tyoma_Ti
@Tyoma_Ti

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

Как заставить команды работать только при просмотре сайта с мобильных устройств? Если применять media screen и, к примеру, ширину, то при изменении ширины окна браузера будет меняться и характер работы команды. Использовать media handheld? А все ли современные смартфоны так себя идентифицируют и, соответственно, команда будет работать корректно?
  • Вопрос задан
  • 140 просмотров
Пригласить эксперта
Ответы на вопрос 3
@iliya2004
Верстальщик, программист, дизайнер
Кусок статьи с хабра:

Теперь о методе, которым пользуюсь я. Заключается он в использовании html-флагов для каждого диапазона. В качестве флага может выступать реальная конструкция верстки, появляющаяся только в нужном нам диапазоне размеров, либо пустой однопиксельный div.
Html:
<body>
		<div class=”max_width_800”></div>
		<div class=”max_width_479”></div>
	</body>

CSS:
.max_width_800{
	display: none;
}
.max_width_479{
	display: none;
}

@media screen and (max-width: 800px) {
	.max_width_800{
		display: block;
	}
	.max_width_479{
		display: none;
	}
}

@media screen and (max-width: 479px) {
	.max_width_800{
		display: none;
	}
	.max_width_479{
		display: block;
	}
}

А в самом скрипте мы просто проверяем показан ли наш маркер:
if ($('.max_width_800').is(':visible')) {
    // код jQuery
}

if ($('.max_width_479').is(':visible')) {
    // код jQuery
}
Ответ написан
profesor08
@profesor08 Куратор тега CSS
А все ли современные смартфоны так себя идентифицируют и, соответственно, команда будет работать корректно?

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

Вот есть либа если ручками лень.
https://www.npmjs.com/package/js-media-query
Ответ написан
Комментировать
AlibekKulseitov
@AlibekKulseitov
Люблю верстать и писать музыку
window.addEventListener('resize', function() {
        if(window.innerWidth <= 768) {
 
        } else {

        }
    });
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы