Chendi Wu

Appearance

IOS ​

滑动不流畅 ​

在滚动容器上增加滚动 touch 方法

css
.wrapper {
  -webkit-overflow-scrolling: touch;
}

上拉边界下拉出现空白 ​

javascript
document.body.addEventListener(
  'touchmove',
  function (e) {
    if (e._isScroller) return
    // 阻止默认事件
    e.preventDefault()
  },
  {
    passive: false,
  }
)

在点击输入框，出现键盘后，弹出层被顶上去，而光标还停留在原处，即出现错位情况 ​

Input/textarea ​

javascript
$('input.van-field__control, textarea.van-field__control').blur(function () {
  setTimeout(function () {
    var currentPosition = document.documentElement.scrollTop || document.body.scrollTop
    window.scrollTo(0, currentPosition) //页面向上滚动
  }, 200)
})

多个Input/textarea ​

javascript
$(function () {
  var setTimerTop = 0
  $(document)
    .on('blur', 'input.van-field__control, textarea.van-field__control', function () {
      event.preventDefault()
      setTimerTop = setTimeout(function () {
        window.scrollBy(0, 5) // 页面向上滚动
        window.scrollBy(0, -5)
      }, 500)
    })
    .on('focus', 'input.van-field__control, textarea.van-field__control', function () {
      clearTimeout(setTimerTop)
    })
})

iframe情况 ​

javascript
$(function () {
  var setTimerTop = 0
  $(document)
    .on('blur', 'input.van-field__control, textarea.van-field__control', function () {
      event.preventDefault()
      setTimerTop = setTimeout(function () {
        parent.scrollBy(0, 5) // 页面向上滚动
        parent.scrollBy(0, -5)
        $('#hide-area-cb').focus()
      }, 500)
    })
    .on('focus', 'input.van-field__control, textarea.van-field__control', function () {
      clearTimeout(setTimerTop)
    })
    .on('focus', 'input.van-field__control[disabled]', function () {
      setTimerTop = setTimeout(function () {
        parent.scrollBy(0, 5) // 页面向上滚动
        parent.scrollBy(0, -5)
      }, 500)
    })
})

日期转换 NAN 的问题 ​

iOS 解析 YYYY-MM-DD HH:mm:ss 这种日期格式会报错 Invalid Date，Android 无问题 查看开发手册发现可用：YYYY/MM/DD HH:mm:ss，那么需替换其中的 - 为 /

javascript
const date = '2021-02-05 10:39:00'
console.log(new Date(date.replace(/\-/g, '/')))

fixed 失效的原因 ​

软键盘唤起后，页面的 fixed 元素将失效，变成了 absolute，所以当页面超过一屏且滚动时，失效的 fixed 元素就会跟随滚动了。不仅限于 type=text 的输入框，凡是软键盘（比如时间日期选择、select 选择等等）被唤起，都会遇到同样地问题。 解决方法：不让页面滚动，而是让主体部分自己滚动,主体部分高度设为 100%，overflow: scroll;

html
<div class="warper">
  <div class="main"></div>
  <div>
    <div class="bottom"></div>
  </div>
</div>
css
.warper {
  position: absolute;
  width: 100%;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
}

.bottom {
  position: fixed;
  bottom: 0;
  width: 100%;
}

移动端fixed布局 ​

  • ios6下，不固定，滑动会突然跳动
  • 输入框在弹出键盘后，不吸附在键盘上方
  • fixed的元素宽度不能自适应，在ios6下横竖屏切换的过程中
  • iframe下，fixed元素高度超大

iOS 闪屏问题 ​

如果保留height:100%  那么就添加 overflow:auto

去掉当前页面的height:100%

body{
    -webkit-tap-highlight-color:rgba(0,0,0,0);
}

Android ​

如果视频没有播放的情况，双击进度条快进会吧整个video播放不了的情况出现，导致出现该问题的原因暂时不知什么原因引起 ​

解决方法：添加一个蒙层，点击蒙层就播放视频，短暂的处理方案 vue 完整代码如下：

vue
<template>
  <div class="video_box">
    <div class="cover" @click.stop.prevent="play" v-if="!played"></div>
    <video
      :src="src"
      :poster="poster"
      :id="`videoElement${index}`"
      controls
      playsinline
      webkit-playsinline
      webkit-inline
      x5-video-player-type="h5-page"
      x5-video-player-fullscreen="true"
      x-webkit-airplay="allow"
      x5-video-orientation="portraint"
    />
  </div>
</template>

<script>
export default {
  props: {
    src: {
      type: String,
      default: '',
    },
    poster: {
      type: String,
      default: '',
    },
    index: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      played: false,
    }
  },
  methods: {
    play() {
      document.getElementById(`videoElement${this.index}`).play()
      this.played = true
    },
  },
}
</script>

<style lang="scss" scoped>
.video_box {
  position: relative;
  width: 100%;
  height: 194px;
  .cover {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    z-index: 1000;
  }
  video {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
  }
}
</style>

video 属性返回 Infinity ​

解决参考：https://stackoverflow.com/questions/38443084/how-can-i-add-predefined-length-to-audio-recorded-from-mediarecorder-in-chrome

