Показывать div только на маленьком экране

Question

Я пытаюсь отобразить следующий код только на маленьком экране:

<div align="center"><a href="/mobile/mobile_home.asp">Mobile Site</a></div>

Итак, полный код:

<script>
<!-- if (screen.width <= 699){
 document.write("<div align=\"center\"><a href=\"/mobile/mobile_home.asp\">Mobile Site</a></div>")}
//-->
</script>

Если я просто сделаю ниже, это работает.

<script>
<!-- document.write("<div align=\"center\"><a href=\"/mobile/mobile_home.asp\">Mobile Site</a></div>")}
//-->
</script>

Видимо, у меня какой-то синтаксис или что-то не так с оператором if. Или есть более простой способ сделать это? Маленькая помощь Благодарю.

Answer 1

Вы можете использовать медиа-запрос в вашем CSS: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

HTML:

 <div class="mobileOnly">mobile site link</div>

CSS:

div.mobileOnly
{
  display: none;
}
@media screen and (max-width: 699px)
{
  div.mobileOnly
  {
    display: block;
  }

}

И не забудьте метатег viewport в вашем теге head:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

Answer 2

Вы должны использовать запросы @media для этого.

 <div align="center" id="mobileSite"><a href="/mobile/mobile_home.asp">Mobile Site</a></div>

    <style>  
      @media screen and (min-width: 0px) and (max-width: 699) {
      #mobileSite { display: block; }  
    }

      @media screen and (min-width: 700) and (max-width: 1024px) {
      #mobileSite { display: none; }  
    }

  </style>

Answer 3

Пытаться

if (window.innerWidth <= 699){
 document.write("<div align=\"center\"><ahref=\"/mobile/mobile_home.asp\">MobileSite</a></div>")
}

Кросс-браузерное решение (с использованием clientWidth и clientHeight для IE8 и более ранних версий):

var w = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;