首页 > wordpress CMS主题制作 > wordpress CMS主题如何让PC和移动端使用不同的模板样式——响应式布局?

wordpress CMS主题如何让PC和移动端使用不同的模板样式——响应式布局?

作者: 分类:wordpress CMS主题制作 点击: 93 次
wordpress CMS主题:ssmay主题

    在wordpress主题开发过程中,为了方便,我们一般采用响应式布局来做wordpress网站,以适应不同的终端。这也是为了让用户在不同的终端上都能看到效果良好的网站布局。作为开发者,我一般采用2种方案来让我的wordpress CMS主题来适应不同的终端。

    方案一:完全通过CSS来控制:

    这种方案也是大多数wordpress主题开发者所采用的。因为,只需要一个CSS文件,就可以简单实现。

    首先,在页面头部添加viewport标签

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    width:viewport的宽度 【屏幕宽度】
    height:viewport的高度
    initial-scale :初始的缩放比例
    minimum-scale :允许用户缩放到的最小比例
    maximum-scale:允许用户缩放到的最大比例
    user-scalable:用户是否可以手动缩放

    然后,通过CSS根据屏幕宽度来控制布局:

    @media screen and (max-width:320px){  //当屏幕宽度 <= 320px时
    html{ font-size:12rem; }  //这里,我们就可以设置页面元素在屏宽320px内的样式
    }

    方案二:先判断终端是PC还是移动端:

    意思是说:先通过php或其它方式判断当前访问网站的是手机还是电脑,然后再根据判断来布局。对于布局比较复杂、页面调用数据库比较多的情况下,这种方案比较适用,它可以让一些调用在手机端不调用,以减少数据库调用次数而提升手机端响应时间。

    判断终端函数放到functions.php文件中:

    function is_mobile() {
    $user_agent = $_SERVER['HTTP_USER_AGENT'];
    $mobile_browser = Array(
    "mqqbrowser", //手机QQ浏览器
    "opera mobi", //手机opera
    "juc","iuc",//uc浏览器
    "fennec","ios","applewebKit/420","applewebkit/525","applewebkit/532","ipad","iphone","ipaq","ipod",
    "iemobile", "windows ce",//windows phone
    "240x320","480x640","acer","android","anywhereyougo.com","asus","audio","blackberry","blazer","coolpad" ,"dopod", "etouch", "hitachi","htc","huawei", "jbrowser", "lenovo","lg","lg-","lge-","lge", "mobi","moto","nokia","phone","samsung","sony","symbian","tablet","tianyu","wap","xda","xde","zte"
    );
    $is_mobile = false;
    foreach ($mobile_browser as $device) {
    if (stristr($user_agent, $device)) {
    $is_mobile = true;
    break;
    }
    }
    return $is_mobile;
    }

    在需要判断的地方添加这个函数来判断,如:在header.php头部文件中判断,如果是PC端就调用style.css文件,如果是移动端就调用mobile.css样式文件:

    if(is_mobile()){
    echo '<meta name="viewport" content="width=device-width, initial-scale=1/>';
    echo '<link rel="stylesheet" type="text/css" href="'.THEME_PATH.'/mobile.css">';
    }else{
    echo '<link rel="stylesheet" type="text/css" href="'.THEME_PATH.'/style.css">';
    }

    这样,在PC端就会显示PC端的样式,在手机端就会显示手机端的样式。当然,在页面的其它地方也可以用这个函数来处理,如:PC端有幻灯片,而手机端就不想使用幻灯片…… 等。开发wordpress CMS主题时,以上2种方案都可以使用。

文章作者:高时银博客
本文地址:http://wanlimm.com/77201806295770.html
版权所有 © 转载时必须以链接形式注明作者和原始出处!

上一篇:
下一篇:
wordpress CMS主题:ssmay主题

或许你会感兴趣的文章:

发表评论

电子邮件地址不会被公开。 必填项已用*标注

This site uses Akismet to reduce spam. Learn how your comment data is processed.