移动和PC的适配
<script>
//mode 移动端的适配方式 按需 传参 目前只有两种 px和rem
(function(win, doc, mode) {
var std = 750;
if(/(iPhone|iPad|iPod|iOS|Android|Windows Phone|BlackBerry|SymbianOS)/i.test(navigator.userAgent)) {
var h = document.getElementsByTagName("head")[0];
h.insertAdjacentHTML('beforeEnd', '<meta name="apple-mobile-web-app-capable" content="yes">');
h.insertAdjacentHTML('beforeEnd', '<meta name="apple-mobile-web-app-status-bar-style" content="black">');
h.insertAdjacentHTML('beforeEnd', '<meta name="format-detection" content="telephone=no">');
h.insertAdjacentHTML('beforeEnd', '<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no,minimal-ui" />');
if(mode == 'px') {
// Px移动端速配
if (!win.addEventListener) return;
var html=document.documentElement;
function setFont()
{
function adaptVP(a){function c(){var c,d;return b.uWidth=a.uWidth?a.uWidth:750,b.dWidth=a.dWidth?a.dWidth:window.screen.width||window.screen.availWidth,b.ratio=window.devicePixelRatio?window.devicePixelRatio:1,b.userAgent=navigator.userAgent,b.bConsole=a.bConsole?a.bConsole:!1,a.mode?(b.mode=a.mode,void 0):(c=b.userAgent.match(/Android/i),c&&(b.mode="android-2.2",d=b.userAgent.match(/Android\s(\d+.\d+)/i),d&&(d=parseFloat(d[1])),2.2==d||2.3==d?b.mode="android-2.2":4.4>d?b.mode="android-dpi":d>=4.4&&(b.mode=b.dWidth>b.uWidth?"android-dpi":"android-scale")),void 0)}function d(){var e,f,g,h,c="",d=!1;switch(b.mode){case"apple":f=(window.screen.availWidth*b.ratio/b.uWidth)/b.ratio;c="width="+b.uWidth+",initial-scale="+f+",minimum-scale="+f+",maximum-scale="+f+",user-scalable=no";break;case"android-2.2":a.dWidth||(b.dWidth=2==b.ratio?720:1.5==b.ratio?480:1==b.ratio?375:.75==b.ratio?240:480),e=window.screen.width||window.screen.availWidth,375==e?b.dWidth=b.ratio*e:750>e&&(b.dWidth=e),b.mode="android-dpi",d=!0;case"android-dpi":f=160*b.uWidth/b.dWidth*b.ratio,c="target-densitydpi="+f+", width="+b.uWidth+", user-scalable=no",d&&(b.mode="android-2.2");break;case"android-scale":c="width="+b.uWidth+", user-scalable=no"}g=document.querySelector("meta[name='viewport']")||document.createElement("meta"),g.name="viewport",g.content=c,h=document.getElementsByTagName("head"),h.length>0&&h[0].appendChild(g)}function e(){var a="";for(key in b)a+=key+": "+b[key]+"; ";alert(a)}if(a){var b={uWidth:0,dWidth:0,ratio:1,mode:"apple",userAgent:null,bConsole:!1};c(),d(),b.bConsole&&e()}};adaptVP({uWidth:750});
}
win.addEventListener('resize',setFont,false)
setFont();
}
else if(mode == 'rem') {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function() {
var clientWidth = docEl.clientWidth;
if(!clientWidth) return;
docEl.style.fontSize = 100 * (clientWidth / std) + 'px';
};
if(!doc.addEventListener) return;
recalc();
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
}
}
})(window, document, 'px');
</script>
移动和PC的适配的更多相关文章
- 适配方案(二)之PC端适配
PC端 特点 PC端的屏幕具备以下特点: 屏幕大小一般是大于 13.3英寸 用户会经常拖拉浏览器的大小 原因 正是因为 PC端上的浏览器大小会经常被改变,而且改变的范围还很大,用户会全屏浏览器,用户也 ...
- pc端适配移动端
pc端和移动端共用一套代码 1. 允许网页宽度自动调整 在网页代码的头部,加入一行viewport元标签 <meta name="viewport" content=&quo ...
- 前端pc版的简单适配
我们都知道对于前端pc版本的适配是一个难题,大部分都是做的媒体查询.但是有时间公司不要媒体查询 就是需要不管多大的屏幕都是满屏显示.我就在考虑为啥不用rem给pc端做个适配. 我是基于设计图是1920 ...
- pc端常见布局样式总结(针对常见的)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- 淘宝UWP中的100个为什么
从淘宝UWP第一版发布到现在,已经有十个月了,期间收到了用户各种各样的反馈,感谢这些用户的反馈,指导我们不断的修正.完善应用.但是也有一部分需求或建议,由于资源或技术的限制,目前确实无法做到,只能对广 ...
- [UWP小白日记-8]一些零碎的东西
设置启动窗口大小 直接上代码了没什么好解释的了,既然能设置最小,那铁定就能设置最大 public MainPage() { //设定窗口启动显示大小 ApplicationView.Preferred ...
- Nginx与前端开发
Nginx与Node.js "Nginx是一款轻量级的HTTP服务器,采用事件驱动的异步非阻塞处理方式框架,这让其具有极好的IO性能,时常用于服务端的反向代理和负载均衡." 作为前 ...
- HTML5、CSS3与响应式Web设计入门(1)
HTML5与CSS3已经当仁不让的成为了这两年Web界最火爆的词,他们似乎在HTML4和CSS2统治了Web很多年之后的某一天突然爆发,然 后一直占据着所有Web开发者的视野.HTML5本身就是一个很 ...
- 【自学系列一】HTML5大前端学习路线+视频教程(完整版)
今年,本公司全新发布了囊括Java.HTML5前端.大数据.Python爬虫.全链UI设计.软件测试.Unity 3D.Go语言等多个技术方向的全套视频. 面对这么多的知识点,有的盆友就麻爪了…… 我 ...
随机推荐
- MyLayer MyScene
//MyLayer.h #include "cocos2d.h" USING_NS_CC; class MyLayer : public CCLayer { public: sta ...
- Android Fragment中调用getActivity为null的问题
在使用fragment的时候经常会遇到getActivity()为null的情况.比如我在一个异步网路请求的回调中调用了getActivity()就会出现空指针问题.之前解决这个问题,通常都是直 ...
- javascript实现自动添加文本框功能
转自:http://www.cnblogs.com/damonlan/archive/2011/08/03/2126046.html 昨天,我们公司的网络小组决定为公司做一个内部的网站,主要是为员工比 ...
- ccs元素分类 gcelaor
ccs元素的分类与特点 内联元素特点: 1.和其他元素都在一行上: 2.元素的高度.宽度及顶部和底部边距不可设置: 3.元素的宽度就是它包含的文字或图片的宽度,不可改变. inline-block 元 ...
- UVA-1347 Tour 动态规划 难以确定的状态
题目链接:https://cn.vjudge.net/problem/UVA-1347 题意 给出按x坐标排序的几个点. 欲从最左边不回头的走到最右边,然后再返回最左边. 每个点都要被访问,且只能经过 ...
- OpenJDK源码研究笔记(四)-编写和组织可复用的工具类和方法
本篇主要讲解java.util.Arrays这个针对数组的工具类. 1.可复用的工具类和方法. 这个工具类里,包含很多针对数组的工具方法,如 排序.交换.二分查找.比较.填充.复制.hashcode ...
- 题解 UVA12206 【Stammering Aliens】
终于A了这道题啊(坑啊) 教练说:这道题不能用map吧,复杂度不一个O(nlogn)吗 于是我就一直想不出来,然后看题解代码,一看就是map... 所以我就在想,那复杂度是不是也不是O(nlogn)呢 ...
- 实验二实验结论&实验总结与体会
Part1:格式化输出函数printf()和格式化输入函数scanf() ① /* <C语言程序设计教程学习指导>p118 实验内容(1) 这是一个常用格式控制符使用示例 运行程序,结合运 ...
- Inter-partition communication in multi-core processor
A multi-core processor includes logical partitions that have respective processor cores, memory area ...
- POJ——T 3020 Antenna Placement
http://poj.org/problem?id=3020 Time Limit: 1000MS Memory Limit: 65536K Total Submissions: 9844 A ...