行业动态自适应网页设计问题

发布：2019-03-14 13:19:01 浏览：5010

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

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

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

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

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

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

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

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

2、开发中遇到的问题

3.1旧版IE浏览器

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

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

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

3.2不同的浏览器

每个浏览器的行为和支持的JS、CSS方法不同,撰写自适应网站一定要用各种浏览器测试,不然就会出现意外的状况。如果不想使用太多浏览器,除了Chrome外,至少还要再使用FireFox,因为FireFox是一款非常遵守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%甚至更小。