移动端H5 demo

用H5和js写一个移动端自定义播放器

前言由于html5自带的播放器样式不怎么好看,大多数人都是自己写一个来满足业务需求.这一次的需求如下: 1.不要上一曲下一曲 2.有进度条和播放暂停按钮 3.有时间显示 demo实现功能 1.进度条滚动 2.时间显示 3.播放控制 4.多平台播放关键代码展示 <body> <div class="top"></div> <div id="containner"> <div style="width:

移动端H5页面高清多屏适配方案

背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更多的是iphone6的375×667). 2)对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:

解惑好文：移动端H5页面高清多屏适配方案 (转)

转自:http://mobile.51cto.com/web-484304.htm https://github.com/amfe/lib-flexible/blob/master/src/makegrid.js https://segmentfault.com/a/1190000006839117 对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:原先的375×667,就会变成750×1334).

[转]:移动端H5页面高清多屏适配方案

原文链接:http://www.tuicool.com/articles/YJviea 背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更多的是iphone6的375×667). 2)对于retina屏幕(如: dpr=2),为了达到高清效果

教你如何用 lib-flexible 实现移动端H5页面适配

前话好久没写教程了(可能会误导新手的菜鸟教程(￣▽￣)"). 这是我的github,欢迎前端大大们和我一起学习交流 https://github.com/pwcong 最近入职公司做前端实习,这几个星期来学到了移动端H5页面适配.(以前根本没做过移动端网页/(ㄒoㄒ)/~~,还是微信端的) 所以把我学到的一个小知识点写下来,也分享给前端新手们. 正文 0x00 大概说明做移动端网页和pc端很大不同的便是现在移动端窗口分辨率繁多. 很多时候UI给的设计图只有一份,还是按照iphone6设计的,

一个数字键盘引发的血案——移动端H5输入框、光标、数字键盘全假套件实现

https://juejin.im/post/5a44c5eef265da432d2868f6 为啥要写假键盘? 还是输入框.光标全假的假键盘? 手机自带的不用非得写个假的,吃饱没事干吧? 装逼?炫技? 宝宝也是被逼的,宝宝也很委屈~.~ 问题产生背景移动端H5项目需求点: 进入某页面自动弹出带小数点的数字键盘,并且自带输入验证,比如金额——只能输入数字和小数点,并且只能输入一位小数点.小数位不超过2位,且输入前验证不合法就不让输入.(UE特加功能——定制光标颜色>.<简直是反人类的需求).

解惑好文：移动端H5页面高清多屏适配方案

背景开发移动端H5页面面对不同分辨率的手机面对不同屏幕尺寸的手机视觉稿在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范往往会遵循以下两点: 1)首先,选取一款手机的屏幕宽高作为基准(以前是iPhone4的320×480,现在更多的是iphone6的375×667). 2)对于retina屏幕(如: dpr=2),为了达到高清效果,视觉稿的画布大小会是基准的2倍,也就是说像素点个数是原来的4倍(对iphone6而言:

前端提升生产力系列三（vant3 vue3 移动端H5下拉刷新，上拉加载组件的封装）

| 在日常的移动端开发中,经常会遇到列表的展示,以及数据量变多的情况下还会有上拉和下拉的操作.进入新公司后发现移动端好多列表,但是在看代码的时候发现,每个列表都是单独的代码,没有任何的封装,都是通过vant组件,里面充满了过多的重复代码,在有bug或者有需求变更的时候,每次的改动都要对很多个相同逻辑的页面组件进行修改,于是花了一点时间,将其进行封装,发现还是节省了很多的时间.自己做一个记录. 前端提升生产力系列文章 1.前端提升生产力系列一(vue3 element-plus 配置json快速生

移动端H5页面的设计稿尺寸大小规范-转载自http://www.chinaz.com/design/2015/1103/465670.shtml

机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸.现在已经有2K分辨率的手机屏幕了,设计稿是不是也要把宽高跟着最大分辨率来设计.显然不是. 请注意:(以下所有讨论内容和规范均将viewport设定为content=”width=device-width”的情况下) 也就是我们的H5页面前端代码里面必须包含 <meta content=”initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width” name=”view

移动端h5页面的设计稿尺寸

当我们在做手机端H5网页设计稿时(当然包含微信端的H5网页设计),如果没有做过类似的移动端的设计,UI设计师和前端工程师肯定会纠结的.如果是app设计师,就不会那么纠结啦. 延伸阅读: 2015年度最值得学习的10个H5案例(各种经典,推荐收藏) 这可能是近半年做得最好的4个H5传播案例还没搞懂H5营销?他们已经开始在玩“虚拟现实”了! 一个插线板的H5怎么就火了?大家明明是去看周鸿祎的八卦的那么多手机屏幕尺寸,设计稿应该按照哪一个尺寸作为标准尺寸.现在已经有2K分辨率的手机屏幕了,设计稿是

Netty4 学习笔记之一:客户端与服务端通信 demo

前言因为以前在项目中使用过Mina框架,感受到了该框架的强大之处.于是在业余时间也学习了一下Netty.因为Netty的主要版本是Netty3和Netty4(Netty5已经被取消了),所以我就直接学习Netty4.在本文中演示的就是Netty的一个简单demo. 开发准备 Netty4的官方网站是:http://netty.io/ . 本文使用的是Netty4.1. 由于Netty4.1版本需要JDK1.7,在使用JDK1.6时,会有一些bug,所以推荐使用JDK1.7. 因为Netty和M

移动端H5制作安卓和IOS的坑持续更新...

移动端H5制作安卓和IOS的坑持续更新... 前言:最近参加公司的H5页面创意竞赛,又遇到不少页面在不同系统上的坑.踩坑之余,觉得很多之前遇到的知识点都忘了,索性开一篇博文,把这些坑都统一归纳起来,持续收集更新,于己利人,抛砖引玉. 1. ios系统手机无法自动播放BGM 这个是苹果系统限制,默认不允许自动播放音频,往往需要点一下触发play()事件才能播放. 那么我们在页面onload后触发播放事件: document.getElementById('music').play(); 到这里一

移动端H5页面惯性滑动监听

移动端H5页面惯性滑动监听在移动端,当你快速滑动有滚动条的页面时,当你手指离开屏幕时,滚动条并不会立即停止,而是会随着"惯性"继续滑动一段距离. 在做项目的过程中,需要监听惯性滑动整个过程.在网上并没有找到相应的监听事件,于是就自己写了一个监听方法. 惯性滚动开始时调用的方法是listenSlidingA,结束时调用的方法是listenSlidingEndA. <!DOCTYPE html> <html> <head> <title>滚

移动端H5地图矢量SHP网格切分打包方案

文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景与离线瓦片方案一样,同样是为了解决移动端网速和流量问题,但是却不仅仅于此.传统的矢量数据的展示一般分为两种方案: 通过WMS动态获取范围内的矢量数据图片(矢量数据由后台处理成一张图片返回),在前端叠加展示.优点--渲染压力在后端,前端无压力.后台对图片更容易做缓存(前端把地图切分成格网,以WMS请求模拟WMTS请求).缺点--当前端需要交互时,必须进行动态的根

移动端H5活动页优化方案

背景项目:移动端H5电商项目痛点:慢!!! 初始方案:最基本的图片懒加载,静态资源放到cdn,predns等等已经都做了.但是还是慢,慢在哪? 显而易见的原因:由于前后端分离,所有的数据都由接口下发,之后根据模板渲染页面.也就是说,我们需要先加载js,等到js加载完毕之后,请求接口,接口返回数据之后,渲染页面,加载图片等等.尽管使用了模块化的加载方式,但是对于要求高的首页和活动页,给用户的感知也不是很好. 初版解决方案最初,由于时间紧迫,基本上都是从客户端作优化处理,基本上可以总结为以下几

移动端H5混合开发设置复盘与总结

此篇接上一篇: 移动端H5混合开发,Touch触控,拖拽,长按, 滑屏实现方案 https://www.cnblogs.com/buoge/p/9346699.html app 场布设置已经上线了,用户可以通过手机端嵌入的h5网页进行场布设置,原来只能在pc端浏览器,还得带上个笔记本电脑很是不方便,这个功能很好的解决了目前设置不顺畅的问题.上线后得到大家的认可,提升了业务效率,这一个多月的辛苦开发还是值得的,接下来是对自己这一段时间开发过程的一个总结. 整体开发基于H5+Css3+Jquery

移动端H5页面上传图片或多张图片

传统PC网页上传文件,大家都已经熟悉,这里不做介绍. 本文简单介绍移动端常用上传图片功能.灵活使用轮询或长连接可实现PC与移动端数据同步,即PC端需要上传的图片是移动拍照下来或移动端硬盘储存的,不需要再传到PC上然后上传.比如拍照上传业务... 移动端H5上传图片的方式,要点如下: 要点解析 input 即input标签 type input标签的type属性,需要为file accept 说明接收文件类型,决定调用的资源种类 capture 指明调用的目标 multiple 是否支持多文件

移动端H5的一些基本知识点总结

移动端H5的一些基本知识点总结来到这家公司之后,和曾经的工作发生了非常大的转变.曾经我一直是做PC端页面的.来到如今这家公司之后,主要是做手机移动端的页面. 移动端的页面在我这个做习惯了PC端页面的人看来,应该是非常easy的一些事情.可是在上手的过程其中,还是发现,原来移动端尽管DOM结构要简单得多,可是须要注意的细节,还是非常多的.原因非常easy,那就是,你必须考虑全部的手机上不同分辨率的展示效果. 移动端的分辨率有哪些呢? 以iphone为例,有下面分辨率 iphone4 640*96

移动端H5地图离线瓦片方案（1）（2）

2在作者另一篇移动端H5地图离线瓦片方案文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/ 1.背景移动端的网速和流量耗费是移动开发必须考虑的两个点.常规的瓦片展示方案是移动端实时请求在线瓦片服务(瓦片放在服务器端供直接读取,或者瓦片由地理服务器发布成WMTS服务等).这个方案存在两个问题: * 瓦片实时请求加载受限于移动端网速,容易导致加载卡顿现象 * 瓦片请求耗费手机流量. 试想,如果我们将切图瓦片提前存放

vue移动端h5页面根据屏幕适配的四种方案

最近做了两个关于h5页面对接公众号的项目,不得不提打开微信浏览器内置地图导航的功能确实有点恶心.下次想起来了的话,进行总结分享一下如何处理.在vue移动端h5页面当中,其中适配是经常会遇到的问题,这块主要有死个方法可以适用. 方法一:引入淘宝开源的可伸缩布局方案引入淘宝开源的可伸缩布局方案:https://github.com/amfe/lib-flexible(此处可点击) 淘宝的其实也和viewport的有点像,但是它主要是根据设备设备像素比设置scale的值,保持视口device-wid

移动端H5适配方法（盒子+图片+文字）

一.怎么让H5页面适应手机 a.利用meta标签 <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /> 解释:Viewport指用户网页的可视区域,content中的“width”指的是虚拟窗口宽度,上面代码意为虚拟窗口/页面宽度初始比例为1,最小比例为1,最大比例为1,用

移动端H5 demo

热门专题