简述下移动端使用gif, 透明背景视频, 动画的问题

先阐述下写这篇文章的起因 项目是再app内置浏览器中嵌入的一个 H5 页面,需求中有一个动画的效果,比较简单的动画,而且动画背景透明 下面来说说这个需求的坎坷经历 1. 第一个想到的应该就是让 UI 小姐姐做一个动态图啦,于是 UI 小姐姐也做了,但遇到了几个问题 - 动态图片太大,快接近我的整个项 ... »

Android系统下用js自定义gesture事件(仿ios实现移动端事件一致)

一、手势事件 在ios系统中,系统自带了gesture事件,两个手指操作的时候,就会产生一下三种手势事件: gesturestart:当一个手指已经按在屏幕上,另一个手指又触摸屏幕的时候触发。gesturechange:当触摸屏幕的任何一个手指的位置发生变化的时候触发。 gestureend:当任何 ... »

【移动端web】软键盘兼容问题

这周几天遇到了好几个关于web移动端兼容性的问题。并花了很长时间去研究如何处理这几种兼容问题。 这次我们来说说关于移动端软键盘的js处理吧。 一般情况下,前端是无法监控软键盘到底是弹出来还是关闭的。能使用的一般是输入框获取焦点事件(focus)与输入框失去焦点事件(blur)。 ios设备下,点击输 ... »

Android软键盘弹出,覆盖h5页面输入框问题

之前我们在使用vue进行 h5 表单录入的过程中,遇到了Android软键盘弹出,覆盖 h5页面 输入框 问题,在此进行回顾并分享给大家: 系统:Android 条件:当输入框在可视区底部或者偏下的位置 触发条件:输入框获取焦点,弹出软键盘 表现:软键盘 覆盖 h5页面中的输入框 问题分析: 1.发 ... »

详解vue移动端 下拉刷新

看完这篇文章,相信大伙也一样可以,做出一个自己的刷新,加载的组件 说这个功能之前,大家要先了解一下,要怎么触发滚动条事件。 一定要注意,所有滚动事件都必须要满足这个条件,横向滚动条也一样, 只要满足子元素宽度大于父元素宽度就可以了。(下篇文章会讲怎么实现一个横向滚动条) 接入正题!!! 先来看看怎么 ... »

原生js移动端滑动事件

移动端触屏滑动的效果其实就是图片轮播,在PC的页面上很好实现,绑定click和mouseover等事件来完成。但是在移动设备上,要实现这种轮播的效果,就需要用到核心的touch事件。处理touch事件能跟踪到屏幕滑动的每根手指。 以下是四种touch事件 touchstart: //手指放到屏幕上时 ... »

移动端中的陀螺仪

前面的话 本文将详细介绍移动端中的陀螺仪的概念及相关实现 横竖屏 window下的orientation属性来表示移动端的横竖屏状态,chrome模拟器不支持该属性,只能在真机上测试 按照上右下左的顺序,该属性的结果分别是0、90、180、-90 [注意]手机头朝下的切换没有实现 window下的o ... »

移动端事件点透问题

在移动WEB开发中,有时候可能会出现点透问题,本随笔将围绕这个TAP点透问题,详细的讲述以下几点: 到底什么是点透?为什么会出现点透?如何避免出现点透?如果不可避免的出现了,如何解决解决点透问题?(我说的是移动端,不是pc端) 1、什么是点透? 以下情况,在B元素上有半透明灰色遮盖层A,黄色B元素内 ... »

从flexible.js引入高德地图谈起的移动端适配

曾几何时,前端还仅仅是PC端的。随着移动时代的兴起,h5及css3的推陈出新。前端的领域慢慢的由传统的pc端转入了移动端,这也导致了前端这一职业在风口的一段时间出尽了风头。 从开始的惶恐和无从下手,慢慢的到了有了统一的技术方案去落地实现。 从手写不同尺寸的媒体查询css到以手淘的flexible.j ... »

移动端 滑动删除 swipeDelete

功能比较简单常见,最近整理一下做备份记录。先看看线上 整体实际效果 下面是swipeDelete 用法 demo 默认参数 dom 节点如下 支持2种结构 A li 元素运动 transform: translateX(2px); 滑动元素和删除元素 父子 节点关系 B con 元素运动 trans ... »

移动web开发之touch事件

前面的话 iOS版Safari为了向开发人员传达一些特殊信息,新增了一些专有事件。因为iOS设备既没有鼠标也没有键盘,所以在为移动Safari开发交互性网页时,常规的鼠标和键盘事件根本不够用。随着Android 中的WebKit的加入,很多这样的专有事件变成了事实标准,导致W3C开始制定Touch ... »

用CSS开启硬件加速来提高网站性能

1. 何为硬件加速 就是将浏览器的渲染过程交给GPU处理,而不是使用自带的比较慢的渲染器。这样就可以使得animation与transition更加顺畅。 我们可以在浏览器中用css开启硬件加速,使GPU (Graphics Processing Unit) 发挥功能,从而提升性能 现在大多数电脑的 ... »

H5开发中的故障

本篇博文会不断的收录我在做H5页面时遇到的问题以及解决方案,当然有的问题,我也没有遇到好的解决方案,所以如果你有解决的办法,请务必不吝赐教! H5开发中的故障       微信APP返回按钮不刷新页面    & ... »

移动端九宫格抽奖源码

最近做了一个移动端九宫格抽奖页面。拿出来给大家分享一下。 页面布局HTML <div id="jiangping"></div><div id="lottery"> <table border="0" cellpadding="0" cellspacing="0"> <tr> <td class=" ... »

HTMLCSS实现左侧固定宽度右侧内容可滚动

在做移动端页面的时候,经常会碰到一个div中分左右两个div,左侧div固定宽度或百分比,右侧div中内容左右溢出,需要左右滑动才可以浏览到全部内容,为此写了一个demo。 处理这个问题的核心关键点是右侧div需要设置固定宽度或者百分比,然后设置它的overflow为auto或者scroll。一般移 ... »

移动端经常出现的兼容问题

移动端 经常出现的兼容问题 1.安卓浏览器看背景图片,有些设备会模糊 因为手机分辨率太小,如果按照分辨率来显示网页,字会非常小,安卓手机devicePixoRadio比较乱,有1.5的,有2的也有3的。想让图片在手机里显示更为清晰,必须使用2x的背景图来代替img标签(一般情况下都是2倍的),或者指 ... »

移动端

移动端开发 我们现在关注的点还在移动M站上,或者我们可以叫做webapp,其实就是运行在移动端浏览器中的web网站 app:application应用程序。手机软件:主要指安装在智能手机上的软件,完善原始系统的不足与个性化。 移动端开发是与PC端肯定是有很大不同的,所以我们需要学习如何在移动设备上开 ... »

基于SwiperJs的H5/移动端下拉刷新上拉加载更多的效果

最早时,公司的H5项目中曾用过点击一个“加载更多”的DOM元素来实现分页的功能,后来又用过网上有人写的一个上拉加载更多的插件,那个插件是页面将要滚动到底部时就自动请求数据并插入到页面的后边,其实这样也是可以的,不过在我们的负责人看了之前的效果后提出的要求是希望页面滚动到底部时先暂时不加载更多的数据,... ... »