03-手机适配方案

第一种方案

媒体查询：通过媒体查询对元素在不同屏幕下设置不同尺寸。

• 优势：简单，自动响应不需要刷新界面，并且移动端和pc端口维护同一段代码
• 劣势：代码量较大、会将不同屏幕下的资源进行下载、并且加载不同屏幕尺寸会导致损失一些交互方式。

应用场景

简单的页面比如官网、宣传页面、使用媒体查询、伸缩布局、bootstrap

其他复杂场景

pc端一套代码、移动端一套代码：例如电商、团购

• 使用自动跳转的方法。

//判断是不是在pc端运行
 function isPc() {
        var useragentInfo=navigator.userAgent;//可以放会设备信息
        if(/iphone/i.test(useragentInfo)){//排除手机端的可能
            return false;
        }else if(/Android/i.test(useragentInfo)){
            return false;
        }
        return true;
    }

    console.log(isPc());
    if(!isPc()){
//自动跳转
        location.href="https://main.m.taobao.com/";
    }