我想要一个橙色的按钮,并且只在用户使用智能手机访问网站时显示。
@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 浏览器上显示,但当您将桌面浏览器缩放到移动尺寸时会显示,有什么想法吗?
最佳答案
您可以尝试更改您的媒体查询,因为所采用的查询不支持当前的 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
}
关于html - 按钮的背景颜色在移动设备上发生变化,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50483304/