移动设备上按钮的背景颜色发生变化答案

【问题标题】：Background color of a button changes on mobile移动设备上按钮的背景颜色发生变化
【发布时间】：2018-05-23 17:02:04
【问题描述】：

我想要一个橙色的按钮，并且仅在用户通过智能手机访问该网站时显示。

@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 浏览器上显示，但是当您将桌面浏览器缩放到移动设备尺寸时会显示，有什么想法吗？

【问题讨论】：

那是因为该 css 规则没有说明任何关于移动设备的内容。它只是针对屏幕尺寸。因此，如果您在桌面上的浏览器宽度小于 451 像素，那么您会看到该按钮。如果您想检测移动设备，您可以使用 JS 来检测移动设备，并将一个类附加到您做出反应的主体上。或者在服务器上执行相同的操作，并在呈现页面时将给定的类应用于正文。
css 还无法检测到代理。您的媒体查询只是确定媒体的类型，而不是它的特异性。请参阅文档：screen = 用于电脑屏幕、平板电脑、智能手机等。
显示什么而不是橙色？是蓝色的吗？它总是有那种颜色，还是只有当你点击它时才显示？
只是一个白色的文本，和其他的一样。

标签： html css

【解决方案1】：

您可以尝试更改您的媒体查询，因为查询内容不支持当前的 android 手机。目前您已经为最大宽度 450 编写，所以可能是您正在检查设备在最大宽度 480 时是否支持的地方。您尝试下面的代码，因此它将同时支持 android 浏览器的 potrait 和 Landscape 并将隐藏桌面.

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

【讨论】：

你的 CSS 也不检查手机，它只是有不同的屏幕尺寸阈值。