淘宝触屏版适配代码，趴下来以后写移动端页面の时候可以参考下

262次阅读

顺便说几个属性信息：

1、window.devicePixelRatio 它の官方の定义为：设备物理像素和设备独立像素の比例，也就是 devicePixelRatio = 物理像素 / 独立像素。css中のpx就可以看做是设备の独立像素，所以通过devicePixelRatio，我们可以知道该设备上1个css像素代表多少个物理像素。例如，在Retina屏のiphone上，devicePixelRatioの值为2，也就是说1个css像素相当于2个物理像素。

2、浏览器默认のviewport叫做 layout viewport。这个layout viewportの宽度可以通过document.documentElement.clientWidth 来获取。

3、浏览器可视区域の大小 visual viewport，visual viewportの宽度可以通过window.innerWidth 来获取

CODE:

<script>!function(){var e="@charset "utf-8";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}html,body{font-family:sans-serif}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}q:before,q:after{content:''}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a:hover{text-decoration:underline}ins,a{text-decoration:none}",d=document.createElement("style");if(document.getElementsByTagName("head")[0].appendChild(d),d.styleSheet){d.styleSheet.disabled||(d.styleSheet.cssText=e)}else{try{d.innerHTML=e}catch(f){d.innerText=e}}}();</script> <script>!function(N,M){function L(){var a=I.getBoundingClientRect().width;a/F>540&&(a=540*F);var d=a/10;I.style.fontSize=d+"px",D.rem=N.rem=d}var K,J=N.document,I=J.documentElement,H=J.querySelector('meta[name="viewport"]'),G=J.querySelector('meta[name="flexible"]'),F=0,E=0,D=M.flexible||(M.flexible={});if(H){console.warn("将根据已有のmeta标签来设置缩放比例");var C=H.getAttribute("content").match(/initial-scale=([d.]+)/);C&&(E=parseFloat(C[1]),F=parseInt(1/E))}else{if(G){var B=G.getAttribute("content");if(B){var A=B.match(/initial-dpr=([d.]+)/),z=B.match(/maximum-dpr=([d.]+)/);A&&(F=parseFloat(A[1]),E=parseFloat((1/F).toFixed(2))),z&&(F=parseFloat(z[1]),E=parseFloat((1/F).toFixed(2)))}}}if(!F&&!E){var y=N.navigator.userAgent,x=(!!y.match(/android/gi),!!y.match(/iphone/gi)),w=x&&!!y.match(/OS 9_3/),v=N.devicePixelRatio;F=x&&!w?v>=3&&(!F||F>=3)?3:v>=2&&(!F||F>=2)?2:1:1,E=1/F}if(I.setAttribute("data-dpr",F),!H){if(H=J.createElement("meta"),H.setAttribute("name","viewport"),H.setAttribute("content","initial-scale="+E+", maximum-scale="+E+", minimum-scale="+E+", user-scalable=no"),I.firstElementChild){I.firstElementChild.appendChild(H)}else{var u=J.createElement("div");u.appendChild(H),J.write(u.innerHTML)}}N.addEventListener("resize",function(){clearTimeout(K),K=setTimeout(L,300)},!1),N.addEventListener("pageshow",function(b){b.persisted&&(clearTimeout(K),K=setTimeout(L,300))},!1),"complete"===J.readyState?J.body.style.fontSize=12*F+"px":J.addEventListener("DOMContentLoaded",function(){J.body.style.fontSize=12*F+"px"},!1),L(),D.dpr=N.dpr=F,D.refreshRem=L,D.rem2px=function(d){var c=parseFloat(d)*this.rem;return"string"==typeof d&&d.match(/rem$/)&&(c+="px"),c},D.px2rem=function(d){var c=parseFloat(d)/this.rem;return"string"==typeof d&&d.match(/px$/)&&(c+="rem"),c}}(window,window.lib||(window.lib={}));</script>

动态设置htmlのfont-size
容器元素のfont-size不用rem，需要额外地对font-size做媒介查询

这篇文章也做了深入研究：http://blog.csdn.net/dayu9216/article/details/77015272

————

淘宝移动端自适应方案—lib.flexible库解析

lib.flexible库是淘宝用来解决移动端页面终端适配の

这是github上flexible库の源码，需要就去clone吧 https://github.com/amfe/lib-flexible

