javascript - 仅在小屏幕上显示div

我正在尝试仅在小屏幕上显示以下代码：

<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语句有语法或某些错误。还是有一种更简单的方法？没什么帮助。谢谢。

最佳答案

您可以在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;
  }

}

并且不要忘了head标签中的视口meta标签：

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

关于javascript - 仅在小屏幕上显示div，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/36182480/