
移动端H5开发
文章平均质量分 72
Aimee芊
沉迷于代码ing...
展开
-
node-media-server+ffmpeg搭建直播推流服务
安装准备环境:mac笔记本,直接使用brew安装;brew install ffmpeg安装成功后创建一个项目文件夹:node-media-server使用npm安装node-media-servernpm install node-media-server安装完成后,会生成node_modules文件夹和package-lock.json文件入口文件:index.jscons...原创 2019-12-20 15:28:02 · 4186 阅读 · 2 评论 -
video 字幕texttrack属性的应用
定义和用法addTextTrack() 方法创建和返回新的文本轨道。新的 TextTrack 对象会被添加到视频/音频元素的文本轨道列表中。语法audio|video.addTextTrack(kind,label,language)参数展示效果文本形式添加以文本的形式添加: <video id="video1" controls src="./video/frida...原创 2019-07-26 17:16:09 · 1452 阅读 · 0 评论 -
手动控制console.log开关
手机端查看console.log网上有很多插件,在页面中引用就可以小技巧:当页面url 有eruda=true参数时,开启(function () { var src = 'https://cdn.bootcss.com/eruda/1.5.4/eruda.min.js' if (!/eruda=true/.test(window.location) && l...原创 2019-04-04 16:45:32 · 1280 阅读 · 0 评论 -
iphone x/xr/xs/xs max 微信input输入框和吸底兼容问题
问题1、底部吸底兼容问题,iphone x/xs max/xr 会有黑条2、input 输入聚焦时候,input 框会下滑道下面,虚拟键盘会挡住input, 无法看到输入的内容3、input 输入框失去焦点时,输入框会停留到当前,需要手动去往下滑动,才能回到底部解决样式兼容head 设置shrink-to-fit=no viewport-fit=cover<meta cont...原创 2019-03-25 19:20:08 · 2684 阅读 · 0 评论 -
canvas 画圆角矩形头像合成图片
生成canvas获取屏幕比率有的手机屏幕实际分辨率的像素比页面过去的尺寸像素要大,一遍是一倍或者两倍var getPixelRatio = function(context) { var backingStore = context.backingStorePixelRatio || context.webkitBackingStorePixelRatio || ...原创 2019-02-20 15:31:53 · 2234 阅读 · 0 评论 -
搭建node 简易服务
node 简易服务安装node创建node 服务首先创建一个服务对创建的服务监听request请求node服务请求其他服务前端页面接口请求跨域安装node1、Node官网下载pkg安装包,点击安装即可,安装包包含nodejs和npm(node package manager)2、安装完成后,在命令终端输入curl http://npmjs.org/install.sh | sh3、这...原创 2019-02-28 17:57:25 · 387 阅读 · 1 评论 -
移动端自适应——vw
之前写H5移动端都是使用window.innerWidth 获取视口的宽度,计算rem来写样式; 如: 计算rem /******rem *******/(function(win){ var remCalc = {}; var docEl = win.document.documentElement, tid, hasRem = true...原创 2018-07-14 18:21:40 · 1488 阅读 · 0 评论 -
swiper轮播中嵌入video视频,安卓机兼容处理
项目中使用swiper插件嵌套video标签正常的swiper插件里面嵌套video标签,如下写法就够了,在ios 和PC端上完全没有问题,但是在安卓机上,播放视频后,视频的层级会居上,覆盖住下面的层,导致左右滑块被遮挡,并且滑动video标签也无法滑动。&lt;div class="swiper-container video-box"&gt; &lt;div class="swi...原创 2018-03-21 13:19:37 · 14567 阅读 · 7 评论 -
three.js 全景重力感应
实现three.js 全景图 demo使用three.js 写了球体和圆柱体版本的3D重力感应全景图,支持手指触摸和陀螺仪感应,也支持PC端的鼠标。给大家介绍一下基于移动端H5球体的实现方法,圆柱体类似。 设置容器和展示的样式 设置容器的宽高为全屏展示,清除body的margin,引用three.min.js(3D渲染框架) 和orienter.js (陀螺仪经纬度计算...原创 2018-02-28 18:20:29 · 6132 阅读 · 9 评论 -
自定义可存数据的jquery 表情输入框
jquery 表情输入框,可存数据库前两天优化博客的时候,想在留言评论版块插入表情输入功能,并且用户能够存入数据库,并且可以在前台读取展示,于是研究了一下表情包,解决方法如下原创 2018-01-24 16:29:36 · 1161 阅读 · 0 评论 -
折叠留言楼层,递归无线循环
今天研究了一下递归循环,展示留言评论功能。原创 2017-12-06 19:15:10 · 478 阅读 · 0 评论 -
skrollr插件 横竖屏串位的解决方法
最近开发了不少skrollr移动端H5项目,其中就遇到横竖屏会对skrollr的元素监听造成影响,页面元素为定位不准。原创 2017-12-06 17:09:30 · 910 阅读 · 0 评论 -
关于移动端H5横竖屏问题
根据项目的一些需求,经常需要横屏展示H5,但对于开启自动横竖屏的手机,横屏时转竖屏,或者竖屏转横屏时,页面布局可能会乱。通过各个手机设备的测试,主要原因是iphone手机反应比较快,而安卓机稍微慢一点,就不会出现页面布局乱的情况。于是就对iphone 手机在横竖屏旋转监听时添加延时,解决了画面乱的情况。原创 2017-09-26 16:18:55 · 4726 阅读 · 2 评论 -
H5移动端横竖屏切换监听 副作用——手机整屏状态下安卓机input 问题
上一次说过了 H5移动端横竖屏切换监听的写法。横竖屏监听代码如下,这里就不做详细说明了。原创 2017-11-24 16:19:56 · 5460 阅读 · 0 评论 -
vue.js 项目 环境搭建、打包发布(简版)
Vue 安装方法 在安装vue模块插件等前,得先安装node.js,在安装完node.js的情况下;还需安装如下模块;1.安装淘宝镜像npm install -g cnpm --registry=https://registry.npm.taobao.org2.安装webpack cnpm install webpack -g3.安装vue脚手架 cnpm inst...原创 2017-10-25 16:21:58 · 4303 阅读 · 4 评论 -
css absolute 和 float display block 的层级问题
绝对定位 和 float 的层级在写代码的无意中,对有相同的父元素的不同的两个元素同时使用了position absolute 和float 定位,造成了层级混乱。原创 2017-11-20 11:39:39 · 1550 阅读 · 1 评论 -
iphone 微信打开H5自动播放音乐问题
解决iphone 微信H5自动播放音乐问题——由于苹果的ios系统的安全保护较严格,iphone手机打开微信H5的时候(针对于已对audio标签设置 autoplay为true的H5),通常要先点击屏幕,才能触发音乐播放,经过研究,有更简便的方法可以处理。原创 2017-10-10 16:43:32 · 2632 阅读 · 1 评论 -
iphone手机屏幕开发尺寸
iphone手机屏幕尺寸移动端H5开发有必要了解一下主流手机的页面可视窗口大小,可以提前告知设计师,避免不必要的麻烦,对于手机适配也更好把控。原创 2017-09-28 16:12:47 · 995 阅读 · 0 评论