移动端web界面开发

根据2017年大公司的市场分析报告，移动端用户上网人数和上网时间已经突飞猛进，相信在5G的环境中，更多人会选择便捷的移动端进行浏览网页获取信息。移动端界面开发也更加重要。

移动端网页前端开发和传统PC端开发有不少异同点。

1.移动端由于屏幕较小，为提高用户体验，设置单个网页内容远远小于PC端（网页HTML结构相对简单），小部件和格式处理更便捷。PC端富含更多信息，细节更丰富（导航网站或者购物网站尤为明显）

2.移动端不需要考虑浏览器兼容性，PC端需要考虑浏览器兼容性（当然，看具体的项目要求）。移动端网页发展近几年才迅速发展，所以浏览器版本相对较新，基本上新增H5和C3的内容可以放心使用。PC端浏览器兼容性不用说，四大厂家都是泪。

3.移动端设备尺寸多样。不管是早期的iPhone，还是ipad，或者国内多种厂商的多种屏幕界面（眼花缭乱中），屏幕的尺寸会影响网页的显示效果。通常，PC端布局相对简单（很少有用户切换浏览器的尺寸，如果有八成是前端和测试人员）。移动端浏览器布局样式也有很多，flex布局，流式布局，响应式布局，rem布局等都是主流的布局方式。使用什么布局需要根据用户的需求。

那么移动端前端开发未来的方向在哪里？

前几年由于网速有限流量很贵，移动端设计的原则是简单（很多人不提倡使用太多插件，以节约流量）。我想，在wifi和4G迅速发展的现在，用户每月都有nG流量，以后的5G时代流量已经不是问题，所以，关键在于用户体验和新内容新元素的使用。例如，现在很火的H5效果，以及相应的音频视频功能，都逐渐成熟。上周末参加腾讯云的新媒体介绍会，产品经理也介绍了相关发展情况。新技术也保证了浏览器端和服务器端进行不同的渲染计算。未来前端在规范的基础上，会有重大突破，值得期待！

 

2019-3-20 更新

实际上，对于移动端的处理目前分为两种情况：

大公司：通常对于传统网页端和移动端分别做两套不同的前端界面（例如淘宝京东等电商平台）。网页端显示的细节更多，按钮和用户交互比较多，通常在一个平面（图层，z-index 中显示不同的功能）。对于移动端，设置SPA，单页中不同的z-index或者model中显示不同的功能，而不是直接在界面中跳转。如果做两套界面，那么分别做两组界面，判断屏幕宽度后进行加载。

小公司：使用一个界面实现移动端和PC端兼容。