javascript - 删除手机屏幕中的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() 来检测视口(viewport)的宽度并将其存储在变量中，例如 x然后使用

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