这几年随着移动设备的不断普及, 使用手机和平板电脑观看网页的几率大增, 因此, 网页从简单的HTML进化到必须符合各种分辨率的屏幕, 这是一个不可避免的趋势。

目前开发针对于移动设备的APP非常流行, 各大网站都有其相应的APP。但是在学习编写APP的时候, 我感觉到有几个问题值得探讨。第一, 现在最流行的手机操作平台有两个:Android和IOS, 其编程难度都不低;第二, 与网站可以直接浏览不同, 使用者必须另外下载APP。当然另外写一个APP可以提供更具有针对性的服务, 但是提供一个手机浏览器可以浏览的版本也是必要的。

1、使用React.JS开发自适应网站

对于开发自适应网站而言, 在现在发达的开源社区中, 我们有很多可以使用的好东西。Bootstrap3和React.JS就是其中的佼佼者。

Bootstrap是一个前端的Framework, 可以使我们节省很多花费在编写CSS身上的时间。作为设计自适应网站的重点, CSS具有比较容易的会有硬件加速等的优化;另外, 为了提高效率, 能用CSS做到的, 就尽量不要用Java Script来实现。

React.JS (以下简称React) , 是Facebook底下的开源项目, Instagram就是使用React开发的。React是个JS框架, 同时也是个新的网页开发概念。随着这几年来的蓬勃发展, 一直不断推陈出新, 甚至可以用来开发i OSApp。

React让网页开发变成一种简单的概念。和以往使用JQuery或是其他的套件有很大不同的是, React把网页中的元素当成一个一个的“组件”, 先定义“组件”, 再将“组件”塞进网页中。这样的做法有几个好处:第一、我们可以重复使用相同的组件, 却只要定义一遍;第二、我们可以享有React提供的渲染优化。所谓的渲染优化, 就是React对于网页内容呈现的处理方式加以优化的算法。在呈现一个新网页之前, React会先将新旧网页的内容加以比较, 找出两者相异之处后, 再以修改旧网页的文件对象的方式达成新网页的呈现。相较于传统浏览器整个重新剖析计算新网页, React可以让浏览器呈现网页的效率大为增进。

使用React, 网页分成了“组件”和“数据”, 只要管理数据, 让React来负责渲染。这样的作法, 我们可以很容易地开发出一个纯AJAX网站, 让网页加载后, 便不再需要重新整理, 全部使用JS去抓“数据”。还有一个好处就是不用再为处理这些数据而伤透脑筋, 只要将数据放进该放的地方就好。使用React的数据流写前端的时候, 我们只要考虑整体, 而不用考虑细节。而分工从一般网页设计上的功能性分工, 变成“组件”各自处理自己的部分, 而“组件”中还可以迁入其他组件, 形成一个数据流。

2、开发中遇到的问题

3.1 旧版IE浏览器

因为IE老旧, 而有些地方又常常指定使用旧版IE (如IE8) , 导致目前还有大量旧版IE使用者。

IE11是一款可支持HTML5标准的浏览器, 所以我选择支持。当然, 我们还是必须另外写一些程序代码让网页支持IE11。

使用最新的浏览器, 我们可以使用最新的标准来编写网站, 而不用迁就旧版IE浏览器, 套件也可以用最新版。最新版往往功能较多或是效率较高, 如JQuery 2.X以后版本不支持旧版IE。

3.2 不同的浏览器

每个浏览器的行为和支持的JS、CSS方法不同, 撰写自适应网站一定要用各种浏览器测试, 不然就会出现意外的状况。如果不想使用太多浏览器, 除了Chrome外, 至少还要再使用Fire Fox, 因为Fire Fox是一款非常遵守HTML5标准的浏览器。

3.3 不同的屏幕大小

这是一个基本的问题, 不同屏幕大小会影响你的网页浏览模式, 有些时候不是调整一下DIV宽度就可以解决的。

诸如此类还有一些按钮、表格等, 如果可以的话, 一开始就设计一个可大可小的显示方法, 不然的话, 就必须针对不同的大小, 提供不同的网页设计。手机优先是现在的主流, 设计样式时以小屏幕设计常常可以得到比较好的效果。

3.4 操作的模式和JS事件

手机上的触控, 是不适用鼠标事件的, 而是另外定义一个“触控事件”, 还有手机上不容易触发Hover事件, 有些因为手机屏幕小, 很难进行精准的点击。根据上述原因, 设计自适应网页给手机使用者使用时, 一定要注意按钮的大小不能太小, 也不要在网页上放太多Hover的事件, 如果有用到mousedown、mouseover等鼠标事件, 也一定要注意另外定义touchstart、touchmove事件。

3.5 不要使用外挂功能, 如Flash

这里的外挂指标准 (HTML/CSS/JS) 之外的网页外挂工具, 像是Flash, 因为手机版浏览器可能不支持这些外挂, 很难跨平台。现在的Android已经预设不使用Flash了, HTML5标准中也有很多更好用、效率更高的对象能够取代Flash, 现在我们有更好的选择, 使用大量外挂开发网页的时代已经过去了。

3.6 网页加载速度

其实这个问题不只在自适应网站上会有, 一般网站也该注意。

使用了很多套件、自适应的CSS档案, 我们的网页常常会很肥大, 尤其是移动设备常常不会有良好的网络环境, 浏览网站一次可能就要加载好几秒甚至几分钟。

尽量不要加载不必要的CSS、JS, 然后启用压缩功能, 把空白和换行压缩掉, 并用gzip压缩, 大概可以让整个网页变成原本的20%甚至更小。