html - 按钮的背景颜色在移动设备上发生变化

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 编写了，所以可能是你检查设备在 max-width 480 时是否支持的地方。你尝试下面的代码，所以它将支持 potrait 和 landscape 的 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
}