PC端与移动端适配方案

最近有个将 PC 端项目迁移到移动端的需求。我就查了查 PC 端和移动端同时适配的方式。一共两种：通过 @media 来适配不同的 css 样式；又或者通过判断当前设备来重定向到不同的页面。
我试了一下 QQ 首页和 Teambition，都是通过重定向到不同端的页面来实现的。的确，如果真的要适配好两个端，对于复杂的项目还是得写两套 UI 来做到完美适配。

PS：下面文章摘录自：https://zhuanlan.zhihu.com/p/25377182

一般网站实现pc端与移动端适配的需求，方案有两个：

一：响应式

做一个响应式的页面。即只用一个链接，用媒体查询来控制样式。同一个链接但是pc打开与移动端打开是不一样的样式。

关于媒体查询，可以打开浏览器的调试模式模拟手机来看到各个移动设备的尺寸大小。

手机屏幕尺寸

需要注意一点虽然 iphone 的像素很高，甚至比默写pc的显示器还要高，但是开发时媒体查询使用的还是 iphone 的开发尺寸。

今天做了一个匹配平板和手机的页面，我用的媒体查询是768px。因为ipad的尺寸是1366*768

1. 当设备宽度最大是768时说明该设备是手机或者是平板的竖屏，用一套样式；
2. 如果设备宽度最小是768时，说明是平板横屏或者电脑屏幕，用另外一套样式。

@media only screen
and (min-device-width : 768px){
   .PaperTitle{
       padding: 0 8rem;
   }
}
@media only screen
and (max-device-width : 768px) {
    .PaperTitle{
    padding: 0 3rem;
    }
}

二：做两套页面

对外宣传用同一个链接，但是该链接在移动端与pc端打开，会分别自动跳转到两个不同的详细的链接。

js判断是pc或移动端核心代码如下：

<script type="text/javascript">
   var os = function () {
       var ua = navigator.userAgent,
       isWindowsPhone = /(?:Windows Phone)/.test(ua),
       isSymbian = /(?:SymbianOS)/.test(ua) || isWindowsPhone,
       isAndroid = /(?:Android)/.test(ua),
       isFireFox = /(?:Firefox)/.test(ua),
       isChrome = /(?:Chrome|CriOS)/.test(ua),
       isTablet = /(?:iPad|PlayBook)/.test(ua) || (isAndroid &&       !/(?:Mobile)/.test(ua)) || (isFireFox && /(?:Tablet)/.test(ua)),
       isPhone = /(?:iPhone)/.test(ua) && !isTablet,
       isPc = !isPhone && !isAndroid && !isSymbian;

       return {
              isTablet: isTablet,
              isPhone: isPhone,
              isAndroid: isAndroid,
              isPc: isPc
       };
   }();
   if(os.isPc){
      location.replace("http://www.onlymid.com.cn/");
   }

   if (os.isAndroid || os.isPhone) {
      location.replace('http://www.onlymid.com.cn/html/2016shujia/wap/');
   } else if (os.isTablet) {
      location.replace('http://www.onlymid.com.cn/html/2016shujia/wap/');
   }
</script>