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

OR

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

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

删除手机屏幕中的javascript链接

1 个答案: