CamilleZJ的博客

support-webp.tsexport default new Promise(resolve => { const image = new Image(); image.onerror = () => resolve(false); image.onload = () => resolve(image.width === 1); image.src = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASo

<a href="https://www.xinshouzhanzhang.com/" target="_blank">跳转到一个新页面</a>没有rel=“noopener noreferrer”的情况下使用target=“_blank”是有安全风险，超链接a标签的rel="noopener noreferrer"属性是一种新特性，它能让网站更安全，超链接添加rel="noopener noreferrer"来防止钓鱼网站，因为它获取的window.opener的值为null.

骨架屏是页面的一个空白版本，通常会在页面完全渲染之前，通过一些灰色的区块大致勾勒出轮廓，待数据加载完成后，再替换成真实的内容。

h5 video标签：Video 对象属性属性 描述 audioTracks 返回表示可用音频轨道的 AudioTrackList 对象。 autoplay   * 设置或返回是否在就绪（加载完成）后随即播放视频。 buffered 返回表示视频已缓冲部分的 TimeRanges 对象。 controller    返回表示视频当前媒体控制...

流程：输入框获取焦点，软键盘弹起可能遇到问题： 在 Android 和 IOS 上，获知软键盘弹起和收起状态存在差异，且页面 webview 表现不同。 在IOS12 上，微信版本 v6.7.4 及以上，输入框获取焦点，键盘弹起，页面（webview）整体往上滚动，当键盘收起后，不回到原位，导致键盘原来所在位置是空白的。 在 IOS 上，使用第三方输入法，高度计算存在偏差，导致在有些输入法弹起，将输入框挡住一部分。 在有些浏览器上使用一些操作技巧，还是存在输入框被输入

最近做一个移动端H5活动，页面中含有拖拽功能，因此包含了touchstart、touchmove、touchend相关事件，其中preventDefault();方法使页面出现无法上滑滚动。总结：页面不能滑动无非就是css和js两个方面的问题有的人说如果我写很多个p标签不写任何样式看能不能滑动，如果能滑动说明是样式的原因，要是也不能滑动那就应该是js的原因，是有一定的道理的，但是先别忘了看...

最近做一个项目，其中包含了页面上拖拽排序功能，使用了jquery ui中的拖拽功能。jQuery UI draggable引入jquery-ui.min.js结构：<div class="wear-medals-list-con"> <ul class="wear-medals-list" style="width: 114px;"> ...