h5 web頁面手機適配
阿新 • • 發佈：2019-01-08
;(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"); } }