<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的适配的更多相关文章

  1. 适配方案(二)之PC端适配

    PC端 特点 PC端的屏幕具备以下特点: 屏幕大小一般是大于 13.3英寸 用户会经常拖拉浏览器的大小 原因 正是因为 PC端上的浏览器大小会经常被改变,而且改变的范围还很大,用户会全屏浏览器,用户也 ...

  2. pc端适配移动端

    pc端和移动端共用一套代码 1. 允许网页宽度自动调整 在网页代码的头部,加入一行viewport元标签 <meta name="viewport" content=&quo ...

  3. 前端pc版的简单适配

    我们都知道对于前端pc版本的适配是一个难题,大部分都是做的媒体查询.但是有时间公司不要媒体查询 就是需要不管多大的屏幕都是满屏显示.我就在考虑为啥不用rem给pc端做个适配. 我是基于设计图是1920 ...

  4. pc端常见布局样式总结(针对常见的)

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  5. 淘宝UWP中的100个为什么

    从淘宝UWP第一版发布到现在,已经有十个月了,期间收到了用户各种各样的反馈,感谢这些用户的反馈,指导我们不断的修正.完善应用.但是也有一部分需求或建议,由于资源或技术的限制,目前确实无法做到,只能对广 ...

  6. [UWP小白日记-8]一些零碎的东西

    设置启动窗口大小 直接上代码了没什么好解释的了,既然能设置最小,那铁定就能设置最大 public MainPage() { //设定窗口启动显示大小 ApplicationView.Preferred ...

  7. Nginx与前端开发

    Nginx与Node.js "Nginx是一款轻量级的HTTP服务器,采用事件驱动的异步非阻塞处理方式框架,这让其具有极好的IO性能,时常用于服务端的反向代理和负载均衡." 作为前 ...

  8. HTML5、CSS3与响应式Web设计入门(1)

    HTML5与CSS3已经当仁不让的成为了这两年Web界最火爆的词,他们似乎在HTML4和CSS2统治了Web很多年之后的某一天突然爆发,然 后一直占据着所有Web开发者的视野.HTML5本身就是一个很 ...

  9. 【自学系列一】HTML5大前端学习路线+视频教程(完整版)

    今年,本公司全新发布了囊括Java.HTML5前端.大数据.Python爬虫.全链UI设计.软件测试.Unity 3D.Go语言等多个技术方向的全套视频. 面对这么多的知识点,有的盆友就麻爪了…… 我 ...

随机推荐

  1. asp.net 连接字符串的多种写法

    一.使用OleDbConnection对象连接OLE DB数据源 1.连接Access 数据库 Access 2000: “provider=Microsoft.Jet.Oledb.3.5;Data ...

  2. 洛谷P2766 最长不下降子序列问题 网络流_DP

    Code: #include<cstdio> #include<iostream> #include<vector> #include<algorithm&g ...

  3. 路飞学城Python-Day10(practise)

    作业:现要求你写一个简单的员工信息增删该查程序,需求如下:当然此表在文件存储时可以这样表示1,Alex Li,22,13651054608,IT,2013-04-012,Jack Wang,28,13 ...

  4. document.body

    比如document.body,最好是写成document.getElementsByTagName("body")[0];

  5. nginx访问日志access_log

    在 nginx.conf 配置文件 http{} 方法体的括号内,增加或者打开以下代码注释: log_format main '$remote_addr - $remote_user [$time_l ...

  6. Msql免安装版安装

     文首提要:             我下载的MySQL版本是:mysql-5.7.17-winx64.zip  Archive版:系统:Windows7 64位. 一.解压文件 下载好MySQL后, ...

  7. VB创建文件夹

    If Dir("D:\Program Files\AutoCAD 2006\Express\", vbDirectory) = "" Then '判断文件夹是否 ...

  8. python登录注册改良版

    #在执行本脚本的时候,需要先注册,否则会报字符串不匹配sum=3while True: #如果条件为真,则一直循环 print("先注册,在登录") print("1.注 ...

  9. Java Class文件结构

    此文件格式为JAVA7的格式,可能与JAVA6 CLASS不一致. 每一个Class都对应着唯一的一个类或借口的定义信息.这里,我们称为"Class文件格式"只是通俗的将任意一个符 ...

  10. PHP 变量作用域

    以下为 PHP 中的各种变量在底层实现中是如何存储的. 变量: $temp = 'temp'; $temp2 = $temp; // key p *executor_globals.symbol_ta ...