移动前端自适应适配方法

所谓前端适配，就是为了让移动设计稿在大部分的移动设备上看起来有一致的展示效果，目前比较流行的方法有两种。一种是强制meta viewport宽度为设计稿宽度，一种是使用rem自适应布局的flexible.js。各有利弊，使用第一种在某些浏览器的webview里面会出现兼容问题，而且对于1像素会无法渲染。而用rem的方案在背景和字体上也会有某些问题。

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

将代码放在头部，然后制作稿跟PC上一样的制作就行

// 根据设计稿的宽度来传参 比如640 750 1125
!function(designWidth){if (/Android(?:\s+|\/)(\d+\.\d+)?/.test(navigator.userAgent)) {var version = parseFloat(RegExp.$1);if (version > 2.3) {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 + ',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);

demo

<!doctype HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta content="telephone=no" name="format-detection" />
<title>model</title>
<script type="text/javascript">
// 根据设计稿的宽度来传参 比如640 750 1125
!function(e){if(/Android(?:\s+|\/)(\d+\.\d+)?/.test(navigator.userAgent)){var t=parseFloat(RegExp.$1);if(t>2.3){var i=parseInt(window.screen.width)/e;document.write('<meta name="viewport" content="width='+e+",minimum-scale="+i+",maximum-scale="+i+', target-densitydpi=device-dpi">')}else{document.write('<meta name="viewport" content="width='+e+',target-densitydpi=device-dpi">')}}else{document.write('<meta name="viewport" content="width='+e+',user-scalable=no,target-densitydpi=device-dpi,minimal-ui,viewport-fit=cover">')}}(640);
</script>
<style>
body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,pre,form,input,textarea,p,hr,thead,tbody,tfoot,th,td{margin:0;padding:0;}
ul,ol{list-style:none;}
a{text-decoration:none;}
html{-ms-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;font-size:32px;}
body{font-size:32px;line-height:1.5;}
body,button,input,select,textarea{font-family:'helvetica neue',tahoma,'hiragino sans gb',stheiti,'wenquanyi micro hei',5FAE8F6F96C59ED1,5B8B4F53,sans-serif;}
b,strong{font-weight:bold;}
i,em{font-style:normal;}
table{border-collapse:collapse;border-spacing:0;}
table th,table td{border:1px solid #ddd;padding:5px;}
table th{font-weight:inherit;border-bottom-width:2px;border-bottom-color:#ccc;}
img{border:0 none;width:auto9;max-width:100%;vertical-align:top;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;vertical-align:baseline;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
@media screen and (-webkit-min-device-pixel-ratio:0){input{line-height:normal!important;}
}
select[size],select[multiple],select[size][multiple]{border:1px solid #AAA;padding:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video,progress{display:inline-block;}
</style>
</head>
<body><!-- 页面结构写在这里 --><!-- 页面结构写在这里 --><!-- 页面结构写在这里 --><!-- 页面结构写在这里 -->
</body>
</html>

方案2：rem精简版flexible.js

计算尺寸时，只需要将对应的尺寸除以100。

(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有bugvar 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的标签不起作用的bugremStyle.innerHTML = 'html{font-size:' + rem + 'px;}';}// 设置 viewport ，有的话修改 没有的话设置metaEl = doc.querySelector('meta[name="viewport"]');// 20171219修改：增加 viewport-fit=cover ，用于适配iphoneXmetaElCon = "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);

demo

<!doctype HTML>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<meta content="telephone=no" name="format-detection" />
<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no,viewport-fit=cover"/>
<title>lib.flexible 简化版</title>
<script type="text/javascript">
(function(e,t){var i=document,n=window;var l=i.documentElement;var r,a;var d,o=document.createElement("style");var s;function m(){var i=l.getBoundingClientRect().width;if(!t){t=540}if(i>t){i=t}var n=i*100/e;o.innerHTML="html{font-size:"+n+"px;}"}r=i.querySelector('meta[name="viewport"]');a="width=device-width,initial-scale=1,maximum-scale=1.0,user-scalable=no,viewport-fit=cover";if(r){r.setAttribute("content",a)}else{r=i.createElement("meta");r.setAttribute("name","viewport");r.setAttribute("content",a);if(l.firstElementChild){l.firstElementChild.appendChild(r)}else{var c=i.createElement("div");c.appendChild(r);i.write(c.innerHTML);c=null}}m();if(l.firstElementChild){l.firstElementChild.appendChild(o)}else{var c=i.createElement("div");c.appendChild(o);i.write(c.innerHTML);c=null}n.addEventListener("resize",function(){clearTimeout(s);s=setTimeout(m,300)},false);n.addEventListener("pageshow",function(e){if(e.persisted){clearTimeout(s);s=setTimeout(m,300)}},false);if(i.readyState==="complete"){i.body.style.fontSize="16px"}else{i.addEventListener("DOMContentLoaded",function(e){i.body.style.fontSize="16px"},false)}})(750,750);
</script>
<style>
/*
需要注意的是：
样式的reset中需先设置html字体的初始化大小为50px，这是为了防止js被禁用或者加载不到或者执行错误而做的兼容
样式的reset中需先设置body字体的初始化大小为16px，这是为了让body内的字体大小不继承父级html元素的50px，而用系统默认的16px
*/
body,dl,dd,ul,ol,h1,h2,h3,h4,h5,h6,pre,form,input,textarea,p,hr,thead,tbody,tfoot,th,td{margin:0;padding:0;}
ul,ol{list-style:none;}
a{text-decoration:none;}
html{-ms-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none;font-size:50px;}
body{line-height:1.5;font-size:16px;}
body,button,input,select,textarea{font-family:'helvetica neue',tahoma,'hiragino sans gb',stheiti,'wenquanyi micro hei',\5FAE\8F6F\96C5\9ED1,\5B8B\4F53,sans-serif;}
b,strong{font-weight:bold;}
i,em{font-style:normal;}
table{border-collapse:collapse;border-spacing:0;}
table th,table td{border:1px solid #ddd;padding:5px;}
table th{font-weight:inherit;border-bottom-width:2px;border-bottom-color:#ccc;}
img{border:0 none;width:auto\9;max-width:100%;vertical-align:top;}
button,input,select,textarea{font-family:inherit;font-size:100%;margin:0;vertical-align:baseline;}
button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}
button[disabled],input[disabled]{cursor:default;}
input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}
input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;}
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none;}
@media screen and (-webkit-min-device-pixel-ratio:0){input{line-height:normal!important;}
}
select[size],select[multiple],select[size][multiple]{border:1px solid #AAA;padding:0;}
article,aside,details,figcaption,figure,footer,header,hgroup,main,nav,section,summary{display:block;}
audio,canvas,video,progress{display:inline-block;}.g-doc{width:6.4rem;margin:0px auto;}</style>
</head>
<body><div class="g-doc"><!-- 页面结构写在这里 --><!-- 页面结构写在这里 --><!-- 页面结构写在这里 --><!-- 页面结构写在这里 --></div>
</body>
</html>

移动前端自适应适配方法相关推荐

H5|web移动前端自适应适配布局解决方案
方案: 固定一个某些宽度,使用一个模式,加上少许的媒体查询方案使用flexbox解决方案使用百分比加媒体查询使用rem 1. 简单问题简单解决我觉得有些web app并一定很复杂,比如拉勾网, ...
html刘海屏高度,iphone刘海屏网页适配方法
1. 下面是实现iphonex 刘海屏前端网页适配的一个插值算法小案例 Title body, ul { margin: 0; } ul { padding-left: 10px; } li { li ...
html5页面适配方法,H5案例分享：HTML5移动页面适配方法
HTML5移动页面适配方法之前做过PC页面时考虑最多的是兼容,这是因为浏览器之间的差异引起的.而移动端是基本没有"兼容"的问题了,全是CSS3,是不是很开心,但是开心早了,因为适 ...
前端程序调试方法总结--高级版
文章目录前端程序调试方法总结--初级版引言一.先来认识一下这些按钮的功能二.Sources资源页面的断点调试三.Post man你值得拥有的网络请求神器完结前端程序调试方法总结–初级版 ...
Android-适配各国语言、屏幕尺寸、系统版本及常见适配方法总结
<?xml version="1.0" encoding="utf-8"?> My Application Hello World! 西班牙语,/v ...
移动端h5页面不同尺寸屏幕适配方法
移动互联网时代,多端适配对于前端工作者来说带来了很多麻烦,有麻烦相应的就有解决方案,面对适配方法有很多,百分比布局.弹性布局,,还有rem布局今天主要针对rem布局讲解一下: 本方法是阿里手淘的页面 ...
H5页面移动端背景图以及文字适配方法
H5页面适配的方法背景的适配给页面设置背景图,因为适配不同的设备(设备屏幕分辨率不同),所以再给背景图宽高的时候不能全部给100% 背景图(ui设计图)的比例是固定的,这里举例750px*1468 ...
html网页在不同尺寸屏幕大小,移动端h5页面不同尺寸屏幕适配方法
移动互联网时代,多端适配对于前端工作者来说带来了很多麻烦,有麻烦相应的就有解决方案,面对适配方法有很多,百分比布局.弹性布局,,还有rem布局今天主要针对rem布局讲解一下: 本方法是阿里手淘的页面 ...
三种Div高度自适应的方法
让DIV高度自适应,这是在网页设计中常遇到的问题,为了给大家提供参考,这里提供3种div高度自适应的方法:一是JS法.二是背景图填充法.三是"补丁大法"(比较变态). 1.JS法 ...

移动前端自适应适配方法

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

demo

方案2：rem精简版flexible.js

demo

移动前端自适应适配方法相关推荐

最新文章

热门文章