1.离线缓存为HTML5开发移动应用提供了基础 HTML5 Web Storage API可以看做是加强版的cookie，不受数据大小限制，有更好的弹性以及架构，可以将数据写入到本机的ROM中，还可以在关闭浏览器后再次打开时恢复数据 2.专为移动平台定制的表单元素 浏览器中出现的html5表单元素与对应的键盘： 类型 用途 键盘 Text 正常输入内容 标准键盘 Tel 电话号码 数字键盘 Email 电子邮件地址文本框 带有@和. 设计师要知道，用的时候记得告诉研发同事一声！ 3.丰富的交互方式支持 提升互动能力：拖拽、撤销历史操作、文本选择等 Transition – 组件的移动效果 Transform – 组件的变形效果 Animation – 将移动和变形加入动画支持 4.HTML5使用上的优势 更低的开发及维护成本； 使页面变得更小，减少了用户不必要的支出；而且，性能更好使耗电量更低； 方便升级，打开即可使用最新版本，免去重新下载升级包的麻烦，使用过程中就直接更新了离线缓存
说实话，我们这次开发移动端的项目，整个项目组的人都是第一次，最初立项的时候为是选择native app和web app还争论了一番，最后综合考虑，我们选择了web（我们选择了h5）开发。 响应式web设计 说到这个，移动开发面对的屏幕尺寸那叫一个丰富，其中安卓阵营就够让人头痛的。 2.CSS3新增属性 现在移动端两大阵营ios和android都是基于webkit内核的，而webkit内核对CSS3的支持走在了前面，在这里我们可以抛开翔一样的ie家族，尽情享受多彩绚丽CSS3世界吧 #id{……}、div span{……}、div[class="classname"]{} 但是由于ie某些浏览器的原因，很多好用的选择符不能广泛使用，如ie6只支持a标签的伪类选择符，但是在移动端，我们就不用在意这些了 （6）、CSS3绘图和CSS3动画 在html5和css3的世界里，很多图片都是多余的，我们可以尽情发挥自己的想象，让CSS3替代不必要的图片不必要的JavaScript，另外做CSS3动画时最好将动画代码提取出来单独命名
一键领取预热专享618元代金券，2核2G云服务器爆品秒杀低至18元！云产品首单低0.8折起，企业用户购买域名1元起…
AppCan是HTMl5移动开发应用平台，支持跨平台，可以简单、快速、高效开发移动应用。 倡导Hybrid App开发。 为HTML5开发提供底层Native交互能力。 ? 开发工具IDE AppCan IDE基于Eclipse定制，支持跨平台、本地打包、模拟调试、真机同步等功能 模拟调试 ? 左边部分是手机的一些模拟器。 API文档可以参考[这里]， 覆盖了移动开发应用中的常用场景。(http://newdocx.appcan.cn/index.html?templateId=315)。 JS SDK AppCan将常用的UI和功能性模块封装成了一个开发库，开发者只需要引入appcan.min.js即可，另外把对backbone, zepto, underscore的依赖也打包在基础库中了 JS SDK 文档参考这里 总结 AppCan是一种基于H5实现跨平台App开发的解决方案，封装了一些常用的UI组件供js调用，提供了实现一整套流程的IDE，包括调试，打包等。
在移动Web开发中就是指的CSS的逻辑像素。 视口 问题：PC端设计的网页一般都是大于960px 尺寸，移动端上的浏览器为了能够将那些为PC端设计的网站正常显示，一般都给一个默认的整屏的宽度为980px（css像素），虽然能这样让移动端浏览器兼容大部分 2.2 移动端视口 在移动端视口与移动端浏览器屏幕宽度不再相关联，可以比浏览器的可视区域更大或者更小，还可以对页面进行缩放（放大、缩小）。 视觉视口是用户正在看到的网站的区域，对于的javascript属性是window.innerWidth/Height 2.2.2 布局视口（layout viewport） 布局视口：在移动端视口与移动端浏览器屏幕宽度不再相关联 布局视口不会受到缩放的影响，缩放不会导致页面重排渲染，对于移动端宝贵的性能来说非常重要。
在前端的移动Web开发中，有一部分事件只在移动端产生，如触摸相关的事件。接下来给大家简单总结一下移动端的事件。 1. PC端事件在移动端的兼容问题 1.1 click事件的200~300ms延迟问题 由于移动端默认的布局视口宽度是980像素，所以网页文字非常小，为了快速让网页还原到原来的大小，Safari最新引入了双击缩放功能 移动端特有的touch事件 由于移动端设备大都具备触摸功能，所以移动端浏览器都引入了触摸(touch)事件。 封装移动端tap事件 由于点击事件经常使用，如果用click会有延迟问题，一般我们会用touch事件模拟移动端的点击事件, 以下是封装的几个事件，仅供参考。 ---- 参考文章： 移动端web开发---Touch事件详解 MDN:TouchEvent 移动端前端常见的触摸相关事件touch、tap、swipe等整理
如何让我们所开发的手机页面能有更好的交互体验，就是这篇文章的主旨：移动web开发问题和优化小结。 如果是复杂的动画可以使用css3+js（或者html5+css3+js）配合开发，效果只有想不到，没有做不到。 避免页面跟着滑动 这个细节是我在基于vue开发焦点图的时候遇到的，后来自己找不到方法，直接在sf上提问了，大家可以去参考下：移动端轮播图，上下滑动的时候不触发页面的滚动 ps：滑动我没有使用什么库，是我根据 1.web移动前端有哪些优化方案？ 2.web移动端页面性能优化方案 3.Web前端优化最佳实践及工具集锦 4.移动前端系列——移动页面性能优化 5.Web性能优化：图片优化 16.小结 我在移动web(手机网站)上，遇到的问题，暂时就是上面这些了
对于pc端的前端开发以及html5和css3学习过后对页面布局更加熟练了,对于现在开发更多倾向于移动端开发,对于移动端开发和传统PC开发又有所不同,下面简单认识下移动端开发概况! 对于学习移动端开发首先要了解下面三个概念(设备独立像素,物理像素,和像素比),下面简单介绍下这三个概念! 上面说过的设备独立像素如何改变,下面就看看使用移动端开发的meta的viewport标签 <meta name="viewport" content="width=device-width,initial-scale minimum-scale=1,maximum-scale=1//最大最小缩放比例,一般不用设置 <em>移</em><em>动</em><em>端</em><em>开</em><em>发</em>的meta标签一般只需要一下的属性就行 <meta name="viewport" content ="width=device-width,initial-scale=1,user-scalable=no" /> 我们不喜欢用户进行缩放,直接我们在开发过程中,转换成对应的物理像素能较好的观察哦设备的显示效果
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。 1. 的取值： 1rem = 100px 或者 1rem = 1/10 * 理想视口的宽度 chrome浏览器字体小于12px（会被重置为12px) 固定设计稿的宽度开发+根据设备动态适配缩放 开发直接按照设计稿编写固定尺寸元素 2.1 横向百分比 + 纵向高度固定 首先看案例： 拉勾网移动端首页顶部的logo区域，不管如何变化浏览器的宽度，高度不变化，宽度自适应。 缩放自适应布局方式（推荐***） 简单点说就是，开发的时候根据设计搞完全还原像素，然后根据屏幕的宽度通过js动态改变页面的缩放，恰好是理想视口的大小。 原理核心就是修改页面mate标签的缩放。 这样优点非常多，首先开发人员直接像素还原，开发效率很高，也没有移动端1像素的问题。也是老马推荐大家使用的方式。
由于移动端的特殊性，屏幕的尺寸碎片化严重，要想很好的适配不同的尺寸的设备，需要我们前端开发相比PC端要做一些基层的适配方案。 1. Rem的取值： 1rem = 100px 或者 1rem = 1/10 * 理想视口的宽度 chrome浏览器字体小于12px（会被重置为12px) 固定设计稿的宽度开发+根据设备动态适配缩放 开发直接按照设计稿编写固定尺寸元素 2.1 横向百分比 + 纵向高度固定 首先看案例： 拉勾网移动端首页顶部的logo区域，不管如何变化浏览器的宽度，高度不变化，宽度自适应。 ? 缩放自适应布局方式（推荐***） 简单点说就是，开发的时候根据设计搞完全还原像素，然后根据屏幕的宽度通过js动态改变页面的缩放，恰好是理想视口的大小。 原理核心就是修改页面mate标签的缩放。 这样优点非常多，首先开发人员直接像素还原，开发效率很高，也没有移动端1像素的问题。也是老马推荐大家使用的方式。
移动端适配 相对于PC端来说，移动端设备分辨率百花齐放，千奇百怪，对于每一个开发者来说，移动端适配是我们进行移动端开发第一个需要面对的问题。 user-scale=no禁止缩放 所以现在我们知道，这段在移动端常见的代码的意思，即将visualviewport和layoutviewport设置为idealviewport的值；这样我们在移动端就不会出现滚动条 键盘弹出与使用transform属性的情况在移动端是很常见的，所以需要谨慎使用position:fixed。 推荐使用flex flex，即弹性布局，移动端兼容性较好，能够满足大部分布局需求。 ，在项目开发中重复造轮子是一件很不明智的事情；开发项目时我们可以借助第三方组件、插件提高我们的开发效率。 常用组件库 VantUI(https://youzan.github.io/vant/#/zh-CN/)是有赞开源的一套轻量、可靠的移动端Vue组件库；支持按需引入、主题定制、SSR，除了常用组件外，针对电商场景还有专门的业务组件
昨天才发现 原来页面中的JS可以这样写。 然后再随便发表一些感慨吧。问渠那得清如许，为有源头活水来。 H5做的页面确实超级漂亮。但 为了在同事朋友面前装一下，还是要熟悉一下的。 然后就可以告诉他们：不就是CSS3新增的那几个动画属性，在加上一下JS的东西嘛，不难！^_^ 昨天看了一下午的一个H5。 首先，作为非前端人员、要 抛开绚烂的素材，来分析内部实现原理。 观察的多了，就会发现。都会有个 进度条或者类似的加载界面(后面你会知道比较坑)。 、CSS3新增动画、CSS3新增动画（the point） 先这样吧
移动端开发技巧 ? 01 一、样式按组件或板块分文件写再合成 ①设置各种变量 采用scss或者less来写css代码有很多好处。这里就不详细说。 不过，这里要注意，子模块的文件名要以“_”开始哦，这样就不会被编译，而是需要引用的时候再编译哦。例子如图： ? 02 二、页面适应性布局 个人认为，适配移动端比较好的布局方式是百分比+rem布局。 各种屏幕下，这四块都是平分并且不会出现横向滚动条的。不过要注意，这个时候的间距就不要用margin-left和margin-right来撑开，而是用padding来撑开。 然后神奇的事情就发生了。当你改变尺寸时，字体。图片等，就会自动跟着适应了。用起来真的很爽！ 还有一个就是，如果你用谷歌调试的时候，会发现，效果是这样的： ? 对，就是会出现一个明显的滚动条。但是如果你用真机，也就是用移动设备看的时候，你会发现其实滚动条是不会出现的。
通常我们再滑屏页面，会调用event的preventDefault()可以阻止默认情况的发生：阻止页面滚动 touchend——当手指离开屏幕时触发 touchcancel——系统停止跟踪触摸时候会触发 例如在触摸过程中突然页面alert()一个提示框，此时会触发该事件，这个事件比较少用 4、移动端click屏幕产生200-300 ms的延迟响应 移动设备上的web网页是有300ms延迟的，玩玩会造成按钮点击延迟甚至是点击失效 ; /* 方法1 */ -webkit-appearance: none; /* 方法2 */ } 16、 快速回弹滚动 我们先来看看回弹滚动在手机浏览器发展的历史： 早期的时候，移动端的浏览器都不支持非 ） */ -ms-user-select: none; /* IE 10+ */ } 18、移动端取消touch高亮效果 在做移动端页面时，会发现所有a标签在触发点击时或者所有设置了伪类 fastclick 加快移动端点击响应时间 animate.css CSS3动画效果库 Normalize.css Normalize.css是一种现代的、CSS reset为HTML5准备的优质替代方案
在移动前端开发中添加一些webkit专属的HTML5头部标签，帮助浏览器更好解析html代码 <! DOCTYPE html> 使用 HTML5 doctype，不区分大小写 <head lang=”en”> 标准的 lang 属性写法 <meta charset=’utf-8′> 声明文档使用的字符编码 meta name=”viewport” content=”initial-scale=1, maximum-scale=3, minimum-scale=1, user-scalable=no”> 为移动设备添加
既然都是前端开发，两者肯定有紧密的联系，移动前端开发和web前端开发其实都属于前端开发的范围，目前前端发展的趋势就是大前端，可以说是包罗万象，当然也就包含PC端和移动端领域，而现在的前端开发人员也已早就不是当年的切图仔了 所以不论是想做移动前端开发还是web前端开发，这三样基础技术都必须熟练掌握。 移动前端开发和web前端开发都属于前端开发，那具体又有什么区别呢？ 1、业务的应用场景 web前端开发主要指传统的PC端网页开发，页面主要是运行在PC端浏览器中，移动前端开发出来的页面主要是运行在手机上；直观上会感觉，PC端页面大一些，移动端页面小一些，但是根据开发经验 2、新技术的使用 由于在移动端主要以webkit内核为主，对于HTML5等新技术支持的更好，所以可以更大范围的使用新技术;而PC端开发由于很多场景下要求兼容IE等老版本浏览器，出于浏览器兼容性的考虑，有些情况下限制了新技术的使用 3、页面的适配性 传统PC端的页面开发一般都会选择给页面设定一个固定宽度，两侧有留白，但是移动端的页面由于其载体手机屏幕比PC要小很多，一般都会选择尽可能多的在手机屏幕上显示内容，这就要求移动端页面要能够充分适应各种屏幕尺寸的手机并进行最大程度的利用
---- Scaffold Widget and TabBar Widget（脚手架及切换组件） scaffold 是 Materrial 库中提供的一个脚手架，可以帮助开发者更快的完成功能页的开发 ---- 本篇到此完结，更多 Flutter 跨平台移动端开发 原创内容持续更新中~ 期待您 关注 / 点赞 / 收藏 向着 大前端工程师 晋级！ ----
腾讯移动金融开发平台(TMF)为银行、互联网金融、保险、证券客户提供一站式、覆盖全生命周期的移动金融服务。核心服务包括APP客户端开发组件、应用加固、环境安全检测等APP开发运营关键服务，帮助金融机构低成本、高效率地打造移动金融服务…...
扫码关注云+社区
领取腾讯云代金券
云服务器
测试服务 WeTest
文件存储
SSL 证书
WordPress