ZorNet.Ru — сайт для вебмастера » HTML и CSS » Рекомендуемое разрешение экрана сайта

Рекомендуемое разрешение экрана сайта

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

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

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

Приступаем к установки:

1. Добавим HTML:

Код
<div id="gsazerimus">Ваше разрешение не соответствует нашему сайту!.<br><br>Текущее:<em><i></i>x<i></i>px</em> рекомендуем от 1024х768px.<br><span>ПРОДОЛЖИТЬ</span></div>

2. Добавим js:

Код
function MinScreen() {
var wMinScreen = $(window).width();
var hMinScreen = $(window).height();
if(wMinScreen > 1024) { $('div#gsazerimus em i:eq(0)').html(''+wMinScreen+''); } else { $('div#gsazerimus em i:eq(0)').html('<div>'+wMinScreen+'</div>'); }
if(hMinScreen > 768) { $('div#gsazerimus').hide(); $('div#gsazerimus em i:eq(1)').html(hMinScreen); } else { $('div#gsazerimus em i:eq(1)').html('<div>'+hMinScreen+'</div>'); $('div#gsazerimus').show(); }
}
MinScreen();
$(window).on('resize',function() {
MinScreen();
});
$('div#gsazerimus span').click(function() {
$('div#gsazerimus').remove();
});

В скрипте находим 1024 и 768 и меняем на свое минимальное разрешение сайта, также в HTML указываем его.

3. Добавим CSS:

Код
div#gsazerimus {
  display: none;
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.85);
  color: #fff;
  text-align: center;
  font-size: 20px;
  font-family: sans-serif;
  padding-top: 10%;
}
div#gsazerimus em {
  font-style: normal;
  padding-left: 5px;
}
div#gsazerimus em i {
  font-style: normal;
  font-weight: bolder;
}
div#gsazerimus em div {
  color: red;
  display: inline-block;
}
div#gsazerimus span {
  margin-top: 45px;
  display: inline-block;
  font-weight: bold;
  font-family: helvetica, arial, sans-serif;
  color: chartreuse;
  cursor: pointer;
}

Демонстрация

Источник: www.mybeststudio.ru
19 Апреля 2018 Просмотров: 855 Комментариев: (0)

Поделиться в социальных сетях

Материал разместил

Оставь свой отзыв

Комментарии: 0
avatar