-2

我在一个 WordPress 网站上工作，并且背景图像在 iPhone 和 iPad 上显示不正确，有人可以指导我应该在我的 CSS 样式表中放置什么以让 iPhone 和 iPad 完全排除背景图像吗？

非常感谢您的帮助。

编辑我已将此添加到我的 stylesheet.css，但它仍然无法正常工作。

    /* iphone 5 */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {
    background-image: none; 
    background-color: #ffffff;
}


/* iphone 2-4 */
@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) { 
    background-image: none; 
    background-color: #ffffff;
}

/* ipad mini */

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 1)  {
    background-image: none; 
    background-color: #ffffff;
}

/* ipad 1-2 */
@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (-webkit-min-device-pixel-ratio: 1){
    background-image: none; 
    background-color: #ffffff;

}
4

3 回答 3

0

你可以用 Javascript 做到这一点

if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i))) {
      document.getElementById('myDiv').style.background = "none";
}
于 2013-07-28T19:03:40.337 回答
0

如果用户代理字符串与 iPhone 或 iPad 匹配，您需要添加单独的样式表并添加它。

IS_IPAD = navigator.userAgent.match(/iPad/i) != null;
IS_IPHONE = (navigator.userAgent.match(/iPhone/i) != null) || (navigator.userAgent.match(/iPod/i) != null);
if (IS_IPAD) {
    IS_IPHONE = false;
}
于 2013-07-28T18:55:34.547 回答
0

您正在尝试从哪个 html 元素中删除背景图像？在您的媒体查询中，您有以下内容：

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {
    background-image: none; 
    background-color: #ffffff;
}

但是您没有指定应该从哪个 html 元素中删除哪个背景图像。假设您正在尝试从正文中删除背景图像。那么你可以这样做：

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 568px) {
    body{
        background-image: none; 
        background-color: #FFF;
    }
}

作为一个选项，您可以更改您正在使用的常规背景图像并更改其大小以使其适用于 iphone，然后您可以使用 iphone 的媒体查询调用该图像。

于 2013-07-28T22:05:28.423 回答