移动端HTML5开发心得(转）

1、 iOS里fixed中有input或者textarea，用户在里面输入文字，触发键盘，fixed容器会居中显示，而不是继续悬浮

解决办法： http://dwz.cn/CrwNz

2、移动端click时间300ms延迟

解决办法：zepto.js  或者百度touch.js 或者是fastclick.js

3、zepto的touch问题：swipe事件在小米1等低端手机不支持 基本不用zepto

4、百度的touch.js通过touch.on进行绑定事件，但是点击会遇到点透问题，也就是父级触发，子级触发

解决办法：下载最新版touch  地址：http://touch.code.baidu.com/ 通过最新API               ev.originEvent.preventDefault();

之前有点透问题解决办法，用到touchend或者是touchstar，可以是可以，但是有没有考虑用户在有滑屏的时候刚好手指刚碰到这个按钮或者刚好在这个按钮手指离开，也就会触发这个按钮事件，所以这种方法不太合理，往往都是点击才触发的不是碰一下就让他触发。

5、select下拉框的高问题，手机显示样式不一样，在QQ浏览器 弹出的option列表的height跟select一样高，在HTC手机自带的浏览器，height设置较高的时候，不能用option去选中需要的参数值，还有option默认显示的第一个有底色

6、在ipod、iphone4不支持通过tap触发事件audio的JS，比如不能通过src的改变触发声音播放，用click去解决。

7、移动端audio在苹果手机不支持音乐自动播放，苹果有安全机制，需要用户去手动触发才能播放音乐，也就是现在很多一屏一屏滑动项目要加个音乐图标 不只是简单的让用户去关掉音乐，投机做法是用户手触发到屏幕的时候就执行ID.play();的JS

8、表单就不说了，比如上传按钮设背景图无效，都是通过opacity为0来模拟的

9、很多人用到fullPage.js来实现大图滚动或者是一屏一屏的，但是在微信开发中用到这插件如果不设置anchors来定义锚点，微信的公众号发布文章都带有链接参数 有#号，不加anchors ，就会出现滚到第二屏用户退出继续进去 马上跳到第二页问题。

解决办法：anchors: [‘page1‘, ‘page2‘, ‘page3‘, ‘page4‘],

10、推荐使用swiper.js进行开发，比较好的中文API网站是：http://www.swiper.com.cn/ 能解决很多移动端问题，

11、苹果系统在滚动长页面的时候总是滚的很不爽，不利索，回弹效果，加一句代码：-webkit-overflow-scrolling : touch;

12、video默认控制器隐藏：video::-webkit-media-controls-enclosure { display:none!important;} ，还有就是video在移动端可以设置第一帧画面，但是有些手机比如HTC默认是灰色背景的，解决办法无非就是弄个图盖在上面，点击的时候图消失 触发play，处女座才这么干。

13、PNG图压缩很头疼，效果不好，你可以试试这个网站: https://tinypng.com/ 很多人都知道jpg可以调质量，但是不知道png也能这么压缩，效果最好的一个网站。现在出现一种质量更低的webP格式图，谷歌开发的，安卓手机测试都可以，苹果手机不行。不采用，可以了解一下。 可查看智图： http://zhitu.tencent.com/

14、能用字体图标就用字体图标，IE6都能兼容，移动端怕啥？ http://www.iconfont.cn/

15、CSS3动画效果可以参考下Animate.css  写的很不错： http://daneden.github.io/animate.css/

有些低端手机比较炫的效果直接有前有后，没有中间效果，手机卡出翔，不支持。

16、了解viewport.js的人，如果遇到一些手机缩放小变大，jquery就要放到viewport引用前面，还有就是meta标签，需要注意width=device-width ，github地址：https://github.com/anatoo/viewport.js  用px来切图移动端，PC端怎么切你移动端也跟着切，但是一般少用，viewport会出现些问题，项目比较急才用

17、移动端用rem吧，别再用老掉牙的em了；

18、苹果手机都知道手机号码会消失不见，加句代码吧：<metacontent="telephone=no"name="format-detection"/>

忽略邮箱识别，加句代码吧：<meta content="email=no" name="format-detection" />

19、 好累，先睡觉 改天再补充.....

以下移动端内容来自CSDN博友牙膏整理：《做手机web半年遇到的问题及解决方法》

首先，先说的是我每个项目都会用到的一个模板页，这个我遇到大大小小的坑之后定义好的一个html文件

[html] view plaincopy

  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <meta charset="utf-8" />
  5. <!-- 宽度设置为设备实际宽度，初始化倍数为1，最小倍数为1，最大倍数为1，用户缩放为否 -->
  6. <meta name="viewport" content="width=device-width,inital-scale=1.0,minimum-scale=1.0,maximum-scake=1.0,user-scalable=no" />
  7. <!-- 删除默认的苹果工具栏和菜单栏 -->
  8. <meta name="apple-mobile-web-app-capable" content="yes" />
  9. <!-- 苹果手机顶部为黑色 -->
  10. <meta name="apple-mobile-web-status-bar-style" content="block" />
  11. <!-- 屏蔽浏览器自动识别数字为电话号码 -->
  12. <meta name="fromat-detecition" content="telephone=no" />
  13. <!-- base.css是所有项目都会用到的底层样式 -->
  14. <link rel="stylesheet" type="text/css" href="css/base.css" />
  15. <!-- content.css是每个项目所有页面都会用到的公共样式 -->
  16. <link rel="stylesheet" type="text/css" href="css/content.css" />
  17. <!-- main.css为每个页面或是模块用到的一个样式文件-->
  18. <link rel="stylesheet" type="text/css" href="css/main.css" />
  19. <title></title>
  20. <script type="text/javascript" src="lib/jquery-1.8.2.min.js"></script>
  21. <!-- base.js为所有项目都会用到的js文件 -->
  22. <script type="text/javascript" src="lib/base.js"></script>
  23. </head>
  24. <body>
  25. </body>
  26. </html>

上面的meta可以帮我避免了好都问题

遇到的问题：

1.苹果手机上面，input控件会有默认的样式

解决

[html] view plaincopy

  1. /*去掉苹果手机端web按钮默认样式，解决按钮默认圆角问题*/
  2. input[type="button"]{-webkit-appearance:none; /*去除input默认样式*//*border-radius: 0px;*/}

2.在点击a标签的时候，安卓的手机会有蓝色底，苹果的机子会有灰色底

解决

[html] view plaincopy

  1. /*屏蔽点击元素出现底色*/
  2. a
  3. {
  4. -webkit-tap-highlight-color:rgba(255,255,255,0);
  5. }

3.禁止页面上的文字选中功能

解决

[html] view plaincopy

  1. -webkit-user-select:none;

4.左图，右文字的结构实现

这种结构

（1）.第一次做的时候，左右两块都是用百分百，这样在不同的屏幕因为右边字体的原因会有布局混乱的情况，然后就用媒体查询写多了两个样式文件，不过还有一个就是在平板上面，同样的百分百，左边的图片太大，导致右边的文字之间的间距要很大才可以对齐，效果很不好

（2）.第二次做的时候，就想到了一个方法，利用float脱离文档流的特性，给图片设置一个maxwidth，然在device-width*图片百分百=maxwidth时，将文字所在的div的float设置为none；且设置margin-left为图片的宽度+之间的间距。

（3）.第三次做的时候，因为看了其他的一些轻APP在横屏的时候，图片大小依然一致，所以把图片宽度定死，给个max-width和min-width，用弹性布局 flex-box，这回就很简单的高度这个布局问题

5.在微信，UC打开页面会有缓存问题，导致有时候改动的小效果看不到

解决：这里试过用cache来不让其缓存，不过用完之后反而令他们不加载文件（至今还没成功使用过cache），最后在加载发送请求的时候文件后面添加多个随机数，这样才解决测试是缓存问题

6.在做手机页面的时候，很多时候会用到z-index这个属性，如果用到这个属性的时候再对对应元素设置的话，会比较容易乱。

解决：我设置了

top0{z-index:9999};

top1{z-index:8888};

top2{z-index:7777};

top3{z-index:6666};

top4{z-index:5555};

这样，在每个页面中，对应得贴上上面样式就行了。

7.还有就是多列布局column，弹性布局flex-box

在不知道这两种布局的时候，以下布局对来来说是比较麻烦的,特别是三列的，并且中间那个还有左右边框，定义百分百的时候比较麻烦。

在知道多列布局column，弹性布局flex-box后 上面的问题很好解决，但是要记得column的子元素要给高度，不然有可能会布局混乱

还有个问题就是设置column-count为3的时候，在7个子元素的时候会是这样的

竖着排列，不符合正常的一个阅读习惯，最后还是改成了float来布局

8.em跟rem的区别

em是相对于父层

rem是相对于根元素

所以说，如果html{font-size:62.5%};的时候，

如果是在parent元素设置1.5em,child设置1.0em就等同于html的1.5em了

在parent元素设置1.5em的情况下，child用rem作为font-size的单位的话，那么就要设置1.5rem才等同上面的效果

9.backgrond-size,这个属性很好用

用法有 a.百分百 b.直接给宽高 c.cover d.contain四种用法，按需要选择使用

10.在iphone中，在手机改为横屏模式的时候，字体会默认变大

解决:

/*禁止IOS横屏的时候字体变大*/
-webkit-text-size-adjust: none;

11.在用到<div><img src="" /></div>这个结构的时候，就是用块级元素包住img的时候，会出现div高度大于img的情况，就是有点高度不知道怎么来的  解决:img{display:block;};

12.在用到media的时候，如果在<meta>有设置width=device-widht的话，media中在设置max-width min-width，这里不能用max-device-width 跟 min-device-height，不然会没效果

13.目前手机web还无法禁用手机横屏的情况下，如果你页面布局有问题的话，在横屏的时候会出现布局乱的情况

解决

在横屏的时候弹出个层把他改正

例如

[html] view plaincopy

  1. /*@media screen and (orientation:landscape)
  2. {
  3. .orientation-phone
  4. {
  5. display: block;
  6. }
  7. }*/
  8. /*页面遮盖层*/

14.在弹出整屏div的时候，如果页面整体大于一屏幕，这时候还会出现页面可以滚动的情况页面旁边是出现滚动条的，而且是可以拖动的

解决:在body设置高度100%，且overflow-hidden;在弹出消失的时候才去掉overflow-hidden;

15.在做一个手机web项目的时候，要先总结下页面所以的字体大小，然后定义好几种常用font-size，防止后期混乱

16.在看设计稿的时候，要注意比例的缩放，因为UI做的时候用的尺寸是用640*1136（至少我这边是这样），然后再做手机web的时候，我们再mate那里content设置width=device-width，所以要根据实际的页面效果来定义页面常用的font-size大小以及其他。不能按UI给出的字体大小来设置font-size。

17.在class反面，少用继承，多用组合，这样可以加快开发效率，可以自己定义一个底层样式base.css（常用样式且所以项目都可以共用）

18.可能做手机web的都去学校手机web开发框架，例如我就是学了jquery mobile，这个框架很强大，但是不的不说，就是在UI样式方面比较麻烦，要不断的去覆盖样式，如果你的web是UI是有自己特色的话，这个时候用jquery mobile就比较费时间（至少我是这样）。所以说在开发的时候，觉得哪个方法快就用哪个，不要为了用框架而且用框架。

************************************************************分割线 ************************************************************************************

以下规范建议，均是Alloyteam在日常开发过程中总结提炼出的经验，规范具备较好的项目实践，强烈推荐使用

字体设置

使用无衬线字体

body {
    font-family: "Helvetica Neue", Helvetica, STHeiTi, sans-serif;
}

iOS 4.0+ 使用英文字体 Helvetica Neue，之前的iOS版本降级使用 Helvetica。中文字体设置为华文黑体STHeiTi。 需补充说明，华文黑体并不存在iOS的字体库中(http://support.apple.com/kb/HT5878)， 但系统会自动将华文黑体 STHeiTi 兼容命中系统默认中文字体黑体-简或黑体-繁

Heiti SC Light 黑体-简 细体 （iOS 7后废弃）
Heiti SC Medium 黑体-简 中黑
Heiti TC Light 黑体-繁 细体
Heiti TC Medium 黑体-繁 中黑

原生Android下中文字体与英文字体都选择默认的无衬线字体

4.0 之前版本英文字体原生 Android 使用的是 Droid Sans，中文字体原生 Android 会命中 Droid Sans Fallback
4.0 之后中英文字体都会使用原生 Android 新的 Roboto 字体
其他第三方 Android 系统也一致选择默认的无衬线字体

基础交互

设置全局的CSS样式，避免图中的长按弹出菜单与选中文本的行为

a, img {
    -webkit-touch-callout: none; /* 禁止长按链接与图片弹出菜单 */
}
html, body {
    -webkit-user-select: none;   /* 禁止选中文本（如无文本选中需求，此为必选项） */
    user-select: none;
}

移动性能

要考虑Android低端机与2G网络场景下性能 注意！

发布前必要检查项

  • 所有图片必须有进行过压缩
  • 考虑适度的有损压缩，如转化为80%质量的jpg图片
  • 考虑把大图切成多张小图，常见在banner图过大的场景

加载性能优化, 达到打开足够快

  • 数据离线化，考虑将数据缓存在 localStorage
  • 初始请求资源数 < 4 注意！
  • 图片使用CSS Sprites 或 DataURI
  • 外链 CSS 中避免 @import 引入
  • 考虑内嵌小型的静态资源内容
  • 初始请求资源gzip后总体积 < 50kb
  • 静态资源(HTML/CSS/JS/Image)是否优化压缩？
  • 避免打包大型类库
  • 确保接入层已开启Gzip压缩（考虑提升Gzip级别，使用CPU开销换取加载时间） 注意！
  • 尽量使用CSS3代替图片
  • 初始首屏之外的静态资源（JS/CSS）延迟加载 注意！
  • 初始首屏之外的图片资源按需加载（判断可视区域） 注意！
  • 单页面应用(SPA)考虑延迟加载非首屏业务模块
  • 开启Keep-Alive链路复用

运行性能优化, 达到操作足够流畅

  • 避免 iOS 300+ms 点击延时问题 注意！
  • 缓存 DOM 选择与计算
  • 避免触发页面重绘的操作
  • Debounce连续触发的事件(scroll / resize / touchmove等)，避免高频繁触发执行 注意！
  • 尽可能使用事件代理，避免批量绑定事件
  • 使用CSS3动画代替JS动画
  • 避免在低端机上使用大量CSS3渐变阴影效果，可考虑降级效果来提升流畅度
  • HTML结构层级保持足够简单
  • 尽能少的使用CSS高级选择器与通配选择器
  • Keep it simple
时间： 2024-10-05 01:17:41

移动端HTML5开发心得(转）的相关文章

移动端HTML5开发 选择方案

如今出现了大量的CSS前端框架,但真正优秀的框架只有少数几个. 本文将会比较其中五个最佳的框架.每个框架都有自己的优点和缺点,以及具体的应用领域,你可以根据自己的具体项目需求进行选择.此外,许多选项都是模块化的,允许你仅使用所需的组件,甚至可以混合使用来自不同框架的组件. 本文依据各个框架的GitHub流行度来顺序介绍. Bootstrap Bootstrap是目前可用框架中无可争议的领导者.其人气日益增长,你可以放心的选择这个框架,而不必担心项目会失败,因为具有广泛使用基础的框架,不太可能被抛

移动端项目开发心得

通过这次项目开发,使我对布局有了更深层次的理解,对float和position的运用也更得心应手.体会到float和position对页面的负面影响.其中,position:absoulte/fiexd会让元素脱离文档流,其后面的元素(暂且称为候补元素吧)会占据原来的位置,需要对候补元素的margin padding做出相应调整:而float同样会让元素脱离文档流,后面的元素同样会占据其原来的位置,不同的是,其候补元素的内容会环绕在float元素周围. position: <head> <

移动端HTML5开发问题汇总-样式篇

问题:Android 上圆形图片使用 border 时,边框显示变形 解决:给 img 外嵌套一个元素,为其使用圆角 <div> <img src=""> </div> div{ display: inline-block; border-radius: 50%; border: 4px solid #FF7000; } img{ vertical-align: top; } 问题:Android 上圆角元素,背景颜色会溢出 解决: { backgr

html5开发移动端app的7大优势(一)

移动web端APP是如今市场份额占据霸主,自html5开发语言正式封稿后,使用html5语言开发app应用带来的用户体验和制作难度是其他语言远远不如的.本文华清创客学院为读者解析html5开发移动端app的7大优势.让对html5感兴趣的读者更好的了解html5网页开发技术. html5开发移动端app的7大优势(一): 1.跨平台: 开发者的幸福指数随着多屏时代的来临岌岌可危.人人都期盼HTML5能扮演救星.多套代码.不同技术工种.业务逻辑同步,这是折磨人的过程.有点类似个人电脑早期世界,那个

安卓版App开发心得

从2016年4月到6月主要做的工作是网站的开发,而6月到现在2016年8月初,主要做的工作是Android和IOS两种App的开发,又以Android为主. 将这段时间的Android开发心得记录如下. 1.开发环境和参考资料 由于学会FQ的时间比较短(2016年7月才学会),现在在用的mac版AndroidStudio是在国内某站上下载的.今年将开发环境由windows转为mac了,好在各种IDE都是跨平台的,迁过来后麻烦不多,Android Studio也贴心地支持Eclipse风格快捷键,

移动端HTML5&lt;video&gt;视频播放优化实践

转帖: http://www.xuanfengge.com/html5-video-play.html 如果侵权请告知删除 遇到的挑战 移动端HTML5使用原生<video>标签播放视频,要做到两个基本原则,速度快和体验佳,先来分析一下这两个问题. 下载速度 以一个8s短视频为例,wifi环境下提供的高清视频达到1000kbps,文件大小大约1MB:非wifi环境下提供的低码率视频是500kbps左右,文件大小大约500KB:参考QzoneTouch多普勒测速,2g网络的平均速度是14KB/s

移动端页面开发

移动端页面开发 移动客户端的开发类型(站在前端立场上来说),主要是三种:Native App(原生APP),也就是完全使用移动设备系统语言写的客户端,iPhone iPad就是纯Object-C,安卓就是纯JAVA, 是性能最棒的开发方式,但灵活性不好.Web App, 就是在移动浏览器里打开的,纯HTML+CSS+JS,说白了就是个网页,只不过非常的富应用,比如手机浏览器访问的GMAIL.就是在浏览器里打开的页面.IOS支持可以在桌面创建访问的快捷方式,但是说到底还是打开Safari跑.而且对

Html5开发——html+css基础一（百度首页）

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>百度</title> <style type="text/css"> *{margin: 0;padding: 0;} body{text-align: center;} .header{text-align: right;f

移动端HTML5性能优化

[导读] 得益于智能手机的普及和各行各业互联网+的运动,移动端的市场占比疯狂增长. 2016年1月发布的2015年电商数据显示,2015年中国移动端网购交易额同比暴涨123 2%,在网购总交易额中的占比首次超越PC端达到55%. 技术上,HTML5大行其道: 1:有数据显示,截至2015,有80%的App全部或部分基于HTML5. 2:谷歌浏览器于9月1日起不在支持自动播放Flash. 3:亚马逊旗下网站(包括Amazon.com门户在内)的所有广告将不再使用flash.在可预见的未来,flas