Question

body {
background:url(../img/background_leftside.png), url(../img/background_rightside.png);
background-position:left top, right top;
background-repeat: repeat-y;
background-attachment:fixed;
word-wrap: break-word;
}

当我从智能手机或平板电脑访问我的网站背景时，我希望这样不显示。

Answer 1

使用media queries概念来执行此操作。

/ *智能手机（人像和风景）----------- * /

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) {
/* Styles */
}

/ *智能手机（风景）----------- * /

@media only screen 
and (min-width : 321px) {
/* Styles */
}

/ *智能手机（肖像）----------- * /

@media only screen 
and (max-width : 320px) {
/* Styles */
}

/ * iPads（人像和风景）----------- * /

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) {
/* Styles */
}

/ * iPads（风景）----------- * /

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) {
/* Styles */
}

/ * iPads（肖像）----------- * /

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) {
/* Styles */
}

/ *台式机和笔记本电脑----------- * /

@media only screen 
and (min-width : 1224px) {
/* Styles */
}

/ *大屏幕----------- * /

@media only screen 
and (min-width : 1824px) {
/* Styles */
}

/ * iPhone 4 ----------- * /

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}

Answer 2

使用CSS media querys或使用这样的javascript来检测移动设备：

var isMobileDevice      = false;

if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
    isMobileDevice = navigator.userAgent.match(/(iPhone|iPod|iPad|Android|BlackBerry|webOS)/);
}

之后使用isMobileDevice检查并删除模具图像，如：

if(isMobileDevice) {
    jQuery('body').css('background', 'none')
}

Answer 3

在媒体查询中使用css代码

代码段仅显示全宽度的结果，而不是小于769px。即，从平板电脑的大小。

＆＃13;

@media (min-width: 769px) {
  body{
    background:url(http://www.psdgraphics.com/file/colorful-triangles-background.jpg), url(../img/background_rightside.png);
    background-position:left top, right top;
    background-repeat: repeat-y;
    background-attachment:fixed;
    word-wrap: break-word;
  }
}

＆＃13;

检测到移动设备时隐藏正文背景

3 个答案: