随笔分类 - webApp
摘要：移动web最佳viewport设置 <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no"> 单行文本溢出 .inaline{ overflow:hidden; white-space:n
阅读全文
摘要：苹果: 在设置-通用-清空缓存 安卓的，可以用这个网址来清除缓存 https://debugx5.qq.com/ 有更好的方法求小伙伴推荐。。
阅读全文
摘要：video视频是通过编辑器在后台上传的，上传视频时编辑器要求必须传入视频的宽高，而且必须是数字，不能是百分比 实在太不智能了，传具体数字怎么适配各种型号的设备呢？？？ 在前台显示视频的时候，所有的video标签都有设置好的width和height属性 我首先移除了视频设置的宽高属性 $(functi
阅读全文
摘要：JavaScript性能优化 DOM操作优化 查找DOM元素能用id就用id，是最高效的查找方法（还得看具体环境） document.getElementById('slider') 从document开始查找子元素效率不高，建议从具体父元素开始查找 减少元素查找的层级 var sliderItem
阅读全文
摘要：CSS性能优化 CSS选择器优化 如果可以直接选中元素，不需要加一些多余的修饰 /*不要使用类选择器和ID选择器修饰元素标签，这样多此一举，还会降低效率。*/ div#slider.slider { } 一般来说，class用于样式，id用于js，因为id定义的样式不利于复用 保证不会误选的情况下，
阅读全文
摘要：HTML性能优化 查看淘宝移动端的做法： css全部使用内联，js有内联，也有引入外部文件 查看京东移动端的做法： css和js都是既有内联，既有引入外部文件 内联的优点： 减少HTTP请求 内联的缺点： 1、没法复用 2、是HTML变大，加载变慢 3、不利于复用（可以用工程化手段解决，维护源码，上
阅读全文
摘要：先准备个测试模板 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>
阅读全文
摘要：单行文字溢出省略： 给容器添加css样式： .text-ellipsis{ overflow:hidden; text-overflow: ellipsis; white-space: nowrap; } <!DOCTYPE html> <html lang="en"> <head> <meta c
阅读全文
摘要：根本原因：double click 双击 移动端默认双击情况下会有方法效果，当你点击一次之后，移动端无法判断你是否下一次还会继续完成双击，因此存在300 ms 延迟 有一部分浏览器，比如chrome浏览器，当你在meta头设置width=device-width时，它会自动禁止300 ms的延迟 推
阅读全文
摘要：h5 浏览器兼容性问题： 浏览器兼容性情况可以在这个网站查询 https://caniuse.com/ 绿色代表完全支持，黄色代表部分支持，红色代表不支持 右上角的黄色小短杠表示要加一些厂商前缀 兼容性测试： <!DOCTYPE html> <html lang="en"> <head> <meta
阅读全文
摘要：在控制台-机型-点击小三角-选择edit 有更多机型可以选择 选择具体的机型之后，dpr是不能更改的。选择responsive可以更改机型 如果没有看到dpr就去右边小点点那里找到并打开 真机调试： 浏览器上的调试工具只是模拟行为，最后还是需要在真机上查看测试 可以用一些集成环境搭建服务器，然后上传
阅读全文
摘要：移动端事件有哪些： 触摸事件 手势事件 传感器事件 （后面两个兼容性不怎么样，因此重点就是触摸事件） 触摸事件： touch 事件 pointer 事件 （PC端可能会使用jQuery做动画，移动端一般不会，基本都是使用css3做动画） ontouchstart （必须在元素内部才能触发） onto
阅读全文
摘要：前提：父容器设置了display:flex 或 inline-flex order 项目的排列顺序 默认是0，数字越小，排在越前面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport"
阅读全文
摘要：box-sizing 在pc端一般使用默认值 content-box 在移动端一般使用 border-box <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="w
阅读全文
摘要：物理像素=设备像素 css像素=逻辑像素=设备独立像素=实际开发中使用的像素 .box{ width:200px; height:100px; } 设备像素比 dpr = 设备像素 / css像素 （缩放比为1的情况） dpr 描述的是单方向，因此当dpr=2，意味着一个css像素由2x2个物理像素
阅读全文
