手机端使用rem的适配
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了手机端使用rem的适配相关的知识，希望对你有一定的参考价值。
<html> <body> <!-- http://www.w3cfuns.com/notes/29143/79dafb7c07f6865f435af641869d3125.html --> <script type="text/javascript"> var phoneWidth = parseInt(window.screen.width); var phoneScale = phoneWidth/640; var ua = navigator.userAgent; if (/android (\d+\.\d+)/.test(ua)){ var version = parseFloat(RegExp.$1); // andriod 2.3 if(version>2.3){ document.write(‘<meta name="viewport" content="width=640, minimum-scale = ‘+phoneScale+‘, maximum-scale = ‘+phoneScale+‘, target-densitydpi=device-dpi">‘); // andriod 2.3以上 }else{ document.write(‘<meta name="viewport" content="width=640, target-densitydpi=device-dpi">‘); } // 其他系统 } else { document.write(‘<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">‘); } //微信去掉下方刷新栏 if(RegExp("MicroMessenger").test(navigator.userAgent)){ document.addEventListener(‘WeixinJSBridgeReady‘, function onBridgeReady() { WeixinJSBridge.call(‘hideToolbar‘); }); } //rem换算 (function (doc, win) { var docEl = doc.documentElement, resizeEvt = ‘orientationchange‘ in window ? ‘orientationchange‘ : ‘resize‘, recalc = function () { var clientWidth = docEl.clientWidth; if (!clientWidth) return; if(clientWidth>=640){ docEl.style.fontSize = ‘100px‘; }else{ docEl.style.fontSize = 100 * (clientWidth / 640) + ‘px‘; } }; if (!doc.addEventListener) return; win.addEventListener(resizeEvt, recalc, false); doc.addEventListener(‘DOMContentLoaded‘, recalc, false); })(document, window); </script> </body> </html>
以上是关于手机端使用rem的适配的主要内容，如果未能解决你的问题，请参考以下文章