html - 媒体查询使 tel : link not work

Question

我遇到了一个令我困惑的问题。我有一个电话:嵌入的链接。在我分配一个使用媒体查询在特定屏幕宽度上应用 {display: none;} 的类或 ID(都尝试过)之前，它工作得很好。应用类/ID 后，tel: link just plain 在任何宽度下都不起作用。任何帮助将不胜感激。

@media screen and (min-width: 414px){ 
  #call-now{ display: none; } 
}

<div class="pull-left" id="call-now" style="margin-left: 30%; padding-top: 12px">
  <a href="tel:1555444333" style="color: #1b95e0; text-shadow: 1px 1px 1px #ababab; font-family:    'Rubik', sans-serif; font-size: 25px">CALL NOW</a>
</div>

Answer 1

如果设备大于 414 像素，您的 CSS 表示您不想显示 div 标签。我想你可能想使用最大宽度。另外，只是一个建议:使用 id 或 class 而不是内联样式。

所以你会得到这样的东西:

CSS:

@media screen and (max-width: 414px){ 
   #call-now{ display: none;
              margin-left: 30%;
              padding-top: 12px; } 
    }
#call-anchor{
  color: #1b95e0;
  text-shadow: 1px 1px 1px #ababab;
  font-family: 'Rubik', sans-serif;
  font-size: 25px;
}

HTML:

<div class="pull-left" id="call-now">
  <a href="tel:1555444333" id="call-anchor">CALL NOW</a>
</div>