美文网首页
根据设备dpr设置fontSize

根据设备dpr设置fontSize

作者: 风烟一纸 | 来源:发表于2019-08-23 11:40 被阅读0次

翻了半天简书,试了不少这种代码,结果还是找到自己以前的有效果,东西果然还是自己的好用 (-_- !

<script type="text/javascript">

;(function(doc, win) {

var docEle = doc.documentElement,

dpr = Math.min(win.devicePixelRatio, 3),

scale = 1 / dpr,

resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize';

var metaEle = doc.createElement('meta');

metaEle.name = 'viewport';

metaEle.content = 'initial-scale=' + 1 + ',maximum-scale=' + scale;

docEle.firstElementChild.appendChild(metaEle);

var recalCulate = function() {

var width = docEle.clientWidth;

docEle.style.fontSize = 10 * (width / 375) + 'px';

};

recalCulate();

if (!doc.addEventListener) return;

win.addEventListener(resizeEvent, recalCulate, false);

})(document, window);

</script>

相关文章

  • 根据设备dpr设置fontSize

    翻了半天简书,试了不少这种代码,结果还是找到自己以前的有效果,东西果然还是自己的好用 (-_- ! ;(funct...

  • 移动端适配

    1、根据dpr设置viewport 根据js动态设置viewport的缩放比,从而达到设备独立像素等于物理像素 2...

  • 阿里高清方案原理

    一、代码原理:1.根据dpr(设备像素比,比如dpr=2时,表示1个CSS像素由2X2个物理像素点组成),动态设置...

  • 移动web开发适配

    根据设备分辨率设置根元素的fontSize,从而设置rem。 移动web开发 运行在手机端的web页面(H5页面)...

  • antd mobile 高清方案

    前言高清方案就是根据设备屏幕的DPR(设备像素比,又称DPPX,比如dpr=2时,表示1个CSS像素由4个物理像素...

  • js-屏幕自适应rem

    // 根据屏幕的宽度动态设置html标签的fontsize function setHTML() { // ...

  • 移动端适配方案(2)

    分析lib-flexible的源码后,发现它主要做了以下几件事: 1.动态设置dpr,只考虑了ios设备,dpr ...

  • dpr是啥

    DPR也就是设备像素比 设备像素比(dpr) = 设备像素(分辨率)/设备独立像素(屏幕尺寸) 布局视窗:屏幕大...

  • 1px边框问题

    设备像素比(dpr):设备物理像素与设备独立像素(CSS像素)的比值。1.如果页面中的DOM元素的CSS样式设置边...

  • 移动端H5项目判断使用几倍图

    移动端开发过程中,因为手机的dpr(设备像素比不同),需要根据dpr来修改图标的大小,判断使用@2x 图 还是 @...

网友评论

      本文标题:根据设备dpr设置fontSize

      本文链接:https://www.haomeiwen.com/subject/empzsctx.html