最近的一篇文章主题【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
本站文章未经文下加注授权不得拷贝发布。