随笔分类 -  移动端

移动端的无缝轮播图片
摘要：第1步：在head部分设置meta，设置html字体大小，以及阻止pc和浏览器默认行为 第2步：设置布局 第3步：设置css 第四步：js部分 所用的四张图片如下： · 阅读全文
posted @ 2019-06-25 22:18 落叶无痕~ 阅读(634) 评论(0) 推荐(1)
vue的h5开发中，将页面保存为图片
摘要：需求：长按页面保存到手机 实现方式： 将页面保存为图片，然后再当前页面实际上展示的是一张图片， 利用移动端自带的功能（长按图片可以保存到手机）来实现这个需求 代码： 1、使用 html2canvas npm install html2canvas -d 2、 阅读全文
posted @ 2019-06-17 16:36 落叶无痕~ 阅读(6506) 评论(0) 推荐(0)
禁止移动端点击图片出现预览的默认行为
摘要：在移动端开发中，某些设备会存在点击img标签， 图片呈现预览模式，但是我们没有给图片添加任何事件 这是移动端浏览器的默认行为，解决方式如下： 1、在img标签上添加 onclick="return false" 2、图片用背景图的方式插入 3、使用js事件阻止默认行为 另外可以用css方式解决： i 阅读全文
posted @ 2019-06-17 15:08 落叶无痕~ 阅读(2174) 评论(0) 推荐(0)
移动端事件
摘要：注意：在移动端开发的时候，浏览器的模拟器时好时坏，一般不用on的方式绑定事件函数，要用事件绑定的方式 问题1：PC端的事件比移动端的事件略慢，大概在300ms左右， 所以一般用touchend，不用mouseup 问题2：移动端的点透 当上层元素发生点击的时候，下层元素也有点击（焦点）特性， 在30 阅读全文
posted @ 2019-06-06 17:46 落叶无痕~ 阅读(154) 评论(0) 推荐(0)
移动端基础
摘要：1、视口：width可视区的宽度（number || device-width） viewport 视口（可视区窗口） 默认不设置viewport，一般可视区宽度在移动端是980 2、是否允许用户缩放（yes || no） IOS10无效，使用事件来解决 3、初始缩放比例，最小缩放比例，最大缩放比例 阅读全文
posted @ 2019-06-04 16:00 落叶无痕~ 阅读(176) 评论(0) 推荐(0)
聊天输入框，自适应高度（最大4行）
摘要：1 2 3 6 7 8 9 export default{ 10 data () { 11 return { 12 rows: 1, // 当前行数 13 basisPoints: 30 // 基点高度，每次增加30px 14 ... 阅读全文
posted @ 2019-05-21 10:55 落叶无痕~ 阅读(857) 评论(0) 推荐(0)
rem适配还原设计稿，换算
摘要：假设设计妹妹给我们的设计稿尺寸为 750 * 1500 。结合网易移动端首页html元素上的动态font-size属性、设计稿尺寸、前端与设计之间协作流程一般分为下面两种： 1、网易做法 引入：页面开头出引入下面这段代码，用于动态计算font-size 使用： 未引入前： body { width: 阅读全文
posted @ 2019-05-18 09:27 落叶无痕~ 阅读(2438) 评论(1) 推荐(0)