屏幕大小改变或首次加载计算html根元素 fontsize
2016-04-12 17:13
405 查看
/** * @file 文件的描述 * @author Y50 <yujun.li@partner.midea.com.cn> * @copyright * @license Released under the Commercial license. * @since 1.0.1 * @version 1.0.1 - 2015-9-8 */ (function (doc, win) { 'use strict'; var devicePixelRatio = win.devicePixelRatio, viewport = document.createElement('meta'); viewport.name='viewport'; document.getElementsByTagName('head')[0].appendChild(viewport); //让屏幕按照真实的像素进行渲染 此时1px=1dip 独立像素=实际像素 //viewport.content='initial-scale='+1/devicePixelRatio+', maximum-scale='+1/devicePixelRatio+', minimum-scale='+1/devicePixelRatio+', user-scalable=no'; if (devicePixelRatio === 2) { viewport.content='initial-scale=0.5, maximum-scale=0.5, minimum-scale=0.5, user-scalable=no'; } else if (devicePixelRatio === 3) { viewport.content='initial-scale=0.3333333333, maximum-scale=0.3333333333, minimum-scale=0.3333333333, user-scalable=no'; } else { viewport.content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no'; } 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; //屏幕方向改变或者屏幕大小重新调整后换算 html根元素fontsize 分别对应手机 和 PC win.addEventListener(resizeEvt, recalc, false); //加载页面结束后换算文档根元素的fontsize doc.addEventListener('DOMContentLoaded', recalc, false); })(document, window);
相关文章推荐
- HTML学习之表格表单及框架介绍
- Html标签中thead、tbody、tfoot的作用
- HTML学习之网页制作基础和常用标签及标签属性
- HTML 5 应用程序缓存
- HTML 5 Web 存储
- HTML 5 Canvas vs. SVG
- HTML 5 Canvas
- HTML 5 拖放
- HTML 5 音频
- HTML 5 Video + DOM
- R Markdown生成动态分析报告(.html)
- HTML 5 视频
- HTML 5 简介
- html总结
- 标记语言总结
- MVC中的Html.ActionLink的介绍 ---转
- MVC通过扩展HtmlHelper实现CheckBoxList
- 制作手机浏览器显示格式的HTML页面
- HTML学习笔记
- 【html】:学习html的见解