移动端开发多设备适配
2015-09-24 16:21
351 查看
一、移动端多设备适配
参考了手机淘宝:
针对安卓所有设备,devicePixelRatio(简称dpr),统一当作“1”处理,即一倍屏;然后viewport的宽度就等于device-width,但是淘宝的做法是没有对viewport的width做明确指定,仅指定了scale值;因为浏览器实际上会根据scale来设置viewport的宽度;
针对ios,则存在2倍,3倍屏;
最终就是根据dpr来确定html根元素的字体大小,所有元素的宽高以rem单位来展示;
这里有一个基准值,就是设计稿的尺寸,比如设计稿是640*960,则这个基准值是64;具体可参考这篇文章:http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041
另外一个注意事项是,页面初始化是需要指定一个viewport(淘宝是可以动态创建)
本文出自 “Qing's web” 博客,请务必保留此出处http://qings.blog.51cto.com/4857138/1697891
参考了手机淘宝:
针对安卓所有设备,devicePixelRatio(简称dpr),统一当作“1”处理,即一倍屏;然后viewport的宽度就等于device-width,但是淘宝的做法是没有对viewport的width做明确指定,仅指定了scale值;因为浏览器实际上会根据scale来设置viewport的宽度;
针对ios,则存在2倍,3倍屏;
最终就是根据dpr来确定html根元素的字体大小,所有元素的宽高以rem单位来展示;
这里有一个基准值,就是设计稿的尺寸,比如设计稿是640*960,则这个基准值是64;具体可参考这篇文章:http://www.html-js.com/article/Mobile-terminal-H5-mobile-terminal-HD-multi-screen-adaptation-scheme%203041
;(function(){ var win = window, doc = document, docEl = doc.documentElement; var ios = win.navigator.appVersion.match(/iPhone/i), dpr = win.devicePixelRatio || 1, finalDpr = dpr; //仅针对iPhone做倍屏处理,即其它平台dpr=1; if(!ios){ finalDpr = 1; } var scale = 1 / finalDpr; var metaEl = doc.querySelector('meta[name="viewport"]'); metaEl.setAttribute('content', 'initial-scale=' + scale + ',maximum-scale=' + scale + ', minimum-scale=' + scale + ',user-scalable=0'); docEl.setAttribute('data-dpr', finalDpr); var width = docEl.getBoundingClientRect().width; //针对安卓屏幕宽度超过设计稿尺寸时,限制最宽为640,也就是说rem最大为64px; if(width / finalDpr > 640){ width = 640 * finalDpr; } docEl.style.fontSize = width / 10 + 'px'; })()
另外一个注意事项是,页面初始化是需要指定一个viewport(淘宝是可以动态创建)
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
本文出自 “Qing's web” 博客,请务必保留此出处http://qings.blog.51cto.com/4857138/1697891
相关文章推荐
- Android虚拟机器学习总结Dalvik虚拟机创建进程和线程分析
- Android5.0之CardView使用教程
- Android 图片二次采样、质量压缩
- Android 编程下的代码混淆proguard
- iOS学习笔记(二)
- android ORM框架LitePal 封装SQLite
- TabHost的一点注意事项
- MPAndroidChart的使用
- Android事件的传递机制
- 推荐几本介绍Android Studio开发的好书
- iOS扫描二维码的实现
- iOS图片的多选择,删除,和本地显示
- 获取android 设备的cpu gpu信息 mac地址
- iOS多线程学习---线程同步
- 介绍一种android的裸刷机方法(fastboot刷机实质)
- 浅谈Android中的“Context”以及“上下文”和“环境”的思考
- 适配ios6,ios7等注意问题
- Unity 加密解密那些事(转载)
- Unity3d开发(三)GameObject 作函数参数
- QT的元对象系统(Meta-Object System)