Question

我想要一个橙色的按钮，只有当用户在智能手机上访问该网站时才会显示。

@media only screen and (max-width: 450px) {
  .belnummobiel {
    color: #fff;
    background-color: rgb(255, 102, 0) !important;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 5px;
    padding-top: 5px;
    width: 100px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media only screen and (min-width: 451px) {
  .belnummobiel {
    display: none !important;
  }
}

正如您所看到的，该按钮不应该显示在网站的桌面版本上，该按钮无效。

奇怪的是，橙色背景并没有在Android Chrome浏览器上显示，但是当您将桌面浏览器扩展到移动尺寸时，是否有任何想法？

Answer 1

您可以尝试更改您的媒体查询，因为查询所采取的内容将不支持当前的Android手机。目前你已经写了max-width 450，所以可能是你检查设备将支持的最大宽度480.你尝试下面的代码，所以它将支持potrait和Android浏览器的景观，并将隐藏为桌面

.belnummobiel {
display: none !important;
}

@media only screen and (max-width: 767px) { 
.belnummobiel {
color: #fff;
background-color: rgb(255, 102, 0) !important;
padding-left: 15px;
padding-right: 15px;
padding-bottom: 5px;
padding-top: 5px;
width: 100px;
margin-left: auto;
margin-right: auto;
display:block
}

按钮的背景颜色在移动设备上变化

1 个答案: