html5
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧

html5教程-移动端HTML5开发心得(转）

发布时间：2018-12-13 发布网站：脚本宝典
脚本宝典收集整理的这篇文章主要介绍了html5教程-移动端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.左图，右文字的结构实现

 

html5教程-移动端HTML5开发心得(转）

这种结构  <"/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+o6gxo6kutdrSu7TO1/a1XMqxuvKjrNfz09LBvb/ptrzKx9PDsNm31rDZo6zV4tH51Nqyu82stcTGwcS70vLOqtPSSD/X1szltcTUrdLyu+HT0LK8vta77MLStcTH6b/2o6zIu7rzvs3Tw8O9zOWy6dGv0LS24MHLwb249tH5yr3OxLz+o6yyu7n9u7nT0NK7uPa+zcrh1NrGvbDlyc/D5qOszazR+bXEsNm31rDZo6zX87HftcTnvmaszKu086OstbzWwtPSsd+1xM7E19bWrrzktcS85L7g0qq63LTzssW/ydLUttTG66Os0Ke5+7rcsru6wzwvcD4KPHA+o6gyo6kutdq2/rTO1/a1xMqxuvKjrL7Nz+u1vcHL0ru49re9t6ijrMD708NmbG9hdM3RwOvOxLW1wfe1xMzY0NSjrLj4zbzGrMno1sPSu7j2bWF4d2lkdGijrMi71NpkZXZpY2Utd2lkdGgqzbzGrLDZt9aw2T1tYXh3aWR0aMqxo6y9q87E19bL+dTatcRkaXa1xGZsb2F0yejWw86qbm9uZaO7x9LJ6NbDbWFyZ2luLWxlZnTOqs28xqy1xL/ttsgr1q685LXEvOS+4KGjPC9wPgo8cD6jqDOjqS612sj9tM7X9rXEyrG68qOs0vLOqr+0wcvG5Mv7tcTSu9Cpx+FBUFDU2rrhxsG1xMqxuvKjrM28xqy089Ch0sDIu9K71sKjrMv50tSw0c28xqy/7bbItqjLwKOsuPi49m1heC13aWR0aLrNbWluLXdpZHRoo6zTw7Wv0NSyvL7WIGZsZXgtYm94o6zV4rvYvs263LzytaW1xLjftsjV4rj2sry+1s7KzOI8L3A+CjxwPjUu1NrOotDFo6xVQ7Tyv6rSs8Pmu+HT0Lu6tObOyszio6y1vNbC09DKsbryuMS2r7XE0KHQp7n7v7Syu7W9PC9wPgo8cD694r72o7rV4sDvytS5/dPDY2FjaGXAtLK7yMPG5Lu6tOajrLK7uf3Tw83q1q6687e0tvjB7sv7w8eyu7zT1NjOxLz+o6jWwb3xu7nDu7PJuabKudPDuF1jYWNoZaOpo6zX7rrz1Nq809TYt6LLzCFrx/O1xMqxuvLOxLz+uvPD5sztvNO24Lj2y+a7+sr9o6zV4tH5ssW94r72suLK1MrHu7q05s7KzOI8L3A+CjxwPjYu1NrX9srWu/rSs8PmtcTKsbryo6y63LbgyrG68rvh08O1vXotaW5kZXjV4rj2yvTQ1KOsyOe5+9PDtb3V4rj2yvTQ1LXEyrG68tTZttS21NOm1KrL2Mno1sO1xLuwo6y74bHIvc/I3dLXwtKhozwvcD4KPHA+veK+9qO6ztLJ6NbDwcs8L3A+CjxwPiZuYnNwO3RvcDB7ei1pbmRleDo5OTk5fTs8L3A+CjxwPnRvcDF7ei1pbmRleDo4ODg4fTs8L3A+CjxwPnRvcDJ7ei1pbmRleDo3Nzc3fTs8L3A+CjxwPnRvcDN7ei1pbmRleDo2NjY2fTs8L3A+CjxwPnRvcdr7ei1pbmRleDo1NTU1fTs8L3A+CjxwPtXi0fmjrNTaw7+49tKzw+bW0KOsttTTPRXDzPnJz8nPw+bR+cq9vs3Q0MHLoaM8L3A+CjxwPjcuu7nT0L7Nyse24MHQsry+1mNvbHVtbqOsta/Q1LK8vtZmbGV4LWJveDwvcD4KPHA+1Nqyu9aqtcDV4sG91tayvL7WtcTKsbryo6zS1M/Csry+1rbUwLTAtMu1ysexyL3Pwum3s7XELMzYsfDKx8j9wdC1xKOsSQLH0tbQvOTEx7j2u7nT0Nfz09Kx37/yo6y2qNLlsNm31rDZtcTKsbrysci9z8Lpt7OhozwvcD4KPHA+1NrWqrXAtuDB0LK8vtZjb2x1bW6jrLWv0NSyvL7WZmxleC1ib3i68yDJz8PmtcTOysziuty6w73ivvajrLWrysfSqrzHtcNjb2x1bW61xNfT1KrL2NKquPi437bIo6yyu8i709C/ycTcu+GyvL7Wu+zC0jwvcD4KPHA+u7nT0Lj2zsrM4r7NysfJ6NbDY29sdW1uLWNvdW50zqoztcTKsbryo6zU2je49tfT1KrL2LXEyrG68rvhysfV4tH5tcQ8L3A+CjxWPSr618XFxcHQo6yyu7f7us/V/bOjtcTSu7j21MS2wc+wud+jrNfuuvO7ucrHuMSzycHLZmxvYXTAtLK8vtY8L3A+CjxwPjguZW24+nJlbbXEx/ix8DwvcD4KPHA+ZW3Kx8/gttTT2ri4suM8L3A+CjxwPnJlbcrHz+C21NPauPnUqsvYPC9wPgo8cD7L+dLUy7WjrMjnuftodG1se2ZvbnQtc2l6ZTo2Mi41JX07tcTKsbryo6w8L3A+CjxwPsjnufvKx9TacGFyZW501KrL2Mno1sMxLjVLBSxjaGlsZMno1sMxLjBlbb7NtcjNrNPaaHRtbLXEMS41ZW3ByzwvcD4KPHA+1NpwYXJlbnTUqsvYyejWwzEuNWVttcTH6b/2z8KjrGNoAWXk08NyZW3X986qZm9udC1zaxpltcS1pc67tcS7sKOSXMfDtL7N0qrJ6NbDMS41cmVtssW1yM2syc/D5rXE0Ke5+zwvcD4KPHA+OS5iYWNrZ3JvbmQtc2l6ZSzV4rj2yvTQ1LrcusPTwzwvcD4KPHA+08O3qNPQIGEusNm31rDZIGIu1rG907j4v+243yBjLmNvdmVyIGQuY29udGFpbsvE1tBTw7eoo6ywtNDo0qrRodTxyrnTwzwvcD4KPHA+mtau1NppcGhvbmXW0KOs1NrK1rv6uMTOqrrhxsHEo8q9tcTKsbryo6zX1szlu+HErMjPseS08zwvcD4KPHA+veK+9jo8L3A+CjxwPi8qvfvWuUlPU7rhxsG1xMqxuvLX1szlseS08yovPGJyIC8+LXdlYmtpdC10ZXh0LXNpemUtYWRqdXN0OiBub25lOzwvcD4KPHA+MTEu1NrTw7W9Jmx0O2RpdiZndDsmbHQ7aW1nIHNyYz0="" /></p>这个结构的时候，就是用块级元素包住img的时候，会出现p高度大于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.在弹出整屏p的时候，如果页面整体大于一屏幕，这时候还会出现页面可以滚动的情况页面旁边是出现滚动条的，而且是可以拖动的

解决:在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; }

html5教程-移动端HTML5开发心得(转）

移动性能

要考虑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

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.左图，右文字的结构实现

 

html5教程-移动端HTML5开发心得(转）

这种结构  <"/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+o6gxo6kutdrSu7TO1/a1xMqxuvKjrNfz09LBvb/ptrzKx9PDsNm31rDZo6zV4tH51Nqyu82stcTGwcS70vLOqtPSsd/X1szltcTUrdLyu+HT0LK8vta77MLStcTH6b/2o6zIu7rzvs3Tw8O9zOWy6dGv0LS24MHLwb249tH5yr3OxLz+o6yyu7n9u7nT0NK7uPa+zcrH1NrGvbDlyc/D5qOszazR+bXEsNm31rDZo6zX87HftcTNvMaszKu086OstbzWwtPSsd+1xM7E19bWrrzktcS85L7g0qq63LTzssW/ydLUttTG66Os0Ke5+7rcsru6wzwvcD4KPHA+o6gyo6kutdq2/rTO1/a1xMqxuvKjrL7Nz+u1vcHL0ru49re9t6ijrMD708NmbG9hdM3RwOvOxLW1wfe1xMzY0NSjrLj4zbzGrMno1sPSu7j2bWF4d2lkdGijrMi71NpkZXZpY2Utd2lkdGgqzbzGrLDZt9aw2T1tYXh3aWR0aMqxo6y9q87E19bL+dTatcRkaXa1xGZsb2F0yejWw86qbm9uZaO7x9LJ6NbDbWFyZ2luLWxlZnTOqs28xqy1xL/ttsgr1q685LXEvOS+4KGjPC9wPgo8cD6jqDOjqS612sj9tM7X9rXEyrG68qOs0vLOqr+0wcvG5Mv7tcTSu9Cpx+FBUFDU2rrhxsG1xMqxuvKjrM28xqy089Ch0sDIu9K71sKjrMv50tSw0c28xqy/7bbItqjLwKOsuPi49m1heC13aWR0aLrNbWluLXdpZHRoo6zTw7Wv0NSyvL7WIGZsZXgtYm94o6zV4rvYvs263LzytaW1xLjftsjV4rj2sry+1s7KzOI8L3A+CjxwPjUu1NrOotDFo6xVQ7Tyv6rSs8Pmu+HT0Lu6tObOyszio6y1vNbC09DKsbryuMS2r7XE0KHQp7n7v7Syu7W9PC9wPgo8cD694r72o7rV4sDvytS5/dPDY2FjaGXAtLK7yMPG5Lu6tOajrLK7uf3Tw83q1q6687e0tvjB7sv7w8eyu7zT1NjOxLz+o6jWwb3xu7nDu7PJuabKudPDuf1jYWNoZaOpo6zX7rrz1Nq809TYt6LLzcfrx/O1xMqxuvLOxLz+uvPD5sztvNO24Lj2y+a7+sr9o6zV4tH5ssW94r72suLK1MrHu7q05s7KzOI8L3A+CjxwPjYu1NrX9srWu/rSs8PmtcTKsbryo6y63LbgyrG68rvh08O1vXotaW5kZXjV4rj2yvTQ1KOsyOe5+9PDtb3V4rj2yvTQ1LXEyrG68tTZttS21NOm1KrL2Mno1sO1xLuwo6y74bHIvc/I3dLXwtKhozwvcD4KPHA+veK+9qO6ztLJ6NbDwcs8L3A+CjxwPiZuYnNwO3RvcDB7ei1pbmRleDo5OTk5fTs8L3A+CjxwPnRvcDF7ei1pbmRleDo4ODg4fTs8L3A+CjxwPnRvcDJ7ei1pbmRleDo3Nzc3fTs8L3A+CjxwPnRvcDN7ei1pbmRleDo2NjY2fTs8L3A+CjxwPnRvcDR7ei1pbmRleDo1NTU1fTs8L3A+CjxwPtXi0fmjrNTaw7+49tKzw+bW0KOsttTTprXDzPnJz8nPw+bR+cq9vs3Q0MHLoaM8L3A+CjxwPjcuu7nT0L7Nyse24MHQsry+1mNvbHVtbqOsta/Q1LK8vtZmbGV4LWJveDwvcD4KPHA+1Nqyu9aqtcDV4sG91tayvL7WtcTKsbryo6zS1M/Csry+1rbUwLTAtMu1ysexyL3Pwum3s7XELMzYsfDKx8j9wdC1xKOssqLH0tbQvOTEx7j2u7nT0Nfz09Kx37/yo6y2qNLlsNm31rDZtcTKsbrysci9z8Lpt7OhozwvcD4KPHA+1NrWqrXAtuDB0LK8vtZjb2x1bW6jrLWv0NSyvL7WZmxleC1ib3i68yDJz8PmtcTOysziuty6w73ivvajrLWrysfSqrzHtcNjb2x1bW61xNfT1KrL2NKquPi437bIo6yyu8i709C/ycTcu+GyvL7Wu+zC0jwvcD4KPHA+u7nT0Lj2zsrM4r7NysfJ6NbDY29sdW1uLWNvdW50zqoztcTKsbryo6zU2je49tfT1KrL2LXEyrG68rvhysfV4tH5tcQ8L3A+CjxwPsr618XFxcHQo6yyu7f7us/V/bOjtcTSu7j21MS2wc+wud+jrNfuuvO7ucrHuMSzycHLZmxvYXTAtLK8vtY8L3A+CjxwPjguZW24+nJlbbXEx/ix8DwvcD4KPHA+ZW3Kx8/gttTT2ri4suM8L3A+CjxwPnJlbcrHz+C21NPauPnUqsvYPC9wPgo8cD7L+dLUy7WjrMjnuftodG1se2ZvbnQtc2l6ZTo2Mi41JX07tcTKsbryo6w8L3A+CjxwPsjnufvKx9TacGFyZW501KrL2Mno1sMxLjVlbSxjaGlsZMno1sMxLjBlbb7NtcjNrNPaaHRtbLXEMS41ZW3ByzwvcD4KPHA+1NpwYXJlbnTUqsvYyejWwzEuNWVttcTH6b/2z8KjrGNoaWxk08NyZW3X986qZm9udC1zaXpltcS1pc67tcS7sKOsxMfDtL7N0qrJ6NbDMS41cmVtssW1yM2syc/D5rXE0Ke5+zwvcD4KPHA+OS5iYWNrZ3JvbmQtc2l6ZSzV4rj2yvTQ1LrcusPTwzwvcD4KPHA+08O3qNPQIGEusNm31rDZIGIu1rG907j4v+243yBjLmNvdmVyIGQuY29udGFpbsvE1tbTw7eoo6ywtNDo0qrRodTxyrnTwzwvcD4KPHA+MTAu1NppcGhvbmXW0KOs1NrK1rv6uMTOqrrhxsHEo8q9tcTKsbryo6zX1szlu+HErMjPseS08zwvcD4KPHA+veK+9jo8L3A+CjxwPi8qvfvWuUlPU7rhxsG1xMqxuvLX1szlseS08yovPGJyIC8+LXdlYmtpdC10ZXh0LXNpemUtYWRqdXN0OiBub25lOzwvcD4KPHA+MTEu1NrTw7W9Jmx0O2RpdiZndDsmbHQ7aW1nIHNyYz0="" /></p>这个结构的时候，就是用块级元素包住img的时候，会出现p高度大于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.在弹出整屏p的时候，如果页面整体大于一屏幕，这时候还会出现页面可以滚动的情况页面旁边是出现滚动条的，而且是可以拖动的

解决:在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; }

html5教程-移动端HTML5开发心得(转）

移动性能

要考虑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

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ html5教程，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的html5教程-移动端HTML5开发心得(转）全部内容，希望文章能够帮你解决html5教程-移动端HTML5开发心得(转）所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。
标签：APIAPIClassCSSCSScss3css3动画css3动画divDOMHTMLhtml5html5ImportjQueryjQuerypost-format-gallery
猜你在找的html5相关文章
其他相关热搜词更多
phpjavapython程序员loadpost-format-gallerydivString参数开发ListcapMapClass工具安装SQL数据库资源this
全站导航更多
html5HTML/XhtmlCSSXML/XSLTDreamweaver教程Frontpage教程心得技巧JavaScriptASP.NETPHP编程正则表达式AJAX相关ASP编程JSP编程编程10000问CSS/HTMLFlexvbsDOS/BAThtahtcpythonperl游戏相关VBA远程脚本ColdFusionMsSqlMysqlmariadboracleDB2mssql2008mssql2005SQLitePostgreSQLMongoDB星外虚拟主机华众虚拟主机Linuxwin服务器FTP服务器DNS服务器Tomcatnginxzabbix云和虚拟化bios系统安装系统系统进程Windows系列LINUXRedHat/CentosUbuntu/DebianFedoraSolaris红旗Linux建站经验微信营销网站优化网站策划网络赚钱网络创业站长故事alexa域名photoshop教程摄影教程Fireworks教程CorelDraw教程Illustrator教程Painter教程Freehand教程IndesignSketch笔记本主板内存CPU存储显卡显示器光存储鼠标键盘平板电脑安全教程杀毒防毒安全设置病毒查杀脚本攻防入侵防御工具使用业界动态Exploit漏洞分析
最新html5教程
热门html5教程