js-YDUI 移动端解决方案
/**
* YDUI 可伸缩布局方案
* rem计算方式:设计图尺寸px / 100 = 实际rem 例: 100px = 1rem
*/
!function (window) { /* 设计图文档宽度 */
var docWidth = 750; var doc = window.document,
docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize'; var recalc = (function refreshRem () {
var clientWidth = docEl.getBoundingClientRect().width;
//getBoundingClientRect(); 这个方法返回一个矩形对象,包含四个属性:left、top、right和bottom。分别表示元素各边与页面上边和左边的距离。 /* 8.55:小于320px不再缩小,11.2:大于420px不再放大 */
docEl.style.fontSize = Math.max(Math.min(20 * (clientWidth / docWidth), 11.2), 8.55) * 5 + 'px'; return refreshRem;
})(); /* 添加倍屏标识,安卓倍屏为1 */
docEl.setAttribute('data-dpr', window.navigator.appVersion.match(/iphone/gi) ? window.devicePixelRatio : 1); if (/iP(hone|od|ad)/.test(window.navigator.userAgent)) {
/* 添加IOS标识 */
doc.documentElement.classList.add('ios');
/* IOS8以上给html添加hairline样式,以便特殊处理 */
if (parseInt(window.navigator.appVersion.match(/OS (\d+)_(\d+)_?(\d+)?/)[1], 10) >= 8)
doc.documentElement.classList.add('hairline');
} if (!doc.addEventListener) return;
window.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false); }(window);
js-YDUI 移动端解决方案的更多相关文章
- 基于VUE.JS的移动端框架Mint UI
Mint UI GitHub:github.com/ElemeFE/mint 项目主页:mint-ui.github.io/# Demo:elemefe.github.io/mint- 文档:mint ...
- JS构建多端应用
JS构建多端应用 一,需求与介绍 1.1,介绍 1,Taro 是一套遵循 React语法规范的 多端开发 解决方案.现如今市面上端的形态多种多样,Web.React-Native.微信小程序等各种端大 ...
- 从Hybrid到React-Native: JS在移动端的南征北战史
注:因为不了解Dart,所以本文不对flutter相关内容进行阐述, 实在抱歉 Hybrid Hybird是一种混合开发应用,可以实现JS和Java代码的互通,单纯使用ios/android原生实现, ...
- Phonegap 之 iOS银联在线支付(js调用ios端银联支付控件)
Phonegap项目,做支付的时候,当把网站打包到ios或android端成app后,在app上通过wap调用银联在线存在一个问题: 就是当从银联支付成功后,再从服务器返回到app客户端就很难实现. ...
- js 判断pc端或手机端
<script> (function () { var navUA = navigator.userAgent; var defIncludeStr = "iPhone|Andr ...
- js判断移动端是否安装某款app的多种方法
本文实例讲解了js判断移动端是否安装某款app的多种方法,分享给大家供大家参考,具体内容如下 第一种方法: 一:判断是那种设备 ? || u.indexOf(; //android终端或者uc浏览器 ...
- JS读取client端的文件的代码片段
JS读取client端的文件内容的代码片段 if(window.FileReader){ var html5file = this.pipeDetailFileUpLoader._files[0]; ...
- Vue 爬坑之路(十一)—— 基于 Nuxt.js 实现服务端渲染(SSR)
直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 ...
- angularJS 路由加载js controller 未定义 解决方案
说明 本文主要说明,在angularJS框架使用中,angularJS 路由加载js controller 未定义 解决方案. 路由 $routeProvider 异步加载js 路由的基本用法,请查看 ...
- js实现移动端图片预览:手势缩放, 手势拖动,双击放大...
.katex { display: block; text-align: center; white-space: nowrap; } .katex-display > .katex > ...
随机推荐
- Ural 1303 Minimal Coverage(贪心)
题目地址:Ural 1303 先按每一个线段的左端点排序,然后设置一个起点s.每次都从起点小于等于s的线段中找到一个右端点最大的. 并将该右端点作为新的起点s,然后继续找. 从左到右扫描一遍就可以. ...
- nodeJs学习路线
转载自:http://blog.fens.me/nodejs-roadmap/ 前言 用Nodejs已经1年有余,陆陆续续写了48篇关于Nodejs的博客文章,用过的包有上百个. 和全部人一样,我也从 ...
- Dubbo源代码分析(三):Dubbo之服务端(Service)
如上图所看到的的Dubbo的暴露服务的过程,不难看出它也和消费者端非常像,也须要一个像reference的对象来维护service关联的全部对象及其属性.这里的reference就是provider. ...
- 小贝_php+redis类型组合使用
php_redis类型组合使用 一.类型组合说明 经过前面的文章介绍.已经知道redis有字符串.集合.列表.hash等内置数据类型. 这里以,无序集合为例,进行说明. 集合 set1的简图 1.从简 ...
- 使用Spring Boot Actuator、Jolokia和Grafana实现准实时监控--转
原文地址:http://mp.weixin.qq.com/s?__biz=MzAxODcyNjEzNQ==&mid=2247483789&idx=1&sn=ae11f04780 ...
- 用json2.js 代替 json.js防止与jQuery的js冲突
用json2.js 代替 json.js防止与jQuery的js冲突 1 s.toJSONString json.js:259 2 Object.toJSONString json.js:158 3 ...
- 如何解决SQL Server 2008 无法连接到(local)
打开SQL SERVER配置管理-->SQL SERVER 网络配置-->实例名的协议 将SQLEXPRESS协议中的Named Pipes和 TCP/IP启用. 点击SQL Se ...
- 微信小程序官方文档中的加密算法
用Nodejs来算一下:
- selenium+python 安装使用
一.序言 selenium官网selenium简单教程selenium完整教程python基础教程 二.安装python3 https://www.python.org/downloads/relea ...
- EditPlus 使用技巧以及快捷键
一边阅读,一边动手吧! 为了达到更好的效果,请你先下载我打包的这个 EditPlus压缩包文件(压缩包文件为绿色的EditPlus2.31英文版,含自动完成文件,高亮语法文件和剪切板代码片断文件,这些 ...