移动和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语言等多个技术方向的全套视频. 面对这么多的知识点,有的盆友就麻爪了…… 我 ...
随机推荐
- fieldset 标签 -- 对表单进行分组
转自:https://xhmaomy-163-com.iteye.com/blog/1066977 fieldset——一个不常用的HTML标签 fieldset 标签 -- 对表单进行分组 在for ...
- 1.future线程通信
#include <future> #include<iostream> #include <thread> #include <thread> #in ...
- BOOL的getter方法
在代码中经常会看到这样的属性声明 @property (nonatomic,assign,getter = isRead)BOOL read; 这行代码的意思就是,声明一个BOOL类型的read,但是 ...
- Ubuntu14.04下Mongodb官网安装部署步骤(图文详解)(博主推荐)
不多说,直接上干货! 在这篇博客里,我采用了非官网的安装步骤,来进行安装.走了弯路,同时,也是不建议.因为在大数据领域和实际生产里,还是要走正规的为好. Ubuntu14.04下Mongodb(离线安 ...
- Linux安装(虚拟机)
** 虚拟机安装CentOS系统 以下步骤会连续给出截图,大家自行校对即可. 首先打开虚拟机,出现的界面如上一篇文章截图所示. ** 配置虚拟机 步骤: 1.点击“创建新的虚拟机” 2.选择“ ...
- Microsoft Edge 针对 Web 开发人员更新日志
Windows 10 build16215 之 Edge 新功能 新功能: 增加了对高级事件监听器的支持(“once”和“passive”)via 增加了对CSS object-fit/object- ...
- 乌班图 之 设置镜像服务器 、设置屏幕分辨率QAQ
设置镜像服务器 Ubuntu 中的大部分软件安装都是用apt命令,从Ubuntu的服务器上直接安装的. 但是国外你懂的网速是硬伤,因此要搞个镜像服务器,内容当然都是一样的咯. 第一步:进入系统设置 第 ...
- 【参考】.class文件的JDK编译版本查看
使用 UltraEdit 打开 .class 文件,第一行内容: 00000000h: CA FE BA BE 00 00 00 32 00 A9 07 00 02 01 00 37 ; 漱壕... ...
- 【记录】Linux安装JDK详细步骤
Linux安装JDK步骤1. 先从网上下载jdk(jdk-1_5_0_02-linux-i586.rpm) ,推荐SUN的官方网站www.sun.com,下载后放在/home目录中,当然其它地方也行. ...
- javascript实现自动添加文本框功能
转自:http://www.cnblogs.com/damonlan/archive/2011/08/03/2126046.html 昨天,我们公司的网络小组决定为公司做一个内部的网站,主要是为员工比 ...