@tower1229/flow-ui
Version:
Highly customizable UI framework based Seajs/jQuery
68 lines (62 loc) • 2.14 kB
HTML
<html lang="zh-cn">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="renderer" content="webkit">
<meta http-equiv='X-UA-Compatible' content='IE=edge,chrome=1'>
<title>移动端屏幕适配</title>
<meta content="" name="Keywords">
<meta content="" name="Description">
<meta name="format-detection" content="telephone=no">
<link href="/flow-ui/favicon.ico" rel="icon">
<link href="/flow-ui/css/style.css" rel="stylesheet">
<script type="text/javascript">
if(window.location.href.indexOf('https')===0){
document.write('<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />');
}
</script>
<!--[if lt IE 9]><script src="/flow-ui/lib/H5shiv.js"></script><![endif]-->
<script>
//安卓js适配
(function(win, doc) {
function setFontSize() {
var winWidth = window.innerWidth;
doc.documentElement.style.fontSize = (winWidth / 640) * 100 + 'px';
}
var evt = 'onorientationchange' in win ? 'orientationchange' : 'resize';
var timer = null;
win.addEventListener(evt, function() {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}, false);
win.addEventListener("pageshow", function(e) {
if (e.persisted) {
clearTimeout(timer);
timer = setTimeout(setFontSize, 300);
}
}, false);
setFontSize();
})(window, document);
</script>
</head>
<body>
<div class="wrap">
<style>
.test {
width: 3.2rem;
height: 3.2rem;
background: yellow;
}
</style>
<div class="test">
<p>在任何手机上都显示为宽度50%（3.2rem）的正方形</p>
<p style="font-size:.28rem">字号.28rem的文字</p>
</div>
</div>
<script src="/flow-ui/lib/sea.js" id="seajsnode"></script>
<script>
seajs.use('js/fitmobile');
</script>
</body>
</html>