如何实现代码适配网站的制作

作者

代码适配的网站,通常就是针对手机端生成手机端的页面,电脑端生成电脑端的页面。原理就是通过 UA(user-agent) 在程序中判断一下,根据判断的结果,加载不同的模板即可。手机端加载手机端的页面,电脑端加载电脑端的页面。

代码适配的原理: 判断UA,执行不同的代码(加载不同的模板)。

这里重点是理解 UA是什么, UA就是用户代理。 浏览器向服务器发送信息的时候,都会加上用户代理。样子是这样的,比如
使用苹果的手机访问网站的时候,手机浏览器会向网站的服务器发送类似这样的的信息

User-Agent: Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1

使用苹果的安卓访问网站的时候,手机浏览器会向网站的服务器发送类似这样的的信息

User-Agent: Mozilla/5.0 (Linux; Android 5.0; SM-G900P Build/LRX21T) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Mobile Safari/537.36

使用电脑版本的谷歌浏览器,发送的UA可能是

User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36

也就是说不同的浏览器的UA是不同的。UA中一般包含 系统信息浏览器的信息,包含版本。这些信息就是判断的依据。

php演示代码适配的原理

这段判断是否是手机端的代码是,wordpress的代码。 做了一些简单的修改。

function is_mobile() {
    if ( empty($_SERVER['HTTP_USER_AGENT']) ) {
        $is_mobile = false;
    } elseif ( strpos($_SERVER['HTTP_USER_AGENT'], 'Mobile') !== false // many mobile devices (all iPhone, iPad, etc.)
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Android') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Silk/') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Kindle') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mini') !== false
        || strpos($_SERVER['HTTP_USER_AGENT'], 'Opera Mobi') !== false ) {
            $is_mobile = true;
    } else {
        $is_mobile = false;
    }
   return $is_mobile;
}


if(is_mobile()) {
    echo "mobile";
} else {
    echo "pc";
}

通过 $_SERVER['HTTP_USER_AGENT'] 获取用户代理。剩下的就是简单的判断了。代码适配的原理还是很简单的。代码适配的网站可以做到按需加载,比如手机端可以使用小的图片,电脑端可以加载大的图片。体验更好。

回复

邮箱地址不会被公开。