网易、新浪移动端高清布局方案

发布于 / WEB前端 / 0 条评论

网易、新浪移动端高清布局方案

网易移动端布局


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
		<title>网易移动端布局</title>
		<script>
			(function(doc, win) {
			    var docEl = doc.documentElement,
			        isIOS = navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/),
			        dpr = isIOS ? Math.min(win.devicePixelRatio, 3) : 1,
			        dpr = window.top === window.self ? dpr : 1, //被iframe引用时,禁止缩放
			        dpr = 1,
			        scale = 1 / dpr,
			        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize';
			    docEl.dataset.dpr = dpr;
			    var metaEl = doc.createElement('meta');
			    metaEl.name = 'viewport';
			    metaEl.content = 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale;
			    docEl.firstElementChild.appendChild(metaEl);
			    var recalc = function() {
			        var width = docEl.clientWidth;
			        if (width / dpr > 750) {
			            width = 750 * dpr;
			        }
			        // 乘以100,px : rem = 100 : 1
			        docEl.style.fontSize = 100 * (width / 750) + 'px';
			    };
			    recalc()
			    if (!doc.addEventListener) return;
			    win.addEventListener(resizeEvt, recalc, false);
			})(document, window);
		</script>
		<style>
			*{margin:0; padding: 0; list-style:none; text-decoration: none; -webkit-overflow-scrolling: touch;}
			body{ max-width:750px; margin:0 auto; font-size: 16px;}
		</style>
	</head>
	<body>
		<div style="height: 1rem;background: #f60; font-size: 0.32rem;">网易移动端布局</div>
	</body>
</html>

新浪移动端布局


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
		<title>新浪移动端布局</title>
		<script type="text/javascript">if (top.location!==self.location) {top.location.href=self.location.href;};!function(w,d,m){function r(){var t=100,o=750,e=d.documentElement.clientWidth||w.innerWidth,n=m.max(m.min(e,480),320),h=50;320>=n&&(h=m.floor(n/o*t*.99)),n>320&&362>=n&&(h=m.floor(n/o*t*1)),n>362&&375>=n&&(h=m.floor(n/o*t*1)),n>375&&(h=m.floor(n/o*t*.97)),d.querySelector("html").style.fontSize=h+"px"};r();w.onresize=function(){r()}}(window,document,Math);var isChangeSax=1;</script>
		<style>
			*{margin:0; padding: 0; list-style:none; text-decoration: none; -webkit-overflow-scrolling: touch;}
			body{ max-width:750px; margin:0 auto; font-size: 16px;}
		</style>
	</head>
	<body>
		<div style="height: 1rem;background: #f60;">新浪移动端布局</div>
	</body>
</html>
转载原创文章请注明,转载自: 木槿昔年 BLOG » 网易、新浪移动端高清布局方案
沙发空缺中,还不快抢~