第一种方案
媒体查询：通过媒体查询对元素在不同屏幕下设置不同尺寸。
- 优势：简单，自动响应不需要刷新界面，并且移动端和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/";
}
