<script>
// 该代码来自http://www.ghugo.com/mobile-h5-fluid-layout-for-iphone6/
(function (doc, win) {
// 分辨率Resolution适配
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
};
// Abort if browser does not support addEventListener
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
// 一物理像素在不同屏幕的显示效果不一样。要根据devicePixelRatio来修改meta标签的scale,要注释上面的meta标签
(function(){
return;
var dpr = scale =1;
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;
//
var 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);
}
})();
})(document, window);
</script>
分享到:
相关推荐
根据屏幕大小自动调节rem的大小;自适应屏幕大小;适合移动开发
为了解决这类问题,我觉得可以利用js监听屏幕宽度变化来实现更改HTML 根元素font-size的值。 下面是相关JavaScript的实现代码: (function (doc, win) { var docEl = doc.documentElement, resizeEvt = '...
html 移动端 rem.js
主要介绍了Js动态设置rem来实现移动端字体的自适应代码,代码简单易懂非常不错,具有参考借鉴价值,需要的朋友可以参考下
webapp之设计尺寸转css-rem尺寸,从而适配所有移动端分辨率
关于rem的一切,这里全都有_能“等比例”适配所有屏幕尺寸教程.zip
html5-px2rem - HTML5页面布局单位由px转换rem解决方案
(1)在vscode中的扩展安装cssrem插件,文件—》首选项—》设置—》(搜索cssrem,改变rootfontsize为设计图 / 10的数字) (2)在页面中使用script标签引入rem.js文件(在js文件的18行把数字改为设计图的大小) ...
rem是 css3一种新的长度单位。它是相对于html标签的字体大小的单位(注意这里泛指是相对于html中的根元素标签也就是html)。 一般用于在移动端H5页面中解决各种机型适配问题的js,文件中详细说明。
用于页面上使用rem,和echarts使用rem适配
rem.js单位换算..
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...
rem转px
rem.js 移动端自适应
超简单使用方法:import导入默认tool对象;tool.remDefault模式下750设计稿手机全屏CSS设置为750/1000=0.75rem;tool.remHalf模式下为750/100/2=3.75rem;
适用于移动端的单位转换工具,设计图是375的话直接可以用的。 100px=2rem。 使用时要放到引用的最前边。
浏览器自适应 rem计算形成的计算方式适合于大小屏幕,方便控制不同的屏幕大小
使用rem单位实现自适应布局,轻松掌握移动端开发。用法简单,比如普遍的设计图宽度为750px,那么在css中设置为7.5rem即可实现宽度100%
移动端适配rem.js
js代码实现页面自适应,css样式可以用rem来做单位,实现界面随浏览器变化而自适应大小