標籤：get hub win 方案 settime head rect http out
移動端頁面滿屏自適應方案（採用rem作為單位，設計稿為750 * 1334）
代碼引入：
<head> <script>function refreshRem(){var e=docEl.getBoundingClientRect().width,t=docEl.getBoundingClientRect().height;if(e/t>750/1334)var i=t/26.68;else var i=e/15;docEl.style.fontSize=i+"px"}var win=window,doc=win.document,docEl=doc.documentElement,tid;win.addEventListener("resize",function(){clearTimeout(tid),tid=setTimeout(refreshRem,300)},!1),win.addEventListener("pageshow",function(e){e.persisted&&(clearTimeout(tid),tid=setTimeout(refreshRem,300))},!1),refreshRem();</script></head>
源碼
var win = window;var doc = win.document;var docEl = doc.documentElement;var tid;function refreshRem(){ var width = docEl.getBoundingClientRect().width; var height = docEl.getBoundingClientRect().height; if ((width / height) > (750 / 1334)) { var rem = height / (1334 / 50); } else { var rem = width / (750 / 50); } docEl.style.fontSize = rem + ‘px‘;}win.addEventListener(‘resize‘, function() { clearTimeout(tid); tid = setTimeout(refreshRem, 300);}, false);win.addEventListener(‘pageshow‘, function(e) { if (e.persisted) { clearTimeout(tid); tid = setTimeout(refreshRem, 300); }}, false);refreshRem();
移動端頁面適配問題
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
