1

http://tynesideelectrical.co.uk/

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

与 CSS 一起使用。

任何希望。?

4

3 回答 3

2

使用 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');
  }
}
于 2013-10-31T13:55:41.877 回答
0

理论上你可以使用简单的

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

但是（新的）智能手机假装它们是普通计算机，并且不会在手持设备上做出反应。

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

于 2013-10-31T15:47:54.483 回答
0

媒体查询是您的朋友！

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

它会检查设备/监视器，并据此更改样式。

于 2013-10-31T13:58:13.580 回答