随笔分类 -  移动端 mobile

mobile_音悦台
摘要：音悦台 less 可以 width = 1080/67.5rem; /**** 变量定义 ****/ @px: 67.5rem; /**** Start ****/ #wrap { width: 100%; height: 100%; background-color: #eee; #content 阅读全文
posted @ 2018-11-26 14:56 耶梦加德 阅读(246) 评论(0) 推荐(0)
mobile_轮播图_transform 版本_transform 读写二合一
摘要：轮播图_transform 版本 关键点： 2D 变换 transform 不会改变 元素 在 文档流 中的位置 定位 position 会改变 元素 在 文档流 中的位置 语句解析太快，使用 setTimeoout(); 等待渲染 不能超过 20ms touchstart 实现 无缝滑屏： 创建两 阅读全文
posted @ 2018-11-26 11:55 耶梦加德 阅读(220) 评论(0) 推荐(0)
mobile_1 物理像素
摘要：1 物理像素 需求： border: 1px solid red; 在移动端 dpr 为 2 的屏幕上，实际上是 2 物理像素。 如何实现 1 物理像素？ 首先，肯定不能 border: 0.5px solid red; 因为 有些 PC 不支持小数 px，或者浏览器会将小数 px 取整，即变成 1 阅读全文
posted @ 2018-11-25 23:58 耶梦加德 阅读(190) 评论(0) 推荐(0)
mobile_5 种常见适配_设备兼容
摘要：em 参照本身元素的 font-size rem 参照 html 根元素 的 font-size 1. rem 适配 （同一元素，在不同设备上，效果一样） 适用情况： 当页面大于 独立像素375 时，或者页面元素很多时 原理 页面中的元素，统一 单位 rem（字体使用 px 而不使用 rem） 根元 阅读全文
posted @ 2018-11-25 18:14 耶梦加德 阅读(390) 评论(0) 推荐(0)
mobile_轮播图_style_left 版本
摘要：mobile 轮播图 小圆点逻辑（排他） 1. 统一给所有 span 元素加 class=""; 2. 切换到谁，谁的 class="active"; 移动端轮播图 <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <meta name=" 阅读全文
posted @ 2018-11-24 15:37 耶梦加德 阅读(215) 评论(0) 推荐(0)
mobile_竖向滑屏
摘要：竖向滑屏 元素最终事件 = 元素初始位置 + 手指滑动距离 移动端，"手指按下"，"手指移动" 两个事件即可（且不需要嵌套），有需要时才使用 "手指离开事件" 滑屏相关事件 给父元素绑定，是为了全屏滑动 开启定位 上滑，下滑范围限定 3 <!DOCTYPE html> <html> <head> < 阅读全文
posted @ 2018-11-24 11:58 耶梦加德 阅读(196) 评论(0) 推荐(0)
mobile_点透_传透_touch-action
摘要：点透（传透） <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> PC 的 click 事件 在移动端，会有 300 ms 的延迟。就是因为避免和手机双击行为发生冲突 点 阅读全文
posted @ 2018-11-24 09:52 耶梦加德 阅读(462) 评论(0) 推荐(0)
mobile_基础事件
摘要：DOM0 级事件模型（模拟器不支持） DOM0 级事件绑定 在 移动端有 300ms 的延迟 ontouchstart 手指按下事件 ontouchmove 手指移动事件 pntouchend 手指离开事件 DOM2 级事件模型（项目） 手指按下事件 ele.addEventListener("to 阅读全文
posted @ 2018-11-23 17:09 耶梦加德 阅读(136) 评论(0) 推荐(0)
mobile_缩放
摘要：document.documentElement.clientWidth 不包含滚动条 window.innerWidth +滚动条 window.outerWidth +浏览器边框 window.width 屏幕区域 IPhone 6 的 屏幕分辨率 为 750*1334 IPhone 6 的尺寸 阅读全文
posted @ 2018-11-23 15:33 耶梦加德 阅读(199) 评论(0) 推荐(0)
mobile_视口
摘要：document.documentElement.clientWidth 不包含滚动条 window.innerWidth +滚动条 window.outerWidth +浏览器边框 window.width 屏幕区域 IPhone 6 的 屏幕分辨率 为 750*1334 IPhone 6 的尺寸 阅读全文
posted @ 2018-11-23 10:56 耶梦加德 阅读(194) 评论(0) 推荐(0)
mobile_像素
摘要：document.documentElement.clientWidth 不包含滚动条 window.innerWidth +滚动条 window.outerWidth +浏览器边框 window.width 屏幕区域 IPhone 6 的 屏幕分辨率 为 750*1334 IPhone 6 的尺寸 阅读全文
posted @ 2018-11-23 09:46 耶梦加德 阅读(216) 评论(0) 推荐(0)