移动端开发之webapp开发

1 移动端开发分类1.1 Native App 原生App开发长处：

（1）用户体会好

（2）功能安稳

（3）操作速度快

（4）能够拜访本地资源（通讯录，相册）

（5）能够规划超卓的动效，转场

（6）具有系统等级的贴心告诉或提醒

（7）用户留存率高缺陷：

（1）开发本钱高

（2）维护本钱高

（3）更新缓慢，根据不同渠道，提交–审核–上线流程较杂乱。总的来说，native app开发从android、ios智能手机呈现就有了开发技能，功能体会最优，API比较完善，可是学习起来难度比较高，开发本钱比较高（跟开发周期相对来说比较长也是有联系的）。

2 Web App 网页App开发长处：

（1）发版彻底自控，随时更新

（2）跨渠道，由于本身来说用的是Web的东西，所以能够在恣意渠道上运行

（3）本钱小，Web页面嵌入Webview开发起来速度非常快，一个人就能够轻松搞定缺陷：

（1）功能差

（2）弱网络或无网络条件下体会差

（3）适用有展示类需求的项目，可是假如要完成的功能比较杂乱的话就显得力不从心总的来说，相比Native App，Web App体会中受限于网络环境和烘托功能。Web APP对网络环境的依赖性较大，由于Web APP中的H5页面，当用户运用时，去服务器恳求显现页面。假如此刻用户恰巧遇到网速慢，网络不安稳等其他环境时，用户恳求页面的功率大打折扣，在用户运用中会呈现不流畅，时断时续的不良感触。一起，H5技能自身烘托功能较弱：对杂乱的图形样式，多样的动效，自定义字体等的支撑性不强。因此，应留意以下几点：

1.简化不重要的动画/动效；

2.简化杂乱的图形文字样式；

3.削减页面烘托的频率和次数。

3 Hybrid App 混合型App开发长处：

（1）体会好

（2）安稳性强动态性强

（3）本钱相对低跨渠道缺陷：对团队技能栈要求相对高功能优化Hybrid App就是Native结合Web混合开发，Native+JS代码代表作是cordova前身是phonegap，现在移交给Apache，中心JsBridge，JS调Java，Java调JS。由于混合开发，所以体会挨近原生、安稳性强并且发版快。

2 Viewport视口

2.1 视口视口是移动设备上用来显现网页的区域，一般会比移动设备可视区域大，宽度可能是980px或许1024px，意图是为了显现下整个为PC端规划的网页。这样带来的后果是移动端会呈现横向滚动条，为了避免这种状况，移动端会将视口缩放到移动端窗口的巨细。这样会让网页不容易观看，能够用meta标签，name="viewport"来设置视口的巨细，将视口的巨细设置为和移动设备可视区相同的巨细。在移动端用来承载网页的这个区域，就是我们的视觉窗口，viewport（视口），这个区域能够设置高度宽度，能够按份额放大缩小，并且能设置是否答应用户自行缩放。

2.2参数阐明width：宽度设置的是viewport宽度，能够设置device-width特殊值initial-scale：初始缩放比，大于0的数字maximum-scale：大缩放比minimum-scale：最小缩放比user-scalable：用户是否能够缩放，yes或no（1或0）

2.3 设置方法3 移动端适配布局运用百分比自适应布局（流式布局）一起需要对移动端的viewport视口进行设置，就能够到达适配的意图。

3.1 流体布局+少量呼应式流体布局：运用百分比来设置元素的宽度，元素的高度按实际高度写固定值，流体布局中，元素的边线（border）无法用百分比，能够运用样式中的计算函数calc()来设置宽度，或许运用box-sizing属性将盒子设置为边线计算盒子尺度。呼应式布局：运用媒体查询的方法，经过查询浏览器的宽度，不同的宽度应用不同的样式块，每个样式块对应的是该宽度下的布局方法，然后完成呼应式布局，呼应式布局的页面能够适配多种终端屏幕（pc、平板、手机）。

3.2 根据rem的布局rem指的是参照根节点的文字巨细，根节点指的是html标签，设置html标签的巨细，其他的元素相关尺度设置用rem。这样，一切元素都有了统一的参照规范，改动html文字的巨细，就会改动一切元素用rem设置的尺度巨细。

声明：本文来源网络资料收集整理，如有侵权，及时告知我们给予删除。

分享名称：移动端开发之webapp开发
文章位置：/news31/218231.html

成都网站建设公司_创新互联，为您提供移动网站建设、定制网站、App设计、品牌网站建设、品牌网站制作、网站导航

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联