web移动端开发？

时间：2023-12-05 06:00:02 | 来源：网站运营

时间：2023-12-05 06:00:02 来源：网站运营

web移动端开发？：感谢邀请

关于Web移动端的开发，给你一个详细的介绍

移动端开发分类

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）

<!--viewport只有移动端才能识别-->

<!--设置宽度 设置成和设备一样的宽度(width=device-width)-->

<!--设置默认的缩放比 initial-scale =1.0-->

<!--设置是否允许用户自行缩放 user-scalable：no or yes-->

2.3 设置方法

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no">

3 移动端适配布局

使用百分比自适应布局（流式布局）同时需要对移动端的viewport视口进行设置，就可以达到适配的目的。

3.1 流体布局+少量响应式

流体布局：使用百分比来设置元素的宽度，元素的高度按实际高度写固定值，流体布局中，元素的边线（border）无法用百分比，可以使用样式中的计算函数calc()来设置宽度，或者使用box-sizing属性将盒子设置为边线计算盒子尺寸。

响应式布局：使用媒体查询的方式，通过查询浏览器的宽度，不同的宽度应用不同的样式块，每个样式块对应的是该宽度下的布局方式，从而实现响应式布局，响应式布局的页面可以适配多种终端屏幕（pc、平板、手机）。

3.2 基于rem的布局

rem指的是参照根节点的文字大小，根节点指的是html标签，设置html标签的大小，其他的元素相关尺寸设置用rem。这样，所有元素都有了统一的参照标准，改变html文字的大小，就会改变所有元素用rem设置的尺寸大小。

手机和PC端分开来写，只是 狭义响应式设计 的一种发展和延伸罢了。他们的界限没有，也并不需要那么清晰。

移动端/PC端网页开发建议

根据你的产品特点，进行两种不同的设计，
根据你的设计需求，选择合适的技术方案。

A与B不是硬币的正反面，它们为了解决同一个问题而生，它们是同一种思想的延伸。

其实无论是什么解决方案，我们先来看看我们想要解决的问题：

“屏幕尺寸越来越多，不同设备的交互特质也有着巨大的差别，我们希望我们的网站能够在移动手机、平板、桌面电脑，在键鼠、触摸、无障碍设备上都有优秀的用户体验。所以，我们需要网站的用户界面在不同的平台上有所不同。”




那怎么做呢，一个解决方案应运而生：

响应式设计 (Responsive Web design)

狭义上，我们把主要依靠前端 CSS （包括 Media Query 媒体查询，百分比流式布局，网格与Typography系统……）来对各种屏幕尺寸进行响应的做法，称之为响应式布局，又称作自适应网页设计，或者弹性设计。

这种主要依靠CSS的方案有很多优点，比如：

设计元素很容易被复用，设计成本低

前端只需要维护一套CSS代码，维护成本低

桌面端与移动端的设计十分接近，令用户感到“熟悉”

不需要任何服务器端的支持

与业务耦合程度低，复用程度高（ 以至于 Bootstrap、Foundation 等一干框架都跟进了这个解决方案 ）

但问题也很明显，比如：

设计需求复杂时，前端的开发成本没有任何减轻

无论是针对桌面还是移动的CSS代码（甚至图片资源文件）都会被同等的下载到客户端（没有考虑移动端的网络优化）

如果JS不写两套，桌面端的交互和移动端的交互很难针对平台作出差异

如果你的移动用户对网站所有的功能和内容有着与桌面用户同等的需求，比如 新闻、报纸（媒体类）网站，或者活动、专题页等 偏重信息传达而轻交互 的网站，那么这个解决方案其实恰到好处：
触摸屏优化（胖手指）、减少次要信息…… 这些通过 CSS 解决就够了。




但是，如果我想要做更多的 「移动化设计」，比如 减少信息层级、增强手势操作、让网页更接近一个Native App ？

好吧，为了更复杂的需求，为了我们的网站能更牛逼的 「响应」 各个平台，
又有了这些解决方案：

服务器端（后端）：

RESS （Responsive Web Design with Server Side Components）通过服务器端组件的响应式网页设计

提倡 RESS 的人认为：基于前端 CSS 的响应式方案只是一种妥协：

“ UI 只是在很被动的进行「调整」，而不能真正达到各个平台的最优。好的设计应该达到「这个设备该有的体验」（Device Experiences）。 ”

RESS 的本质还是服务器端动态的生成，返回 HTML、JS、CSS、图像等资源文件，但是只使用同一个 URL 就可以提供给移动端定制化更强的网页，同时还大大节省了网络资源。

前端（主要是JS），比如：

在 JavaScript 中实现两套逻辑，分别兼容键鼠、触摸设备

通过 UA、特性检测 在前端做设备判断，对资源进行异步加载，渲染不同模版

通过 特性检测 在前端做设备判断，使用不同的业务逻辑

前端的模块化也可以帮助解决这个问题，比如针对不同的平台加载不同的模块

……

这下，我们的网站可以更牛逼的 “响应” 各个平台了。
（对，我还是称之为响应：这的确还是在“响应”啊 ，不是吗？）




但是等下……
后端开发成本上去了，前端开发成本也上去了，配合着估计产品、设计资源也都上去了，那我们为什么不干脆把 移动设备网站 和 桌面设备网站 分开呢！？




是啊，如果你的需求真的都到这一步了，你的移动网站也应该可以被称作 WebApp 了。这种时候，把移动设备网站彻底分开或许真的是更好的选择。

开发资源如此充足，你还可以让专门的团队来维护移动端的网站。
（嗯，BAT 就是这么干的）

于是又一个概念来了：

独立的移动版网站 （按题主的话来说：手机和PC端分开来写）

不过，它有那么独立么？
我们知道，我们访问网站是通过 URL 来访问的。
将移动网站 和 桌面网站 分开，如果不使用 RESS 技术，往往也就意味着要维护两个URL（不同的二级域名）
难道我们要让所有桌面用户自觉访问 http://taobao.com ，所有 移动用户 都自觉访问 http://m.taobao.com ？

不可能吧

于是，我们还是得依靠前端或服务器端的一次 “响应”（设备检测），做 URL 重定向，才能将不同设备的用户带到那个为他们准备的网站。