常见问题2

禁止页面缓存

<meta http-equiv='Cache-control' content='no-cache'>

禁止字母大写

1 .ios 输入框输入文本的时候会默认开启首字母大写

<input autocapitalize='off' autocorrect='off' />

safari 使用的配置

<link rel="apple-touch-icon" sizes="76x76" href="pig.jpg">
//保存到桌面时添加的图片

<link rel="apple-touch-startup-image" href="pig.jpg" media="(device-width: 375px)">
//添加页面启动占位图

:active 有效，:hover 无效

1 .有些元素的:active可能会无效，而元素的hover在点击后却一直处于点击状态，需要点击其他位置才能解除点击状态。给body注册一个touchstart事件可以将两种状态反转
2 .这种情况到时没见过。

监听屏幕旋转

/* 竖屏 */
@media all and (orientation: portrait) {
    /* 自定义样式 */
}
/* 横屏 */
@media all and (orientation: landscape) {
    /* 自定义样式 */
}

禁止滚动传播

1 .移动端浏览器当页面包含多个滚动区域时，滚完一个区域后若还存在滚动动量则会将剩余动量传播到下一个滚动区域，造成别的区域也滚动起来

.ele{
  overscroll-behavior:contain
}

2 .这个也没见过

禁止屏幕抖动

1 .某些突然出现滚动条的页面，可能会出现左右抖动。出现的滚动条也要占一些宽度，从而影响原来的布局。
2 .这种直接加padding就可以了，其实主要是padding-right

禁止长按操作

1 .禁止长按呼出菜单 -webkit-touch-callout
2 .禁止用户长按操作或者选择复制 user-select:none

input,textarea{
user-select:auto
}

禁止字体调整

1 .旋转屏幕可能会改变字体大小，声明text-size-adjust:100% 可以让字体大小保持不变
2 .之前还以为是font-size的问题，然后就把那个给关掉了
3 .

禁止动画闪屏

1 .在移动设备上添加动画，多数情况会出现闪屏，给动画元素的父元素构造一个3d环境就能让动画稳定运行

.elem {
    perspective: 1000;
    backface-visibility: hidden;
    transform-style: preserve-3d;
}

美化表单外观

1 .关掉元素样式 apperence:none

对齐输入框

1 .桌面端浏览器只需要line-height等于height就能解决，但是移动端浏览器需要line-height:normal

点击无效

1 .ios有些情况下，非点击元素监听click事件可能会无效，针对该情况只需要对不触发click事件的元素生命cursor:pointer 就能解决

识别文本换行

1 .white-space:pre-line
2 .返回的数据里面包含\n,
标签的时候

滑动穿透

1 .除了弹窗内容能点击或者滚动，其他内容都不能点击或滚动

支持往返刷新

1 .移动端浏览器点击‘前进按钮’或者‘后退按钮’，不会执行旧页面的js代码。这与往返缓存有关系。
2 .往返缓存 指浏览器为了页面执行期间后退操作时能有更流畅体验的一种策略，当用户前往新页面的时候，将旧页面的dom 保存在BFCache里面，当用户返回旧页面将旧页面的DOM状态从BFCache里取出并加载。
3 .pageShow 事件会在页面每次加载都触发，这就是他和load事件的差别，pageShow事件的暴露的persisted可以判断页面你是否从BFCache里取出

ios解析时间有问题

1 .年月日必须使用/衔接而不能使用-衔接 ，所以 YYYY-MM-DD HH:mm:ss 这种格式就不行，需要替换

const date = "2019-03-31 21:30:00";
new Date(date.replace(/\-/g, "/"));

高度坍塌

1 .同时出现以下三个条件的时候，键盘会把页面高度压缩一部分。当输入完成键盘占位消失之后，页面高度无法回到原来的高度。就是输入框失去焦点之后页面没有回弹

1 .页面高度太小，少于一屏幕
2 .输入框在页面底部或者视图中下方
3 .输入框聚焦输入文本

2 .解决方法。保持前后滚动条偏移量一致就不会出现上述问题。聚焦的时候获取输入框的滚动偏移量，输入焦点的时候再设置一下这个值，就可以

let scrollTop=0
input.addEvebtListener('focus,()=>{
scrollTop=document.scrollingElement.scrollTop})

input.addEventListener('blur',()=>{
document.scrollingElement.scrollTo(0,scrollTop)})

修复键盘监听

1 .苹果系统中，keyup,keydown,keypress事件可能会失效，当输入框监听keyup事件时，逐个输入英文和数字会有效，但是逐个输入中文不会有效，需要按回车键才有效
2 .使用input事件代替输入框的keyup,keyDown,keypress事件

简化回到顶部

const gotopBtn = document.getElementById("gotop-btn");
openBtn.addEventListener("click", () => document.body.scrollIntoView({ behavior: "smooth" }));

图片懒加载

<img data-src="pig.jpg">
<!-- 很多<img> -->
//在图片上随便绑定一个属性，当做图片的地址

const imgs = document.querySelectorAll("img.lazyload");
const observer = new IntersectionObserver(nodes => {
    nodes.forEach(v => {
        if (v.isIntersecting) { // 判断是否进入可视区域
            v.target.src = v.target.dataset.src; // 赋值加载图片
            observer.unobserve(v.target); // 停止监听已加载的图片
        }
    });
});
imgs.forEach(v => observer.observe(v));
//可以封装成一个组件
//还包括出现在页面内，但是未显示的元素，也要懒加载，比如一个tab组件里面的每一个panel元素

音乐自动播放

1 .微信内置浏览器，必须监听到sdk加载完毕才能触发播放代码，来保障webview正常渲染。

doucment.addEventListener('WeixinJSBridgeReady,()=>{
//可以开始播放音乐了
})