移动端
关注
分享
扫一扫
_双眸
GitHub：https://github.com/BothEyes1993
【所有demo地址】
1
2
展开
-
微信开发者工具集成GitHub，多人协调开发，上传拉取等
一，准备环境1，提前安装git环境和GitHub做集成，不做多解释；1，准备微信项目代码；2，创建GitHub仓库；二，创建GitHub仓库1，创建一个空的GitHub仓库，不要任何文件和不要创建任何分支，后面会从微信开发工具统一导入。（只用填个name，其他不勾选，勾选了会自己创建master分支，这里不用创建分支，如果还是勾选了，后面会讲怎么把微信本地版本分支合并到这个分支上面）2，创建完成后复制项目地址，后面有用三，微信版本工具集成GitHub1，打开微信开发工具，导入本地项目；原创 2020-09-12 17:19:28 · 2296 阅读 · 0 评论 -
移动端touch事件影响click事件以及在touchmove添加preventDefault导致页面无法滚动的解决方法
这两天自己在写一个手机网页，用到了触屏滑动的特效，就是往右滑动的时候左侧隐藏的菜单从左边划出来。做完之后在手机原生浏览器中运行正常，但在QQ和微信中打开，发现touchmove只会触发一次，而且touchend也经常不触发。之后百度了一下这个问题，原因是主要是由于200ms超时导致内核不一定会一直处理touchmove事件，一旦超时会将后续所有的事件转交给UI处理，导致touchmove不会...原创 2020-04-21 22:48:00 · 607 阅读 · 0 评论 -
requestAnimationFrame/cancelAnimationFrame——性能更好的js动画实现方式
用js来实现动画，我们一般是借助setTimeout或setInterval这两个函数，css3动画出来后，我们又可以使用css3来实现动画了，而且性能和流畅度也得到了很大的提升。但是css3动画还是有不少局限性，比如不是所有属性都能参与动画、动画缓动效果太少、无法完全控制动画过程等等。所以有的时候我们还是不得不使用setTimeout或setInterval的方式来实现动画，可是setTime...原创 2019-12-27 21:14:24 · 486 阅读 · 0 评论 -
webview的简单介绍和手写一个H5套壳的webview
1.webview是什么？作用是什么？和浏览器有什么关系？Webview 是一个基于webkit引擎，可以解析DOM 元素，展示html页面的控件，它和浏览器展示页面的原理是相同的，所以可以把它当做浏览器看待。（chrome浏览器也是基于webkit引擎开发的，Mozilla浏览器是基于Gecko引擎开发的）Android的Webview在低版本和高版本采用了不同的webkit版本内核，4.4...原创 2019-11-16 23:15:49 · 1601 阅读 · 0 评论 -
移动端网站开发要点-meta设置
<!DOCTYPE html> <!-- 使用 HTML5 doctype，不区分大小写 --><html lang="zh-cmn-Hans"> <!-- 更加标准的 lang 属性写法 http://zhi.hu/XyIa --><head> <!-- 声明文档使用的字符编码 --> <meta...原创 2019-05-22 20:14:43 · 172 阅读 · 0 评论 -
js转typescript，npm切换镜像
js转typescriptnpm i dtsmake -gnpm i tern --save-devdtsmake -s fileame.jsnpm切换镜像切换为官网：npm config set registry https://registry.npmjs.org切换为淘宝镜像npm config set registry https://registry.npm.taobao...原创 2019-04-30 14:35:07 · 696 阅读 · 0 评论 -
使用模块化工具打包自己开发的JS库(webpack/rollup)对比总结
打包JS库demo项目地址：https://github.com/BothEyes1993/bes-jstools背景最近有个需求，需要为小程序写一个SDK，监控小程序的后台接口调用和页面报错(类似fundebug)听起来高大上的SDK，其实就是一个JS文件，类似平时开发中我们引入的第三方库:const moment = require('moment');moment().format...原创 2019-04-30 14:04:43 · 966 阅读 · 0 评论 -
Iphone各个型号机型的详细参数，尺寸和dpr以及像素
1.iPhone尺寸规格2.单位inch（英吋）1 inch = 2.54cm = 25.4mm3.iPhone手机宽高上表中的宽高（width/height）为手机的物理尺寸，包括显示屏和边框。以下为iPhone4s的宽高示意图：4.屏幕尺寸我们通常所说的iPhone5屏幕尺寸为4英寸、iPhone6屏幕尺寸为4.7英寸，指的是显示屏对角线的长度（diagonal）。以下为i...原创 2018-12-12 01:05:01 · 40907 阅读 · 0 评论 -
H5前端的关于像素解释
场景：人物：前端实习生「阿树」与 切图工程师「玉凤」事件：设计师出设计稿，前端实现页面玉凤：树，设计稿发给你啦，差那么点像素，就叼死你┏( ￣へ￣)=☞阿树：(>_<)毛问题噶啦~阿树：哇靠，为啥你给的设计稿是640px宽 ，iPhone 5不是320px宽吗？？？玉凤：A pixel is not a pixel is not a pixel, you know ?阿树...原创 2018-12-12 00:50:57 · 923 阅读 · 0 评论 -
从Pc转向H5开发遇到的适配问题思考
1.首先说滚动条移动端开发在不设置任何适配和viewport宽度的情况下，以iphone5为例：屏幕界面的逻辑分辨率是320x568，在谷歌浏览器的界面下屏幕的可视宽度是980px（谷歌设置的，每个浏览器宽度不一样）,所以界面如果是980可以横向铺满全屏：如果超过980就会出现滚动条.比如界面宽度是1200：所以屏幕出现滚动条很大可能是 viewport设置不对或者未配置这个属性（滚动...原创 2018-12-12 00:44:02 · 501 阅读 · 0 评论 -
Safari无痕模式下，storage被禁用问题
前言Safari开启无痕模式后，localStorage和sessionStorage为空，对其进行set操作也会报错，也就是说这种情况下，storage是被禁止使用了。接下来说一下解决方法。解决方案我们项目框架上的解决方法是对storage进行一层封装，遇到这种开启无痕模式的情况，会定义一个window的全局变量，把之前准备存放到storage的内容改为存到这个全局变量中。注意，无痕模式...原创 2018-12-17 22:38:48 · 606 阅读 · 0 评论 -
滴滴开源 Vue 组件库— cube-ui
cube-ui 是滴滴去年底开源的一款基于 Vue.js 2.0 的移动端组件库，主要核心目标是做到体验极致、灵活性强、易扩展以及提供良好的周边生态—后编译。自 17 年 11 月开源至今已有 5 个月，在这个过程中 cube-ui 受到了不少的关注，同时从社区中也收到了很多很好的反馈和建议。我们也一直在迭代更新，从最初的 1.0 版本到最近发布的 1.7 的版本，除了对原有组件做一些增强优化，...原创 2018-12-11 23:46:30 · 1799 阅读 · 0 评论 -
解决vue移动端适配问题
1，先看看网上关于移动端适配讲解再聊移动端页面适配，rem和vw适配方案！基础点：rem相对根节点字体的大小。所以不用px;根字体：字体的大小px;px：你就当成cm(厘米)这样的东西吧；基准：750设计稿；这是方案的基础理论，在这个基础上，我们还要搞明白，到底要干一件什么事情！目标一 、手机适配：就是页面上的尺寸，无论高度，还是宽度，还有字体，随屏幕的宽度变化！这里是屏幕宽度！是不...原创 2018-12-11 23:32:00 · 5241 阅读 · 2 评论 -
Chrome 声音自动播放抱错问题【play() failed】
Chrome下调用play后抱错：DOMException: play() failed because the user didn’t interact with the document first.声音无法自动播放这个在IOS/Android上面一直是个惯例，桌面版的Safari在2017年的11版本也宣布禁掉带有声音的多媒体自动播放功能，紧接着在2018年4月份发布的Chrome 66也...原创 2018-12-06 18:30:09 · 8860 阅读 · 0 评论 -
window.open在Safari中不能打开的问题
在调移动支付问题的时候遇到过，用window.open打开一个微信支付链接，唤醒移动支付，在IOS下死活唤醒不了，是js代码冲突问题…是click事件IOS下不兼容问题…最后定位到window.open语句，之后改为window.loaction.href，奇迹般的可以唤醒支付，因此，也就很直观的证明了在Safari下用window.open是有问题的原因：大部分现代的浏览器（Chrome/F...原创 2018-12-06 18:26:43 · 4466 阅读 · 0 评论 -
移动前端开发之viewport,devicePixelRatio的深入理解
移动前端开发之viewport的深入理解在移动设备上进行网页的重构或开发，首先得搞明白的就是移动设备上的viewport了，只有明白了viewport的概念以及弄清楚了跟viewport有关的meta标签的使用，才能更好地让我们的网页适配或响应各种不同分辨率的移动设备。一、viewport的概念通俗的讲，移动设备上的viewport就是设备的屏幕上能用来显示我们的网页的那一块区域，在具体一点...原创 2018-12-12 14:39:10 · 723 阅读 · 0 评论