javascript
;<video
  controlslist='nodownload'
  playsinline=''
  webkit-playsinline=''
  x5-video-player-type='h5-page'
  x-webkit-airplay='true'
  autoplay='autoplay'
  controls='controls'
  preload='auto'
  style='width: 100%;height: auto;'
  src=''
></video>

var player = document.querySelector('video')
window.onload = function () {
  // 获取总时长
  player.addEventListener('durationchange', (event) => {
    console.log(player.duration)
    // Infinity
  })
  // 监听缓存进度
  player.addEventListener('progress', (event) => {
    let bufvalue = player.buffered.end(player.buffered.length - 1)
    console.log(parseInt(bufvalue))
    // Infinity
  })
}

前端 video 直播场景时，对延迟比较高要求（电商秒杀等场景）的可以通过监控 progress 来达到效果 ​

注意：设置currentTime为最新的播放时长要控制好频率与快进时长，要不然会导致一直loading加载新的TS片段

javascript
var player = document.querySelector("video");
var videoCanskip = 0;
player.addEventListener("progress", function (event) {
  // 返回表示音频/视频已缓冲部分的 TimeRanges 对象。
  var startBuffered = player.buffered.start(0);
  var endBuffered = player.buffered.end(0);
  videoCanskip = parseInt(endBuffered - startBuffered);
  console.log("video_可快进时长" + Math.ceil(videoCanskip));
}

// 设置currentTime 值 来播放最新内容
player.currentTime = videoCanskip;

QuotaExceededError异常 ​

sentry 平台收集到一个意外的error，错误信息为 QuotaExceededError。 错误分析才知道，原来当超过可用配额时，IndexedDB 和缓存 API 都会抛出名为 QuotaExceededError 的 DOMError。 localStorage 预留5MB左右的储存空间（这个是大概固定的值） IndexedDB 的配额是动态计算的，可能浏览器实现各不相同，但可用存储量通常取决于设备上可用的存储量（随着手机内存的不断减少，webview 的配额也会减少，具体多少可以导致 IndexedDB 是不可用，没有大量的测试数据来验证。但是测试出现问题的时候，手机内存在700以下就会出现这个问题，但是在其他的安卓设备这个值又是500以下，所以这个复现存储值不可靠）

我们可以规避掉这个风险，先检查有多少可用存储，如下：

javascript
if (navigator.storage && navigator.storage.estimate) {
  const quota = await navigator.storage.estimate()
  // quota.usage -> 已用字节数。
  // quota.quota -> 最大可用字节数。
  const percentageUsed = (quota.usage / quota.quota) * 100
  console.log(`您已使用可用存储的 ${percentageUsed}%。`)
  const remaining = quota.quota - quota.usage
  console.log(`您最多可以再写入 ${remaining} 个字节。`)
}

https://web.dev/storage-for-the-web/#indexeddb-2 StorageManager：https://developer.mozilla.org/zh-CN/docs/Web/API/StorageManager

for-in ​

javascript
let obj = {
  a: 1,
  b: 2,
}

Object.prototype.c = function () {
  console.log('c')
}

// 需要注意的是，for...in 循环会遍历对象自身及其原型链上可枚举的属性。
// 在这个例子中，我们将方法 c 添加到了 Object.prototype 上，因此它被认为是一个可枚举属性，可以被 for...in 循环遍历到。
// 如果我们使用 Object.defineProperty 方法定义属性，并将其 enumerable 设置为 false，那么该属性将不会被 for...in 循环遍历到。
for (const key in obj) {
  console.log(key)
}
// a
// b
// c

// 属性描述符
const desc = Object.getOwnPropertyDescriptor(Object.prototype, 'hasOwnProperty')
console.log(desc)

// 使用 Object.defineProperty 方法定义属性
// 明确设置 enumerable 属性为 false，
// 避免在 for...in 循环中被遍历到
Object.defineProperty(Object.prototype, 'd', {
  value: function () {
    console.log('d')
  },
  writable: true,
  enumerable: false,
  configurable: true,
})

// 使用 hasOwnProperty 方法判断属性是否为对象自身属性
// 避免循环到原型链上的属性
for (const key in obj) {
  if (obj.hasOwnProperty(key)) {
    console.log(key)
  }
}

writing....

Layout Switch

Adjust the layout style of VitePress to adapt to different reading needs and screens.

Expand all
The sidebar and content area occupy the entire width of the screen.
Expand sidebar with adjustable values
Expand sidebar width and add a new slider for user to choose and customize their desired width of the maximum width of sidebar can go, but the content area width will remain the same.
Expand all with adjustable values
Expand sidebar width and add a new slider for user to choose and customize their desired width of the maximum width of sidebar can go, but the content area width will remain the same.
Original width
The original layout width of VitePress

Page Layout Max Width

Adjust the exact value of the page width of VitePress layout to adapt to different reading needs and screens.

Adjust the maximum width of the page layout
A ranged slider for user to choose and customize their desired width of the maximum width of the page layout can go.

Content Layout Max Width

Adjust the exact value of the document content width of VitePress layout to adapt to different reading needs and screens.

Adjust the maximum width of the content layout
A ranged slider for user to choose and customize their desired width of the maximum width of the content layout can go.

Spotlight

Highlight the line where the mouse is currently hovering in the content to optimize for users who may have reading and focusing difficulties.

ONOn
Turn on Spotlight.
OFFOff
Turn off Spotlight.