选择性使用网站背景图片

最近的一篇文章主题【3】的背景坎坷里写到了背景图片的background-size: cover这个css对移动设备并不怎么友好,无法达到标准的显示效果,于是我一直在想办法使用img标签来填补这个bug,不过今天我又不想做了,所以找了个理由。[接下来就是理由]

如可以正常浏览本站的童鞋们所见,我的div背景大部分都是半透明的,寒假里了解openGL的时候感觉透明处理真心很费神啊[对计算机来说],所以我决定让移动设备就干脆不显示背景图了。这样不仅省去好多渲染步骤,看起来还清爽,顺便间接的帮我解决了移动设备上背景图的撑满问题。

在这最重要的是判断是否为移动设备。博主我比较懒。。所以直接网上找了个

//在php上的识别
function isMobile() {  
                /* 如果有HTTP_X_WAP_PROFILE则一定是移动设备  */
                if (isset($_SERVER['HTTP_X_WAP_PROFILE'])) {  
                    return true;  
                }  
                /*如果via信息含有wap则一定是移动设备,部分服务商会屏蔽该信息  */
                if (isset($_SERVER['HTTP_VIA'])) {  
                    /*找不到为flase,否则为true  */
                    return stristr($_SERVER['HTTP_VIA'], "wap") ? true : false;  
                }  
                /*判断手机发送的客户端标志,兼容性有待提高  */
                if (isset($_SERVER['HTTP_USER_AGENT'])) {  
                    $clientkeywords = array('nokia', 'sony', 'ericsson', 'mot', 'samsung', 'htc', 'sgh', 'lg', 'sharp', 'sie-', 'philips', 'panasonic', 'alcatel', 'lenovo', 'iphone', 'ipod', 'blackberry', 'meizu', 'android', 'netfront', 'symbian', 'ucweb', 'windowsce', 'palm', 'operamini', 'operamobi', 'openwave', 'nexusone', 'cldc', 'midp', 'wap', 'mobile');  
                   /*  从HTTP_USER_AGENT中查找手机浏览器的关键字 */ 
                    if (preg_match("/(" . implode('|', $clientkeywords) . ")/i", strtolower($_SERVER['HTTP_USER_AGENT']))) {  
                        return true;  
                    }  
                }  
                /*协议法,因为有可能不准确,放到最后判断  */
                if (isset($_SERVER['HTTP_ACCEPT'])) {  
                    /* 如果只支持wml并且不支持html那一定是移动设备  */
                    /* 如果支持wml和html但是wml在html之前则是移动设备 */ 
                    if ((strpos($_SERVER['HTTP_ACCEPT'], 'vnd.wap.wml') !== false) && (strpos($_SERVER['HTTP_ACCEPT'], 'text/html') === false || (strpos($_SERVER['HTTP_ACCEPT'], 'vnd.wap.wml') < strpos($_SERVER['HTTP_ACCEPT'], 'text/html')))) {  
                        return true;  
                    }  
                }  
                return false;  
            }  

//在浏览器里用Javascript识别
function ismobile() {
	/*判断是否是移动设备*/
	var sUserAgent = navigator.userAgent.toLowerCase();
	var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
	var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
	var bIsMidp = sUserAgent.match(/midp/i) == "midp";
	var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
	var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
	var bIsAndroid = sUserAgent.match(/android/i) == "android";
	var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
	var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
	if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
		return true;
	} else {
		return false;
	}
}

然后在模版里修改相关代码起到上面提到的效果。

在这里我顺便把在手机浏览时可以省掉的js效果也顺便省掉了,比如:

<?php if(!isMobile()): ?>
<!--如果是不支持css3的IE版本,为背景图使用特殊处理方法-->
<!--[if lt IE 9]><div class='bgdiv'><img id='backgroundimg' src /></div><![endif]-->
<iframe src="<?php echo get_template_directory_uri();?>/framepage/sunandmoon.html" style="z-index:-1;" id='bgiframe' class="bgiframe"></iframe>
<iframe src="<?php echo get_template_directory_uri();?>/framepage/wait.html" style="z-index:-2;" id='waitiframe' class="bgiframe"></iframe>
<?php endif;?>

这里是用PHP决定是否显示加载动画时间轮,不显示可以节省很多资源,适合移动设备。

回到正题,现在style.css里把body的background-image样式删掉或注释掉,然后在footer里加入

<?php if(!isMobile()): ?>
$("body").css("background-image","url("+template_directory_uri+"/images/bg.jpg)");
<?php endif;?>

[花絮]之前由于忘了背景图的url要加url()..所以反复研究了好长时间。。
[这里template_directory_uri是在header里用PHP赋值的一个js变量]

这样就可以让PHP识别出不是移动设备时加上背景图,也就是是移动设备的时候页面没有背景图。

最后别忘了把透明div的背景改成不透明纯色

<?php if(isMobile()): ?>
$("#page").css("background-color","rgb(230, 222, 222)");
<?php endif;?>

于是这样一个简洁明了的“移动版”主题就出炉了喵。



本文发布于 https://luojia.me

本站文章未经文下加注授权不得拷贝发布。

本博客使用Disqus评论系统,如果看不到评论框,请尝试爬墙。