Рекомендуемое разрешение экрана сайта
 | |
| Этот скрипт на сайте будет показывать пользователю или гостю сайта о соответствии экрана, в том случае, если оно будет ниже рекомендуемого. Это безусловно, все что качается дизайн на вашем интернет ресурсе, и чтоб корректно смотрелось. Как поняли, если не будет соответствовать, то вы уведите такое окно, это все сделано для современных мониторов, так как интернет ресурс безусловно должен выглядеть красиво и презентабельно, одним словом, современным, что для этого разрешение должно соответствовать. Но и не нужно забывать про функций, так как функциональность должна быть понятной, чтоб можно было переходить по ссылкам или навигаций. Вот для этого и была разработана структура, что теперь будет предупреждать. Но если проще сказать, то задаются параметры сайта, это ширина, что не должна изменятся, в зависимости от разрешение у пользователя. Кто то скажет, что для чего эта функция, и возможно прав будет, но другим возможно понадобиться. Приступаем к установки: 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 | |
Поделиться в социальных сетях
Материал разместил
| Комментарии: 0 | |