Viewport
<!-- 让页面宽度等于设备宽度，缩放比例为1，禁止用户缩放网页 --> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no"> <!-- 针对一些不识别viewport的浏览器，如黑莓 --> <meta name="HandheldFriendly" content="true"> <!-- 针对微软的老式浏览器 --> <meta name="MobileOptimized" content="320">调用系统功能
<!-- 拨号 --> <a href="tel:10086">打电话给: 10086</a> <!-- 短信 --> <a href="sms:10086">发短信给: 10086</a> <!-- 邮件 --> <a href="mailto:839626987@qq.com">发邮件给：839626987@qq.com</a> <!-- 选择照片或者拍摄照片 --> <input type="file" accept="image/*"> <!-- 选择视频或者拍摄视频 --> <input type="file" accept="video/*"> <!-- 多选 --> <input type="file" multiple>清除浏览器缓存
<meta http-equiv="pragma" content="no-cache"> <meta http-equiv="cache-control" content="no-cache"> <meta http-equiv="expires" content="0">** 软键盘弹出数字键盘(用户只能输入数字)**
<!-- 有#、*符号输入 --> <input type='tel'> <input type="number" pattern="\d*">** 禁止用户长按选中、复制文本**
.text { user-select: none; -webkit-user-select: none; -moz-user-select: none; -khtml-user-select: none }改变输入框placeholder的颜色值
::-webkit-input-placeholder { /* WebKit browsers */ color: #999; } :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #999; } ::-moz-placeholder { /* Mozilla Firefox 19+ */ color: #999; } :-ms-input-placeholder { /* Internet Explorer 10+ */ color: #999; } input:focus::-webkit-input-placeholder{ color:#999; }多行文本超出显示省略号
/* 超出n行时显示省略号 */ .hide-text-n { overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: n; -webkit-box-orient: vertical }单元素的默认样式
input, button, select, textarea { border: none; outline: none; appearance: none; -webkit-appearance: none; -m自定义滚动条样式
::-webkit-scrollbar /* 滚动条整体部分 */ ::-webkit-scrollbar-thumb /* 滚动条内的小方块 */ ::-webkit-scrollbar-track /* 滚动条轨道 */ ::-webkit-scrollbar-button /* 滚动条轨道两端按钮 */ ::-webkit-scrollbar-track-piece /* 滚动条中间部分，内置轨道 */ ::-webkit-scrollbar-corner /* 边角，两个滚动条交汇处 */ ::-webkit-resizer /* 两个滚动条的交汇处上用于通过拖动调整元素大小的小控件 */::-webkit-scrollbar修改浏览器滚动条样式，div::-webkit-scrollbar修改某个节点的滚动条样式
** Android上去掉语音输入按钮**
input::-webkit-input-speech-button { display: none }监听屏幕旋转事件并且处理样式
/* 竖屏时样式 */ @media all and (orientation:portrait) { body::after { content: '竖屏' } } /* 横屏时样式 */ @media all and (orientation:landscape) { body::after { content: '横屏' } }Flexbox兼容写法
.box { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex } .box-1 { -webkit-box-flex: 1.0; -moz-flex: 1; -webkit-flex: 1; flex: 1 } .box-column { -webkit-box-orient: vertical; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column } .box-row-center { -webkit-box-pack: center; -moz-justify-content: center; -webkit-justify-content: center; justify-content: center } .box-column-center { -webkit-box-align: center; -moz-align-items: center; -webkit-align-items: center; align-items: center } .box-center { -webkit-box-pack: center; -moz-justify-content: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -moz-align-items: center; -webkit-align-items: center; align-items: center } .box-between { -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between } .box-around { -webkit-box-pack: justify; -webkit-justify-content: space-around; -ms-flex-pack: justify; justify-content: space-around }Scroll-X html
<div class="scroll-x"> <div class="scroll-item"></div> * n </div>css
.scroll-x { display: flex; width: auto; overflow-x: auto; -webkit-overflow-scrolling: touch; height: 55px; padding: 15px; } .scroll-item { width: 55px; flex-shrink: 0; margin-right: 10px; background-color: blueviolet; }Javascript项
1浏览器滚动到底部，加载数据
function isBottom () { var { offset = 20, callback = null } = options ? options : {}; $(document).on('scroll', function () { var top = parseInt($(document).scrollTop()); top >= ($(document).height() - $(window).height() - offset) ? callback && callback() : false }) } isBottom({ callback: function () { if (!loading) { // your code } } })offset为偏移量，距离底部还有多少时执行回调
2获取设备类型
function getUserAngent () { var ua = window.navigator.userAgent; return { isWechat: ua.toLowerCase().match(/MicroMessenger/i) == 'micromessenger', isAndriod: ua.indexOf('Android') > -1 || ua.indexOf('Linux') > -1, isIphone: ua.indexOf('iPhone') > -1 || ua.indexOf('iPad') > -1, isPc: !/Android|webOS|iPhone|iPod|BlackBerry/i.test(ua), isQQ: ua.match(/QQ\//i) == "QQ/" } }isQQ返回是否是手机QQ内置浏览器，而不是QQ浏览器
3监听页面可见性变化
document.addEventListener('visibilitychange', function () { var hidden = document.hidden; if (hidden) { // 当前窗口失去焦点 } else { // 当前窗口得到焦点 } });页面最小化、切换标签、切换应用
4 Apple设备zepto/jquery事件委托bug
$(document).on('click', '.btn', function () { console.log(this) }).btn为div标签，不管是异步添加的还是同步添加的.div，在Iphone上都无法触发该事件，但是Android、PC却可以，上网找了一下资料，解决办法有两种：
1.给.btn加个css属性cursor: pointer; 2.换成a或者button标签;
5 禁止页面滚动
var roller = { handle(e) { e.preventDefault() }, lockRoll() { document.addEventListener("touchmove", handle, false) }, cureRoll() { document.removeEventListener("touchmove", handle, false) } }一般用于弹出蒙层(mask)之后禁止，消失就恢复
6 监听屏幕旋转事件
window.addEventListener('onorientationchange', callback, false); function callback () { let orientation = window.orientation; if(orientation == 0 || orientation == 180) { // 竖屏 } else { // 横屏 } }7 重力感应
window.addEventListener('deviceorientation', callback, false); function callback (e) { var data = e.accelerationIncludingGravity; console.log(data) // 这里有你想要的数据 }8 事件穿透 点击穿透问题：点击蒙层(mask)上的关闭按钮，蒙层消失后发现触发了按钮下面元素的click事件，解决办法:
1 只用touch 2 只用click 3 touch延迟350ms再隐藏蒙层(mask)
屏幕旋转的事件和样式
//JS处理 function orientInit(){ var orientChk = document.documentElement.clientWidth > document.documentElement.clientHeight?'landscape':'portrait'; if(orientChk =='lapdscape'){ //这里是横屏下需要执行的事件 }else{ //这里是竖屏下需要执行的事件 } } orientInit(); window.addEventListener('onorientationchange' in window?'orientationchange':'resize', function(){ setTimeout(orientInit, 100); },false) //CSS处理 //竖屏时样式 @media all and (orientation:portrait){ } //横屏时样式 @media all and (orientation:landscape){ }audio元素和video元素在ios和andriod中无法自动播放
//音频，写法一 <audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio> //音频，写法二 <audio controls="controls"> <source src="music/bg.ogg" type="audio/ogg"></source> <source src="music/bg.mp3" type="audio/mpeg"></source> 优先播放音乐bg.ogg，不支持在播放bg.mp3 </audio> //JS绑定自动播放（操作window时，播放音乐） $(window).one('touchstart', function(){ music.play(); }) //微信下兼容处理 document.addEventListener("WeixinJSBridgeReady", function () { music.play(); }, false); //小结 //1.audio元素的autoplay属性在IOS及Android上无法使用，在PC端正常 //2.audio元素没有设置controls时，在IOS及Android会占据空间大小，而在PC端Chrome是不会占据任何空间重力感应事件
// 运用HTML5的deviceMotion，调用重力感应事件 if(window.DeviceMotionEvent){ document.addEventListener('devicemotion', deviceMotionHandler, false) } var speed = 30; var x = y = z = lastX = lastY = lastZ = 0; function deviceMotionHandler(eventData){ var acceleration = event.accelerationIncludingGravity; x = acceleration.x; y = acceleration.y; z = acceleration.z; if(Math.abs(x-lastX)>speed || Math.abs(y-lastY)>speed || Math.abs(z-lastZ)>speed ){ //这里是摇动后要执行的方法 yaoAfter(); } lastX = x; lastY = y; lastZ = z; } function yaoAfter(){ //do something }定位的坑
//fixed定位 //1.ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位 //2.android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位 //3.ios4下不支持position:fixed //解决方案：使用[Iscroll](http://cubiq.org/iscroll-5)，如： <div id="wrapper"> <ul> <li></li> ..... </ul> </div> <script src="iscroll.js"></script> <script> var myscroll; function loaded(){ myscroll=new iScroll("wrapper"); } window.addEventListener("DOMContentLoaded",loaded,false); </script> //position定位 //Android下弹出软键盘弹出时，影响absolute元素定位 //解决方案: var ua = navigator.userAgent.indexOf('Android'); if(ua>-1){ $('.ipt').on('focus', function(){ $('.css').css({'visibility':'hidden'}) }).on('blur', function(){ $('.css').css({'visibility':'visible'}) }) }JS判断设备
function deviceType(){ var ua = navigator.userAgent; var agent = ["Android", "iPhone", "SymbianOS", "Windows Phone", "iPad", "iPod"]; for(var i=0; i<len,len = agent.length; i++){ if(ua.indexOf(agent[i])>0){ break; } } } deviceType(); window.addEventListener('resize', function(){ deviceType(); })JS判断微信浏览器
function isWeixin(){ var ua = navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i)=='micromessenger'){ return true; }else{ return false; } }消除transition闪屏
.css { -webkit-transform-style: preserve-3d; -webkit-backface-visibility: hidden; -webkit-perspective: 1000; }H5页面rem兼容适配
$(document).ready(function(){ //rem兼容 var winW = $(window).width(); var constant = winW/6.4;(10.8/7.5) $("html,body").css("font-size",constant); $(window).resize(function(){ var winW = $(window).width(); var constant = winW/10.8; $("html,body").css("font-size",constant); }) }) //使用时有可能造成div等容器过大。 //div中放入img时，让div的宽高自适应，此时会造成容器的宽高可能会大于img的宽高. //解决：容器添加 font-size:0 ,然后div中的内容使用rem div { font-size:0; } div img { width:1rem; } div p { font-size:0.5rem; }美化表单元素
//一、使用appearance改变webkit浏览器的默认外观 input,select { -webkit-appearance:none; appearance: none; } //二、winphone下，使用伪元素改变表单元素默认外观 //1.禁用select默认箭头，::-ms-expand修改表单控件下拉箭头，设置隐藏并使用背景图片来修饰 select::-ms-expand { display:none; } //2.禁用radio和checkbox默认样式，::-ms-check修改表单复选框或单选框默认图标，设置隐藏并使用背景图片来修饰 input[type=radio]::-ms-check, input[type=checkbox]::-ms-check { display:none; } //3.禁用pc端表单输入框默认清除按钮，::-ms-clear修改清除按钮，设置隐藏并使用背景图片来修饰 input[type=text]::-ms-clear, input[type=tel]::-ms-clear, input[type=number]::-ms-clear { display:none; }移动端touch事件（区分webkit和winphone）
/* 当用户手指放在移动设备在屏幕上滑动会触发的touch事件 */ // 以下支持webkit touchstart——当手指触碰屏幕时候发生。不管当前有多少只手指 touchmove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动 touchend——当手指离开屏幕时触发 touchcancel——系统停止跟踪触摸时候会触发。例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用 //TouchEvent说明： touches：屏幕上所有手指的信息 targetTouches：手指在目标区域的手指信息 changedTouches：最近一次触发该事件的手指信息 touchend时，touches与targetTouches信息会被删除，changedTouches保存的最后一次的信息，最好用于计算手指信息 //参数信息(changedTouches[0]) clientX、clientY在显示区的坐标 target：当前元素 //事件响应顺序 ontouchstart > ontouchmove > ontouchend > onclick // 以下支持winphone 8 MSPointerDown——当手指触碰屏幕时候发生。不管当前有多少只手指 MSPointerMove——当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，会调用css的html{-ms-touch-action: none;}可以阻止默认情况的发生：阻止页面滚动 MSPointerUp——当手指离开屏幕时触发H5页面窗口自动调整到设备宽度，并禁止用户缩放页面
//一、HTML页面结构 <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" /> // width 设置viewport宽度，为一个正整数，或字符串‘device-width’ // height 设置viewport高度，一般设置了宽度，会自动解析出高度，可以不用设置 // initial-scale 默认缩放比例，为一个数字，可以带小数 // minimum-scale 允许用户最小缩放比例，为一个数字，可以带小数 // maximum-scale 允许用户最大缩放比例，为一个数字，可以带小数 // user-scalable 是否允许手动缩放 //二、JS动态判断 var phoneWidth = parseInt(window.screen.width); var phoneScale = phoneWidth/640; var ua = navigator.userAgent; if (/Android (\d+\.\d+)/.test(ua)){ var version = parseFloat(RegExp.$1); if(version>2.3){ document.write('<meta name="viewport" content="width=640, minimum-scale = '+phoneScale+', maximum-scale = '+phoneScale+', target-densitydpi=device-dpi">'); }else{ document.write('<meta name="viewport" content="width=640, target-densitydpi=device-dpi">'); } } else { document.write('<meta name="viewport" content="width=640, user-scalable=no, target-densitydpi=device-dpi">'); }库
zepto-移动端的Jqueryswiper-轮播图clipboard.js-复制剪贴板qrcode.js-动态生成二维码