常用的meta属性设置
HTML
<meta name="screen-orientation" content="portrait"> //Android 禁止屏幕旋转
<meta name="full-screen" content="yes"> //全屏显示
<meta name="browsermode" content="application"> //UC应用模式，使用了application这种应用模式后，页面讲默认全屏，禁止长按菜单，禁止收拾，标准排版，以及强制图片显示。
<meta name="x5-orientation" content="portrait"> //QQ强制竖屏
<meta name="x5-fullscreen" content="true"> //QQ强制全屏
<meta name="x5-page-mode" content="app"> //QQ应用模式
CSS
清除输入框内阴影-ios
div { -webkit-appearance: none; }
如何禁止保存或拷贝图像
img { -webkit-touch-callout: none; }
android系统中元素被点击时产生边框
a,button,input,textarea {
-webkit-tap-highlight-color: rgba(0,0,0,0)
-webkit-user-modify:read-write-plaintext-only; }
iOS 滑动不流畅
- 在滚动容器上增加滚动 touch 方法
.wrapper { -webkit-overflow-scrolling: touch; }
- 设置 overflow 设置外部 overflow 为 hidden,设置内容元素 overflow 为 auto。内部元素超出 body 即产生滚动，超出的部分 body 隐藏。
body { overflow-y: hidden; } .wrapper { overflow-y: auto; }
JS
iOS 上拉边界下拉出现空白
document.body.addEventListener( 'touchmove', function(e) {
if (e._isScroller) return // 阻止默认事件
e.preventDefault()
}, { passive: false } )
ios 日期转换 NAN 的问题
'yyyy-MM-dd'.replace(/-/g, '/')
软键盘问题
可以通过监听移动端软键盘弹起
window.addEventListener('resize', function() {
if (
document.activeElement.tagName === 'INPUT' ||
document.activeElement.tagName === 'TEXTAREA'
) {
window.setTimeout(function() {
if ('scrollIntoView' in document.activeElement) {
document.activeElement.scrollIntoView(false)
} else {
document.activeElement.scrollIntoViewIfNeeded(false)
}
}, 0)
}
})
IOS 键盘收起时页面没用回落，底部会留白
通过监听键盘回落时间滚动到原来的位置
window.addEventListener('focusout', function() {
window.scrollTo(0, 0)
})
input输入框弹起软键盘的解决方案。
var bfscrolltop = document.body.scrollTop
$('input')
.focus(function() {
document.body.scrollTop = document.body.scrollHeight
//console.log(document.body.scrollTop);
})
.blur(function() {
document.body.scrollTop = bfscrolltop
//console.log(document.body.scrollTop);
})
IOS 下 fixed 失效的原因： 软键盘唤起后，页面的 fixed 元素将失效，变成了 absolute，所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。
方案：禁止页面滚动， 而是让主体部分自己滚动,主体部分高度设为 100%，overflow:scroll
<body>
<div class='warper'>
<div class='main'></div>
<div>
<div class="fix-bottom"></div>
</body>
CSS
.warper {
position: absolute;
width: 100%;
left: 0;
right: 0;
top: 0;
bottom: 0;
overflow-y: scroll;
-webkit-overflow-scrolling: touch; /* 解决ios滑动不流畅问题 */
}
.fix-bottom {
position: fixed;
bottom: 0;
width: 100%;
}
节流和防抖
节流：是函数在一段时间内的多次调用，仅第一次有效
防抖：函数在一段时间内的多次调用，仅使得最后一次调用有效
节流（throttle）：
时间戳方法：
function throttle(func, delay) {
var last = 0;
return function () {
var now = Date.now();
if (now >= delay + last) {
func.apply(this, arguments);
last = now;
} else {
console.log("距离上次调用的时间差不满足要求哦");
}
}
}
定时器：
function throttle(func, delay) {
var timer = null;
return function () {
if (!timer) {
func.apply(this, arguments);
timer = setTimeout(() => {
timer = null;
}, delay);
} else {
console.log("上一个定时器尚未完成");
}
}
}
防抖（debounce）
function debounce(func, delay) {
var timeout;
return function() {
clearTimeout(timeout);
timeout = setTimeout(()=>{
func.apply(this, arguments);
}, delay);
}
}
