h5 web页面手机适配

最新推荐文章于 2024-09-02 20:58:47 发布

闲云9134

最新推荐文章于 2024-09-02 20:58:47 发布

阅读量5.6k

点赞数 1

分类专栏： HTML 文章标签： h5

HTML 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

;(function () {
    window.addEventListener(('orientationchange' in window ? 'orientationchange' : 'resize'), (function () {
        function c() {
            var d = document.documentElement;
            var cw = d.clientWidth || 640;
            d.style.fontSize = (20 * (cw / 320)) > 40 ? 40 + 'px' : (20 * (cw / 320)) + 'px';
        }
        c();
        return c;
    })(), false);
})();

/*自适应页面宽度*/ 
var setFontSize = function(){  
   var width = document.documentElement.clientWidth;  
   width = width > 750 ? 750: width;  
   var fontSize = width/750 * 100;  
   document.getElementsByTagName("html")[0].style.fontSize = fontSize + "px";
}  
setFontSize();
window.onresize = setFontSize;

//整屏适配（利用背景图片整屏适配，屏幕宽高比小于图片宽高比时，图片向左位移，）

/*css*/
.warp{ width: 100%; margin:0 auto;  overflow: hidden;}
.content{position: relative; width:100%; height:100%;}
#bg{width: auto;min-width:100%;height: 100%;position: absolute;top: 0px;z-index: -100;}

//html
<body>
<div class="warp">
    <div  class="content">
        <img id="bg" src=""/>
    <div>其它内容</div>
   </div>
</div>

//js
setTimeout("adjustBG()", 200);
function adjustBG() {
    var width = $(".content").width();
    var height = document.documentElement.clientHeight;
    var aspectRadio = height / width;
    var $bg = $("#bg");
    $(".warp").css("height", height + "px");
    if(aspectRadio>=($bg.height()/$bg.width())){
        $bg.css("left", -(height / $bg.height() * $bg.width() - width) / 2 + "px");
    }
}