解决方式: 给滚动的元素加样式:-webkit-overflow-scrolling: touch; -webkit-overflow-scrolling(允许独立的滚动区域和触摸回弹) 如果值为auto,就是普通的滚动,手指离开就停止滚动,让人感觉有点卡顿 如果设置为touch,在手指离开后还会滚一下,有回弹效果,看上去很流畅 但是刚开始用的时候有个小bug,h5页面打包成app时,一开始写成了*{-webkit-overflow-scrolling: touch;},导致滚动到最后页面底部出

原文链接:http://isux.tencent.com/great-mobile-h5-pages.html 从引爆朋友圈的H5小游戏<围住神经猫>,到颠覆传统广告的大众点评H5专题页<我们之间只有一个字>,从2014下半年起,各种H5游戏和专题页纷纷崭露头角.“H5”,这个由HTML5简化而来的词汇,借由微信这个移动社交平台,正在走进更多人的视野.本文聚焦于基于微信传播的H5页面的视觉设计,通过一些案例分析来谈谈设计思路与方法,希望与大家进行交流探讨. 功能与目标 首先从功能与

http://www.th7.cn/web/html-css/201605/166006.shtml http://www.th7.cn/web/html-css/201601/153127.shtml 目前,很多APP设计师小伙伴已经开始转向H5前端开发啦,但是解决所有iPhone和安卓机型的适配问题是我们的重中之重.无论是设计APP还是写前端H5.都是要考虑移动端的兼容性. 25学堂今天跟大家来回顾一下H5页面去适配所有iPhone和安卓机型的一些技巧和办法. 回归正题,兼容iphone各版

如何判断是否是H5页面: 基本上只要对那个view长按,然后看是不是有反应,比如手机震动(Android).或者出现文字选择粘贴(Android/iOS),那么就是WebView! 横屏竖屏相互切换,能自适应,并且布局不会乱掉: H5的页面在PC端也是能访问的,chrome对H5支持最好,功能的测试可以在PC端chrome下先测试,也可以在手机上直接测试,这个看个人习惯.(ie系列包括ie8,及以下都支持的不好,这个可以与PD确认H5页面在这些PC浏览器上不支持) 1.UI测试 ①查看所有页面展

1.第一个问题就是规范问题,现在边注释边编程以及语义化命名的问题已经基本的改善,页面的层级结构设计也条理了许多,现在的问题就是我对于页面的更深的应用还不够,比如我知道文档流自上而下从左至右,写在下面的层级一定是在写在上面的层级上面的,所以我很多时候为了方便就直接都绝对定位把他们一层一层的“往上摞”,这样是很不规范的,正确的是看好元素之间的关系,把能包在一起的放在一块写,然后通过设置父元素relative 子元素absolute 来实现 他们的上下层级的关系,这个才是规范的. 2.之前自己在私下做

最近一直在写移动端页面,由于之前写移动端写的比较少,所以此次踩过许多坑.特此总结一下: 1.<input type='button'>背景色在ios中的兼容性,颜色发白 解决办法:在全局样式中加入以下代码: input[type=button], input[type=submit], input[type=file], button { cursor: pointer; -webkit-appearance: none; } 2.在vue中使用jquery weui中的地区选择器时,通过点击

最近参与了APP内嵌H5页面的开发,这次使用vuejs替代了jQuery,仅仅把vuejs当做一个库来使用,效率提高之外代码可读性更强,在此分享一下自己的一些开发中总结的经验. 关于布局方案 当拿到设计师给的UI设计图,前端的首要任务就是布局和样式,相信这对于大部分前端工程师来说已经不是什么难题了.移动端的布局相对PC较为简单,关键在于对不同设备的适配.之前介绍了一篇关于移动端rem布局方案,这大致是网易H5的适配方案.不过实践中发现淘宝开源的可伸缩布局方案效果更好且更容易使用. 网易云的方案总

分享 <关于我> 分享  [中文纪录片]互联网时代                 http://pan.baidu.com/s/1qWkJfcS 分享 <HTML开发MacOSApp教程>      http://pan.baidu.com/s/1jG1Q58M  为什么要设计H5页面 移动设备的普及给媒体和娱乐带来了一场革命.根据中国互联网信息中心(CNNIC)2014年7月的报告显示,中国网民中,手机使用率达83.4%,已经超过传统PC整体80.9%的使用率.其中,手机网络新

前言 在最近几个项目中,小编接触了较多关于H5页面的测试,H5页面的测试除了业务逻辑功能测试外,其他部分的测试方法基本是可以通用的,在此对H5页面的一些通用测试方法进行总结分享给大家. H5页面介绍 1. H5页面H5即 HTML5,是最新的 Web 端开发语言版本,大多数手机 APP 页面会用 H5 实现,包括 PC Web 站点也会用它开发实现.所以 Web 的通用测试点和方法基本都可以适用于它.H5其实就是:移动端Web页面.H5应用在很多地方,如APP的活动专题页面.新闻页面.微信公众号

在微信开发H5页面的时候,往往借助于WeUI或者Jquery WeUI等基础上进行界面效果的开发,由于本人喜欢在Asp.net的Web界面上使用JQuery,因此比较倾向于使用 jQuery WeUI,本篇随笔结合官方案例和自己的项目实际开发过程的经验总结,对在H5页面开发过程中设计到的界面控件进行逐一的分析和总结,以期能够给大家在H5页面开发过程中提供有用的参考. 1.资源参考 WeUI : https://github.com/Tencent/weui WeUI for work:WeUI

