移动端适配开发

主要有两种方案,通过viewport设置画布缩放比例、通过设置html的font-size用rem适配。

方案一:强制meta viewport的宽度为设计稿的宽度

// 根据设计稿的宽度来传参 比如640 750 1125

!function(designWidth){

    if (/Android(?:\s+|\/)(\d+\.\d+)?/.test(navigator.userAgent)) {

            var phoneScale = parseInt(window.screen.width) / designWidth;       

            document.write('<meta name="viewport" content="width=' + designWidth + ',minimum-scale=' + phoneScale + ',maximum-scale=' + phoneScale + ', target-densitydpi=device-dpi">');

    } else {

        document.write('<meta name="viewport" content="width=' + designWidth + ',user-scalable=no,target-densitydpi=device-dpi,minimal-ui,viewport-fit=cover">');

    }

}(640);


方案2:rem

(function(designWidth, maxWidth) {

var doc = document,

win = window;

var docEl = doc.documentElement;

var metaEl,

metaElCon;

var styleText,

remStyle = document.createElement("style");

var tid;

function refreshRem() {

// var width = parseInt(window.screen.width); // uc有bug

var width = docEl.getBoundingClientRect().width;

if (!maxWidth) {

maxWidth = 540;

};

if (width > maxWidth) { // 淘宝做法:限制在540的屏幕下,这样100%就跟10rem不一样了

width = maxWidth;

}

var rem = width * 100 / designWidth;

// var rem = width / 10; // 如果要兼容vw的话分成10份 淘宝做法

//docEl.style.fontSize = rem + "px"; //旧的做法,在uc浏览器下面会有切换横竖屏时定义了font-size的标签不起作用的bug

remStyle.innerHTML = 'html{font-size:' + rem + 'px;}';

}

// 设置 viewport ,有的话修改 没有的话设置

metaEl = doc.querySelector('meta[name="viewport"]');

// 20171219修改:增加 viewport-fit=cover ,用于适配iphoneX

metaElCon = "width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no,viewport-fit=cover";

if(metaEl) {

metaEl.setAttribute("content", metaElCon);

}else{

metaEl = doc.createElement("meta");

metaEl.setAttribute("name", "viewport");

metaEl.setAttribute("content", metaElCon);

if (docEl.firstElementChild) {

docEl.firstElementChild.appendChild(metaEl);

}else{

var wrap = doc.createElement("div");

wrap.appendChild(metaEl);

doc.write(wrap.innerHTML);

wrap = null;

}

}

//要等 wiewport 设置好后才能执行 refreshRem,不然 refreshRem 会执行2次;

refreshRem();

if (docEl.firstElementChild) {

docEl.firstElementChild.appendChild(remStyle);

} else {

var wrap = doc.createElement("div");

wrap.appendChild(remStyle);

doc.write(wrap.innerHTML);

wrap = null;

}

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 = "16px";

} else {

doc.addEventListener("DOMContentLoaded", function(e) {

doc.body.style.fontSize = "16px";

}, false);

}

})(750, 750);

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 说到前端页面的布局方案,可以从远古时代的Table布局说起,然后来到 DIV+CSS布局,之后有了Float布局,...
    841只阅读 1,505评论 1 3
  • 盘点移动端适配方案 作为开发者,在手机移动端做适配的时候会出现很多问题:最不希望用户看到的就是横向滚动条。其次是文...
    learninginto阅读 689评论 0 4
  • 适配问题整理: 一、响应式: 1.移动端需要设置meta标签 ` ` 其中: ①、width=device-wid...
    请您注册阅读 156评论 0 0
  • 方案一: 最新方案:(隆重推荐) 1、下载MateHandler.js,并引入页面2、head里加入 3、设置bo...
    晨光2016阅读 925评论 0 0
  • rem是指相对于根元素(html)的字体大小的单位, 利用它能实现强大的屏幕适配布局。下面主要应用的是基于js去调...
    老黄_25d7阅读 3,208评论 0 3