删除手机屏幕中的 javascript 链接

Question

我的桌面网站主题上有一个可点击的 javascript 链接 (Trustwave)，我试图在移动屏幕上禁用它：

在footer.tpl：

<div style="position:absolute; margin-left:100px; margin-top:50px">  
<script type="text/javascript" src="https://sealserver.trustwave.com/seal.js?style=invert"></script>

我现在知道如何删除移动屏幕上的可点击图片链接 (Remove image link in mobile screen)，例如：

在footer.tpl：

<div class="column">
<a href="http://mywebsite.com/delivery" id="test" class="hide"></a> 

在 stylesheet.tpl 中：

@media all and (max-width: 480px) {
    .hide {
      display: none;
    }
}

#test {
  display: block;
  background-image: url('../image/myimage.png');
  background-repeat: no-repeat;
  position: absolute;
  margin-top: 10px;
  margin-left: 20px; 
  width: 75px;
  height: 75px;
}

但我不知道如何重新创建 javascript 链接，使其不会显示在移动屏幕上。提前致谢！

Answer 1

您可以通过将媒体查询放在末尾来正确使用媒体查询，因为 max-width 很可能会混淆上下文 `

这是一种更简单的方法。

 @media all and (max-width: 1500px) {
        .hide {
           display: block;
          }} 

   @media all and (max-width: 480px) {
        .hide {
              display: none;
           }}

或

您可以使用 window.innerwidth() 来检测视口的宽度并将其存储在变量 x 中 然后使用

var m = document.getElementById("column")
If (x>800)
{m.style.display='block'}
else
m.style.display="none"