Каким образом в javascript можно проверить размеры экрана (в if-е) и в зависимости от этой проверки отрисовывать содержимое страницы? Меня интересуют устройства типа IPad (tablet.js) (используются ли в них скролл)?
1 ответ
Это можно это сделать методом matchMedia
function check(){
if( window.matchMedia("(min-width: 400px)").matches ){
console.log('подходит');
} else {
console.log('не подходит');
}
}
check();
window.addEventListener( 'resize', check );
Только нужно учитывать, что в медиазапросах может учитываться или не учитываться скроллбар в разных браузерах. Поэтому вместо этого могут лучше подходить более конкретные методы определения. Например document.documentElement.clientWidth
.
-
а какой из методов, указанных на ru.stackoverflow.com/questions/243682/… можно использовать для адаптивной верстки? 26 апр 2021 в 14:41
-
@htmllayout можно много разных методов использовать, все они имеют свои осбенности - учитывают или нет скролл, отталкиваются от размера body/документа/окна/монитора и так далее. Например смотрите эту картинку с какого-то сайта - web-designer.cman.jp/javascript_ref/window/size/size.gif– user34747226 апр 2021 в 14:43
-
Данный ответ был к прошлой версии вопроса. @htmllayout данный ресурс не рассчитан на постепенное изменение вопроса и подгонку ответов под эти изменения. При изменении вопроса ответ обесценивается и может не соответствовать. Лучше продолжать в комментариях или в чате или какой-то форум найти, где живое общение.– user34747226 апр 2021 в 15:00
-
У айпадов сколл не учитывается, потому что он появляется "поверх" страницы. Оба метода из ответа подходят.– user34747226 апр 2021 в 15:01