Question

http://tynesideelectrical.co.uk/

在此网站上显示标题上的电话号码横幅。我需要在从移动设备浏览时显示“点击通话”图片而不是此数字横幅。

使用CSS。

任何希望。？

Answer 1

使用CSS，您可以通过background-image属性嵌入图像，然后将其与媒体查询结合使用，以在桌面和移动设备上加载不同的图像。

/* For desktop */
@media (min-width: 721px) {
  .header {
    background-image: url('img/desktop.png');
  }
}

/* For mobile */
@media (max-width: 720px) {
  .header {      
     background-image: url('img/mobile.png');
  }
}

Answer 2

媒体查询是你的朋友！

您可能需要查看： https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries

检查设备/显示器，并根据您更改样式。

Answer 3

理论上你可以使用简单的

@media handheld {
    /* rules for mobile phone */    
}
@media screen {
    /* rules for computers */   
}

但是（新的）智能手机假装他们是正常的计算机并且不会对手持设备作出反应。

没有确切的方法......你只能通过较小的分辨率识别手机（但似乎不是很长时间）

如何使用CSS显示桌面和移动浏览器的单独图像？

3 个答案: