博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
移动端 移动web屏幕适配方案 随不同宽度的屏幕而改变
阅读量:5154 次
发布时间:2019-06-13

本文共 1078 字,大约阅读时间需要 3 分钟。

链接地址1:http://www.cnblogs.com/zjzhome/p/4802157.html

链接地址2:http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041

链接地址3:http://isux.tencent.com/web-app-rem.html

common.js参考淘宝m.taobao.com 

var dpr, rem, scale;var fontEl = document.createElement('style');var metaEl = document.querySelector('meta[name="viewport"]');var docEl = document.documentElement;dpr = window.devicePixelRatio || 1;rem = Math.ceil(docEl.clientWidth * 2 / 10);scale = 1 / dpr;// 设置viewport,进行缩放,达到高清效果metaEl.setAttribute('content', 'width=' + dpr * rem + ',initial-scale=1,maximum-scale=1, minimum-scale=1,user-scalable=no');// 设置data-dpr属性,留作的css hack之用docEl.setAttribute('data-dpr', dpr);// 动态写入样式docEl.firstElementChild.appendChild(fontEl);fontEl.innerHTML = 'html{font-size:' + rem + 'px;}';// 给js调用的,某一dpr下rem和px之间的转换函数window.rem2px = function(v) {    v = parseFloat(v);    return v * rem;};window.px2rem = function(v) {    v = parseFloat(v);    return v / rem;};window.dpr = dpr;window.rem = rem;

 

转载于:https://www.cnblogs.com/xiaoxiao2014/p/4988838.html

你可能感兴趣的文章
[置顶] 重复造轮子:注释的使用
查看>>
DEV控件之GridControl导出到Excel
查看>>
MySQL数据库的索引类型
查看>>
javascript设计模式-迭代器模式(Iterator)
查看>>
供参考的前端网站链接
查看>>
阿里官方Java代码规范标准
查看>>
大一下半年学期总结
查看>>
Count And Say
查看>>
解决 Ubutnu16.04 + opencv4.1 源码编译错误 Makefile:160: recipe for target 'all' failed
查看>>
python矩阵
查看>>
【转】ASCII码表在线查询
查看>>
vim插件
查看>>
【转】TestFlight APP测试(IOS如何让上架前给其他人测试)
查看>>
websocket --工作原理
查看>>
xampp安装及配置
查看>>
C++中四种类型转换方式
查看>>
推荐一些国内的Jquery CDN免费服务
查看>>
【outPut_Class 输出类】使用说明
查看>>
单独使用CKfinder上传图片
查看>>
动态网站爬取实例
查看>>