一:js方式判断手机可视宽高,引入不同css
var ratio = document.documentElement.clientWidth / document.documentElement.clientHeight;
function includeLinkStyle(url) {
var link = document.createElement("link");
link.rel = "stylesheet";
link.type = "text/css";
link.href = url;
document.getElementsByTagName("head")[0].appendChild(link);
}
// 轮播图以宽度为主
if (ratio == 357 / 603 || ratio == 357 / 557 || ratio == 375 / 557 || ratio == 375 / 603 || ratio == 375 / 641 || ratio == 414 / 672 || ratio == 414 / 623 || ratio == 360 / 572 || ratio == 360 / 532) {
includeLinkStyle("这里引入css路径");
}
二:直接引入css方式media媒体查询判断引入不同css,可以是最大、最小高度,最大、最小宽度
< link rel="stylesheet" href="这里引入css路径" media="screen and (max-height:672px)">
< link rel="stylesheet" href="这里引入css路径" media="screen and (min-height:672px)">
< link rel="stylesheet" href="这里引入css路径" media="screen and (max-width:672px)">
< link rel="stylesheet" href="这里引入css路径" media="screen and (min-width:672px)">
三:不同型号手机的适配尺寸

iPhone7:360*672
小平板:去头部宽768/高960 去头、尾部宽768/高902
大型平板:去头部宽980/高1209 去头、尾部宽980/高1151
大型平板:去头部宽1024/高1264