网页设计如何让计算机手机加载不同广告




将自己网站调整成响应式网页

我在将自己网站调整成响应式网页的过程中,找到的教学数据,用的方法大同小异:在CSS上加上一段媒体程序代码,设定当装置寛度小于某个程度,不要加载侧边和底部,以我的网站为例:

/* for 600px or less */
@media screen and (max-device-width: 600px) {
#home{display: none;}
#header{display: none;}
.comment{display: none;}
#sidebar {display: none;}
#footer{display: none;}

如此一来,我测试用手机浏览网页,的确没有展示#sidebar(侧边)和#footer(底部),但是马上发现有问题,我一个广告JS代码是写在底部里面,虽然手机已经不显示底部了,那个JS广告仍然跑出来,由此判断,就算网页自适应看不到底部,不代表底部区块的代码没有被加载。自己架网站的想必都能理解,JS代码很吃服务器资源,会影响网页加载负担和速度,既然手机浏览的网页不需要底部,那么最好干脆不要加载底部代码,不然只是浪费而已。

和这个问题直接相关的,还有另一个考虑。有些类型的广告是计算机版、有些广告是手机版,我希望同样网址,在网页和手机不但呈现的内容精简不同,更希望能加载不同的广告代码,这个,单单CSS3的媒体设定没办法做到。

在查找了一些教程中,我偶然发现wordpress有一个非常棒的函数:「wp_is_mobile()」,利用这个是否手机装置的判断函数,很轻松完全解决了我的问题,实际运用上有三种方式,以我自己的网站为例:

wordpress有一个非常棒的函数:wp_is_mobile()

一、手机上才加载的代码:

<?php if (wp_is_mobile() ): ?>
<!– 百度移动插屏广告 –>
XXXXXX(移动广告代码)
<?php endif; ?>

二、计算机上才加载的代码:

<?php if ( wp_is_mobile() ) { ?><?php }
else { ?>
<!– 百度图加广告 –>
<!–[if !IE]><!–>
XXXXXX(计算机广告代码)
<!–<![endif]–>
<?php } ?>

三、计算机手机若P则Q合并代码:

<?php if ( wp_is_mobile() ) { ?>
<!– 百度移动插屏广告 –>
XXXXXX(移动广告代码)
<?php } else { ?>
<div id=”sidebar”><?php get_sidebar(); ?></div>
<div id=”footer”><?php get_footer(); ?></div>
<?php } ?>

第三种方式非常合乎我的需求,不但设置了计算机和手机呈现不同广告,同时也限制了侧边和底部只在计算机浏览时才加载。

设置了计算机和手机呈现不同广告


有系統、全面性的學習Excel職場應用,:會計人的Excel小教室PressPlay頻道


當前文章分類:
分享