前言 使用weinre在真机上调试H5页面,有一个突出的缺点,就是无法调试真机上的样式,真机上页面动态创建的dom在weinre的Elements面板显示不出来,所以调试真机上的页面样式也就无从谈起.如下图所示,单页应用动态创建出来的dom,压根就显示不出来.不知道网上吹嘘weinre可以调试真机dom样式文章的作者,有没有亲自做过实验,weinre调试真机dom样式的功能真的能用嘛?好用嘛 ?真的要是遇到生产问题,weinre能定位真机和PC端浏览器手机模拟器下样式不一致的问题嘛?weinre

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

在我们开发微信页面的时候,需要大量用到了各种呈现的效果,一般可以使用Boostrap的效果来设计不同的页面,不过微信团队也提供很多这方面的资源,包括JSSDK的接口,以及Weui的页面样式和相关功能页面,给我们提供了很大的便利,本文是在自己做的一些H5微信应用页面上做了一些功能总结,希望能够给大家提供一定的帮助. 1.微信网页开发 1) JSSDK 微信JS-SDK是微信公众平台面向网页开发者提供的基于微信内的网页开发工具包.通过使用微信JS-SDK,网页开发者可借助微信高效地使用拍照.选图.语

营销代有手段出,各领风骚数百天.要说现在哪些营销方式最能传播,屡屡刷爆朋友圈的H5页面肯定就是首当其冲的,提到H5页面,就立马想到"围住神经猫",上线微信朋友圈3天的时间便创造了用户500万,访问量超1亿的神话. H5如此势头,不得不让营销人对H5页面的未来充满了期待,越来越多的人开始在营销中运用H5页面.其实在移动端各个领域,H5页面的叫法很多,也会称为翻翻看.手机微杂志.广告页.场景应用.海报\画报(动态海报.指尖海报.掌中海报.动画海报.微画报.微海报)等等,经常能见到的就是滑动

浏览器和app没有通信协议,所以h5不知道用户的手机释放安装了app.因此只能是h5去尝试唤起app,若不能唤起,引导用户去下载我们的app. 微信里屏蔽了 schema 协议,如果在微信中打开h5,则会提示用户在浏览器中打开. HTML代码 <div id="btn"> <a onclick="submitFn ><button>打开app</button></a> </div> js代码 functi

网址: 1:天猫(http://m.tmall.com) 2:淘宝(http://m.taobao.com) 3:京东(http://m.jd.com) 4:网易(http://3g.163.com) 5:百度(http://m.baidu.com) 一:开发环境 1:chrome插件user agent switcher,在http://chrome.google.com/webstore下载: 2:用公司的wifi,用手机访问电脑ip: 二:头部解析 // 在iPhone 手机上默认值是(电

leader:我们需要做一个微信H5页面,效果如图,功能如描述,时间越快越好. 需求是不是很简单呢?2015-11-24 12:44:00文末有最新更新 背景描述 前几天微信转发相关项目开发后,这是第一个微信相关项目开发,为什么这个才叫第一个?上一个完全没有用到任何微信相关接口,一个动画宣传页加一个表单,这次这个名曰"微信H5页面"却感觉不是那么简单.只是之前自己写着玩,关注过微信的相关接口,也就是5分钟热度,到现在那个公众号还是只是会简单的翻译(用的百度翻译接口,完全没有涉及到微信接

转自http://www.blogjava.net/qileilove/archive/2014/07/24/416154.html?utm_source=tuicool H5页面测试总结 其实经过几次H5页面测试之后,发现存在很多共同的问题,所以在此对H5页面的测试点(以及容易出问题的点),做一个总结,给开发同学自测,以及准备入手H5测试的同学一个参考. 1.业务逻辑相关 除基本的功能测试之外,H5页面的测试,需要关注以下几点: 1.1 登陆 目前H5与native各个客户端都做了互通,所以大

进度条样式地址:http://sandbox.runjs.cn/show/6vxbxjrf SVG圆环样式地址:http://sandbox.runjs.cn/show/3ho1qpe9 原理:由于H5页面中大多都是图片占空间,所以可以给img加一个onload事件,让每一张图片去处理的时候就触发一个函数去处理. js代码: $(function () { var img = $('img'); var lenght = img.length; var cur = 0; var vader =

曾几何时为了兼容IE低版本浏览器而头痛,以为到Mobile时代可以跟这些麻烦说拜拜.可没想到到了移动时代,为了处理各终端的适配而乱了手脚.对于混迹各社区的偶,时常发现大家拿手机淘宝的H5页面做讨论——手淘的H5页面是如何实现多终端的适配? 那么趁此Amfe阿里无线前端团队双11技术连载之际,用一个实战案例来告诉大家,手淘的H5页面是如何实现多终端适配的,希望这篇文章对大家在Mobile的世界中能过得更轻松. 目标 拿一个双11的Mobile页面来做案例,比如你实现一个类似下图的一个H5页面: 目

H5这个由HTML5简化而来的词汇,正通过微信广泛传播.H5是集文字.图片.音乐.视频.链接等多种形式的展示页面,丰富的控件.灵活的动画特效.强大的交互应用和数据分析,高速低价的实现信息传播,非常适合通过手机的展示.分享.也因其灵活性高.开发成本低.制作周期短的特性使其成为当下企业营销的不二利器,常见于企业宣传.活动推广.产品介绍.会议邀请.公司招聘等. 面对四大在线H5互动展示制作工具,企业营销应该如何选择更适合的H5制作工具呢?今天小编就给大家带来四大在线HTML5互动展示工具的评测. MA