PC端手机端自适应方案
一、做成两个站,两个域名
方法:
后端判断设备切换,跳转链接
前端JS判断设备切换,跳转链接
缺点:
1.两个域名,不利于SEO优化
2.两个站,代码量大,布局项目繁杂
优点:
1.逻辑清晰,代码简洁
适用场景:
PC端和手机端设计图差别较大时
二、做成一个站,一个域名
方法:
用rem单位加媒体查询的方案,JS判断设备是手机设备时,设置根目录font-size
function browserRedirect() {
var sUserAgent = navigator.userAgent.toLowerCase();
var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";
var bIsIphoneOs = sUserAgent.match(/iphone os/i) == "iphone os";
var bIsMidp = sUserAgent.match(/midp/i) == "midp";
var bIsUc7 = sUserAgent.match(/rv:1.2.3.4/i) == "rv:1.2.3.4";
var bIsUc = sUserAgent.match(/ucweb/i) == "ucweb";
var bIsAndroid = sUserAgent.match(/android/i) == "android";
var bIsCE = sUserAgent.match(/windows ce/i) == "windows ce";
var bIsWM = sUserAgent.match(/windows mobile/i) == "windows mobile";
if (bIsIpad || bIsIphoneOs || bIsMidp || bIsUc7 || bIsUc || bIsAndroid || bIsCE || bIsWM) {
//使用rem
var clientWidth = document.documentElement.clientWidth;
if (clientWidth >= 750) {
document.documentElement.style.fontSize = '100px';
} else {
document.documentElement.style.fontSize = clientWidth / 7.5 + "px";
window.addEventListener("resize",function(){document.documentElement.style.fontSize = innerWidth/7.5 + "px"; },false)
}
}
}
browserRedirect();
缺点:逻辑比方案一复杂
优点:同一个域名,利于SEO优化,自适应布局
适用场景:
PC端设计图与手机端设计图 差别不大时