这里有新鲜出炉的 Javascript 教程,程序狗速度看过来!
Javascript 是一种由 Netscape 的 LiveScript 发展而来的原型化继承的基于对象的动态类型的区分大小写的客户端脚本语言,主要目的是为了解决服务器端语言,比如 Perl,遗留的速度问题,为客户提供更流畅的浏览效果。
移动设备分辨率五花八门虽然我们可以通过 CSS3 的 media query 来实现适配,但是这种做法并不能适配所有设备,这篇文章主要介绍了 js 动态计算移动端 rem 的解决方案,非常不错,感兴趣的朋友一起看看吧
在做移动端 web app 的时候,众所周知,移动设备分辨率五花八门,虽然我们可以通过 CSS3 的 media query 来实现适配,例如下面这样:
- html {
- font-size : 20px;
- }
- @media only screen and (min-width: 401px){
- html {
- font-size: 25px !important;
- }
- }
- @media only screen and (min-width: 428px){
- html {
- font-size: 26.75px !important;
- }
- }
- @media only screen and (min-width: 481px){
- html {
- font-size: 30px !important;
- }
- }
- @media only screen and (min-width: 569px){
- html {
- font-size: 35px !important;
- }
- }
- @media only screen and (min-width: 641px){
- html {
- font-size: 40px !important;
- }
- }
但是这种做法并不能适配所有设备,于是就有了实现全适配的 JS 解决方案,例如下面这样:
- ;(function (doc, win, undefined) {
- var docEl = doc.documentElement,
- resizeEvt = 'orientationchange' in win? 'orientationchange' : 'resize',
- recalc = function () {
- var clientWidth = docEl.clientWidth;
- if (clientWidth === undefined) return;
- docEl.style.fontSize = 20 * (clientWidth / 320) + 'px';
- };
- if (doc.addEventListener === undefined) return;
- win.addEventListener(resizeEvt, recalc, false);
- doc.addEventListener('DOMContentLoaded', recalc, false)
- })(document, window);
另外附上淘宝移动端适配解决方案 flexible.js 源码:
- ; (function(win, lib) {
- var doc = win.document;
- var docEl = doc.documentElement;
- var metaEl = doc.querySelector('meta[name="viewport"]');
- var flexibleEl = doc.querySelector('meta[name="flexible"]');
- var dpr = 0;
- var scale = 0;
- var tid;
- var flexible = lib.flexible || (lib.flexible = {});
- if (metaEl) {
- //将根据已有的meta标签来设置缩放比例
- var match = metaEl.getAttribute('content').match(/initial\-scale=([\d\.]+)/);
- if (match) {
- scale = parseFloat(match[1]);
- dpr = parseInt(1 / scale);
- }
- } else if (flexibleEl) {
- var content = flexibleEl.getAttribute('content');
- if (content) {
- var initialDpr = content.match(/initial\-dpr=([\d\.]+)/);
- var maximumDpr = content.match(/maximum\-dpr=([\d\.]+)/);
- if (initialDpr) {
- dpr = parseFloat(initialDpr[1]);
- scale = parseFloat((1 / dpr).toFixed(2));
- }
- if (maximumDpr) {
- dpr = parseFloat(maximumDpr[1]);
- scale = parseFloat((1 / dpr).toFixed(2));
- }
- }
- }
- if (!dpr && !scale) {
- var isAndroid = win.navigator.appVersion.match(/android/gi);
- var isIPhone = win.navigator.appVersion.match(/iphone/gi);
- var devicePixelRatio = win.devicePixelRatio;
- if (isIPhone) {
- // iOS下,对于2和3的屏,用2倍的方案,其余的用1倍方案
- if (devicePixelRatio >= 3 && (!dpr || dpr >= 3)) {
- dpr = 3;
- } else if (devicePixelRatio >= 2 && (!dpr || dpr >= 2)) {
- dpr = 2;
- } else {
- dpr = 1;
- }
- } else {
- // 其他设备下,仍旧使用1倍的方案
- dpr = 1;
- }
- scale = 1 / dpr;
- }
- docEl.setAttribute('data-dpr', dpr);
- if (!metaEl) {
- metaEl = doc.createElement('meta');
- metaEl.setAttribute('name', 'viewport');
- metaEl.setAttribute('content', 'initial-scale=' + scale + ', maximum-scale=' + scale + ', minimum-scale=' + scale + ', user-scalable=no');
- if (docEl.firstElementChild) {
- docEl.firstElementChild.appendChild(metaEl);
- } else {
- var wrap = doc.createElement('div');
- wrap.appendChild(metaEl);
- doc.write(wrap.innerHTML);
- }
- }
- function refreshRem() {
- var width = docEl.getBoundingClientRect().width;
- if (width / dpr > 540) {
- width = 540 * dpr;
- }
- var rem = width / 10;
- docEl.style.fontSize = rem + 'px';
- flexible.rem = win.rem = rem;
- }
- 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);
- if (doc.readyState === 'complete') {
- doc.body.style.fontSize = 12 * dpr + 'px';
- } else {
- doc.addEventListener('DOMContentLoaded',
- function(e) {
- doc.body.style.fontSize = 12 * dpr + 'px';
- },
- false);
- }
- refreshRem();
- flexible.dpr = win.dpr = dpr;
- flexible.refreshRem = refreshRem;
- flexible.rem2px = function(d) {
- var val = parseFloat(d) * this.rem;
- if (typeof d === 'string' && d.match(/rem$/)) {
- val += 'px';
- }
- return val;
- }
- flexible.px2rem = function(d) {
- var val = parseFloat(d) / this.rem;
- if (typeof d === 'string' && d.match(/px$/)) {
- val += 'rem';
- }
- return val;
- }
- })(window, window['lib'] || (window['lib'] = {}));
以上所述是小编给大家介绍的 JS 动态计算移动端 rem 的解决方案,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 phperz 网站的支持!
来源: http://www.phperz.com/article/17/0522/331178.html