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;
  }

}

不要忘记头标记中的视口元标记：

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

Answer 2

尝试

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

跨浏览器解决方案（使用IE8及更早版本的clientWidth和clientHeight）：

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

Answer 3

你必须使用@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>

仅在小屏幕上显示div

3 个答案: