整平H5页面的适配

498 阅读1分钟

一: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)">

三:不同型号手机的适配尺寸

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

目前只整理了这些机型,日后继续更新