Как проверить мобильный экран и скрыть блок?

Question

[sergiocharm]

<script type="text/javascript">
$(document).ready(function(){
	$(window).scroll(function(){
		if($(window).scrollTop()>200){
			$('#top').fadeIn(700)
		}else{
			$('#top').fadeOut(400)
		}
	});
});
</script>

<div id="top">Наверх</div>

дело в том что я в этом же блоке вывожу рекламу и на мобильном весь экран закрывается

Answer 1

[Daniel Tkachenko]

if (window.matchMedia("(min-width: 400px)").matches) {
  /* the viewport is at least 400 pixels wide */
} else {
  /* the viewport is less than 400 pixels wide */
}

Comments

[Daniel Tkachenko]

а скрыть - вот так:

document.getElementById('top').style.display ="none";

[Daniel Tkachenko]

Можно просто в CSS его скрыть, без js

@media(max-width: 769px){
  #top{
    display: none!important;
  }
}

[Daniel Tkachenko]

Читайте о медиа запросах :)

[sergiocharm]

Daniel Tkachenko, Daniel Tkachenko, оно у меня скрыто пока не проскролено 200 px
потом появляется, но появляется и на мобилке.

[sergiocharm]

Daniel Tkachenko, скрывать css я умею, но кеш мобильных в браузерах долго хранится и люди жалуются что пол экрана занимает

[sergiocharm]

Daniel Tkachenko, можете полностью код написать куда вставлять проверку экрана?

[Rustam Bainazarov]

sergiocharm, может тогда поставить файлу CSS версию, чтобы браузер автоматически понимал, что у вас обновление, и скачивал новый файл CSS?

Вместо 1 — ваша цифра:

<link rel="stylesheet" type="text/css" href="style.css?v=1"/>

Чем городить вот это всё на JS, когда это идеальная задача для медиазапросов.

[Daniel Tkachenko]

sergiocharm, в конец вашего .js файла

[Daniel Tkachenko]

Рустам Байназаров, смысл это этого.. явно легче через три строчки js кода это сделать

[Rustam Bainazarov]

Daniel Tkachenko, это решит в целом проблему обновления закешированных старых стилей вне зависимости от того, что в них.

А в данном случае, это позволит решить проблему самым простым способом — CSS. Почему CSS: нет сложной логики скрытия + не потребует JS-проверки ширины экрана на всех нужных событиях, чтобы не лишаться возможности скрывать-показывать блок, если человек сжимает размеры окна или тупо поворачивает устройство.

Словом, версию файла я бы в любом случае советовал поставить, это уже стандарт. А как поступит автор вопроса касательно скрытия того блока — тут выбор за ним.

[Daniel Tkachenko]

Рустам Байназаров, Окей, можно и так)