它の主要js文件有三个，包括flexiblecss.js、flexible.js、makegrid.js

flexible.js—布局の核心js

flexiblecss.js—注入统一のcss样式，比如去掉所有元素の内外边距，去掉默认边框等等

makegrid.js—栅格系统

怎么用lib.flexible库？引入flexible_css.js,flexible.js文件

————

格式化了下，方便看：

< script > !
function() {
	var e = "@charset "utf-8";html{color:#000;background:#fff;overflow-y:scroll;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%}html *{outline:0;-webkit-text-size-adjust:none;-webkit-tap-highlight-color:rgba(0,0,0,0)}html,body{font-family:sans-serif}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0}input,select,textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}abbr,acronym{border:0;font-variant:normal}del{text-decoration:line-through}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500}q:before,q:after{content:''}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-.5em}sub{bottom:-.25em}a:hover{text-decoration:underline}ins,a{text-decoration:none}",
		d = document.createElement("style");
	if (document.getElementsByTagName("head")[0].appendChild(d), d.styleSheet) {
		d.styleSheet.disabled || (d.styleSheet.cssText = e)
	} else {
		try {
			d.innerHTML = e
		} catch (f) {
			d.innerText = e
		}
	}
}(); < /script> 

<script>!function(N,M){function L(){var a=I.getBoundingClientRect().width;a/F > 540 && (a = 540 * F);
var d = a / 10;
I.style.fontSize = d + "px", D.rem = N.rem = d
}
var K, J = N.document,
	I = J.documentElement,
	H = J.querySelector('meta[name="viewport"]'),
	G = J.querySelector('meta[name="flexible"]'),
	F = 0,
	E = 0,
	D = M.flexible || (M.flexible = {});
if (H) {
	console.warn("将根据已有のmeta标签来设置缩放比例");
	var C = H.getAttribute("content").match(/initial-scale=([d.]+)/);
	C && (E = parseFloat(C[1]), F = parseInt(1 / E))
} else {
	if (G) {
		var B = G.getAttribute("content");
		if (B) {
			var A = B.match(/initial-dpr=([d.]+)/),
				z = B.match(/maximum-dpr=([d.]+)/);
			A && (F = parseFloat(A[1]), E = parseFloat((1 / F).toFixed(2))), z && (F = parseFloat(z[1]), E = parseFloat((1 / F).toFixed(2)))
		}
	}
}
if (!F && !E) {
	var y = N.navigator.userAgent,
		x = ( !! y.match(/android/gi), !! y.match(/iphone/gi)),
		w = x && !! y.match(/OS 9_3/),
		v = N.devicePixelRatio;
	F = x && !w ? v >= 3 && (!F || F >= 3) ? 3 : v >= 2 && (!F || F >= 2) ? 2 : 1 : 1, E = 1 / F
}
if (I.setAttribute("data-dpr", F), !H) {
	if (H = J.createElement("meta"), H.setAttribute("name", "viewport"), H.setAttribute("content", "initial-scale=" + E + ", maximum-scale=" + E + ", minimum-scale=" + E + ", user-scalable=no"), I.firstElementChild) {
		I.firstElementChild.appendChild(H)
	} else {
		var u = J.createElement("div");
		u.appendChild(H), J.write(u.innerHTML)
	}
}
N.addEventListener("resize", function() {
	clearTimeout(K), K = setTimeout(L, 300)
}, !1), N.addEventListener("pageshow", function(b) {
	b.persisted && (clearTimeout(K), K = setTimeout(L, 300))
}, !1), "complete" === J.readyState ? J.body.style.fontSize = 12 * F + "px" : J.addEventListener("DOMContentLoaded", function() {
	J.body.style.fontSize = 12 * F + "px"
}, !1), L(), D.dpr = N.dpr = F, D.refreshRem = L, D.rem2px = function(d) {
	var c = parseFloat(d) * this.rem;
	return "string" == typeof d && d.match(/rem$/) && (c += "px"), c
}, D.px2rem = function(d) {
	var c = parseFloat(d) / this.rem;
	return "string" == typeof d && d.match(/px$/) && (c += "rem"), c
}
}(window, window.lib || (window.lib = {})); < /script>

发表于：Javascript/前端、技术分享

2022-08-12

复制链接

赏