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

      Если у Вас ещё нет аккаунта на BEST STUDIO, вы можете создать его потратив не более 10-ти секунд используя форму справа с заголовком "Вход на сайт"
Вход на сайт
Логин:

Пароль:
Вход
Войти по Логину и Паролю
О нас
Cтудия скриптов и дизайна BEST STUDIO, как студия перспективных веб-разработок, была основана 1 июля 2009 г. Уже более 17000 зарегистрированых пользователей! С момента ее создания мы четко придерживаемся принципа: «Быстро, качествено, дорого».

Заказывая работу для вашего сайта у нас, вы экономите время...

Стремитесь к лучшему - в Best Studio!
Войти | Зарегистрироваться
Настройки
Анимация Шапки
Анимация Меню
Анимация Футера
Автообновление Чата
Автообновление Статистики
Звуковые Оповещения
Авто Подгрузка Материалов

Перезагрузите страницу
ScreenBlock - Минимальное разрешение сайта
DEMO +
Всем привет. Сегодня у нас скрипт который дополнит meta viewport а именно добавит блок о не соответствии экрана если оно ниже рекомендуемых по дизайну вашего сайта. Установка и настройка проста.

Установка:
1. Добавим HTML:
Код
<div id="minimal">Ваше разрешение не соответствует нашему сайту!.<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#minimal em i:eq(0)').html(''+wMinScreen+''); } else { $('div#minimal em i:eq(0)').html('<div>'+wMinScreen+'</div>'); }
if(hMinScreen > 768) { $('div#minimal').hide(); $('div#minimal em i:eq(1)').html(hMinScreen); } else { $('div#minimal em i:eq(1)').html('<div>'+hMinScreen+'</div>'); $('div#minimal').show(); }
}
MinScreen();
$(window).on('resize',function() {
MinScreen();
});
$('div#minimal span').click(function() {
$('div#minimal').remove();
});


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

3. Добавим CSS:
Код
div#minimal {
  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#minimal em {
  font-style: normal;
  padding-left: 5px;
}
div#minimal em i {
  font-style: normal;
  font-weight: bolder;
}
div#minimal em div {
  color: red;
  display: inline-block;
}
div#minimal span {
  margin-top: 45px;
  display: inline-block;
  font-weight: bold;
  font-family: helvetica, arial, sans-serif;
  color: chartreuse;
  cursor: pointer;
}
Данный раздел авторский все работы являются собственностью BS (mybeststudio.ru) любое коммерческое использование строго запрещено.

При копировании материала указываем источник MyBeststudio.ru.

Для редактирования кода необходимо иметь хотя бы базовые знания в HTML, CSS и Js технологиях.
Поделиться новостью в социальной сети.
Добавил: Best_Studio
Дата добавления: 07.04.2018 в 19:43 по МСК
Категория: Другие модули
Просмотров: 162
Комментариев: 0
Эмоций:
Теги: minimal, Block, Screen
Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]