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

代码适配的网站，通常就是针对手机端生成手机端的页面，电脑端生成电脑端的页面。原理就是通过 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'] 获取用户代理。剩下的就是简单的判断了。代码适配的原理还是很简单的。代码适配的网站可以做到按需加载，比如手机端可以使用小的图片，电脑端可以加载大的图片。体验更好。