Как отображать веб-сайт, только если его разрешение выше определенного?
Я предполагаю, что для этого есть довольно простое решение, но я очень новичок в javascript/jquery. Я делаю проект, и мне нужно сделать так, чтобы он не отображался, если разрешение ниже 1366x768. Я знаю, что с помощью jquery и java-скрипта вы можете получить разрешение браузера/монитора, но я не знаю, как сделать так, чтобы он не отображался, если его разрешение ниже 1366x768.
Есть ли способ скрыть тег?
Спасибо
Используйте для этого запросы CSS Media, а не JS. Хотя это очень странное требование. Ограничение доступа к сайту на основе разрешения не использовалось с 90-х годов. С появлением адаптивных макетов для этого больше нет веских причин.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 4
С jquery это может быть $( "html" ).empty();
Вы можете сделать так. Сначала проверьте ширину и размеры дисплея, а затем выберите один из двух предложенных методов. Метод 1 добавляет оверлей css поверх страницы, а метод 2 удаляет содержимое тела после загрузки страницы.
if ($(window).width() < 1366) && $(window).height() < 768) ) {
//Method 1
$("body").append('<div id = "overlay" style = "background-color:#ffffff;position:absolute;top:0;left:0;height:100%;width:100%;z-index:999"></div>');
//Method 2
$("body").empty();
}
else {
console.info('size okay');
}
или вы можете просто использовать CSS Media Queries, но, поскольку вы спрашиваете, как это сделать в JS/jQuery, вот оно
Я думаю, вы могли бы сделать такую вещь:
if (window.screen.availWidth < 1366 && window.screen.availHeight < 768) {
document.getElementsByTagName("body")[0].innerHTML("You cannot view the page");
}
Вы можете создать класс и добавить его в медиа-запрос, как показано ниже:
@media only all and (max-width:1366px) {
.siteContentContainer{
display:none;
}
.siteWidthNotSupported{
display:block;
}
}
Добавьте класс siteContentContainer в свое тело или любой другой корневой элемент, который вы хотите скрыть, и добавьте другой класс в контейнер с соответствующим сообщением, чтобы предупредить пользователей.
Под «не отображать» вы имеете в виду, что должен быть только видимый элемент div, например «Этот веб-сайт не поддерживает разрешение меньше, чем YxZ», например, скрыть весь элемент тела html?