自适配PC终端的多核浏览器应用设计.docxVIP

??

?

??

自适配PC终端的多核浏览器应用设计

?

??

?

?

?

?

?

?

?

???

?

?

?

?

?

2国网甘肃省电力公司信息通信公司甘肃省兰州市730050

3国网甘肃省电力公司甘肃省兰州市730010

4国网甘肃省电力公司信息通信公司甘肃省兰州市730050

摘要：随着电力行业信息化的发展，各单位各部门的办公系统数量众多，各系统对浏览器的品牌和版本要求不同，而且实际上大家的电脑显示器的尺寸和分辨率也都不一致。本文对目前系统所需的浏览器和显示器现状进行阐述。首先简单介绍各系统兼容的浏览器，其次分析浏览器最佳的显示器尺寸和分辨率从而引出自适应PC浏览器的概念。然后简单介绍了自适配PC终端多核浏览器的自适应功能和实现技术，最后对本文进行总结，并且讨论自适配PC终端多核浏览器目前存在的问题，以及解决方法的发展趋势。

关键词：浏览器；分辨率；兼容；自适应

1概述

随着互联网行业的发展，电力相关公司各单位各部门基本上实现了无纸化、智能化办公，随之而来的就是种类繁多的办公系统，用户需安装不同浏览器版本支持日常办公，登录不同业务系统需切换不同的浏览器。

公司安装电脑操作系统均默认安装IE浏览器，但公司部署实施的部分Web系统仅支持特定品牌的浏览器和版本，使用时必须安装指定浏览器，导致一线员工需重新安装多个品牌的浏览器，在处理多个系统业务时需频繁切换浏览器增添一线人员办公负担；二是由于公司从2019年采购的办公台式机只能安装WIN10操作系统，WIN10系统只兼容IE11、Chrome49-70、Firefox50-60等浏览器，导致公司基于IE8或IE8以下版本开发的系统无法正常登陆，影响一线人员正常办公。

2自适配PC浏览器

随着互联网技术不断发展,越来越多的应用转移到Web平台上实现,进而使得Web应用的功能和交互变得越来越复杂。为了适应丰富而复杂的功能,Web应用平台技术得以快速的发展。实现一种全新的面向Web端的自适配浏览器呼声越来越大。

自适配的概念：2010年，EthanMarcotte提出了自适应网页设计（ResponsiveWebDesign）这个名词，指可以自动识别屏幕宽度、并做出相应调整的网页设计。他制作了一个范例，里面是《福尔摩斯历险记》六个主人公的头像。如果屏幕宽度大于1300像素，则6张图片并排在一行。如果屏幕宽度在600像素到1300像素之间，则6张图片分成两行。如果屏幕宽度在400像素到600像素之间，则导航栏移到网页头部。如果屏幕宽度在400像素以下，则6张图片分成三行。

多核浏览器集成了IE各版本内核、Chrome内核和Firefox内核于一体、用户在通过浏览器访问业务系统时，浏览器会根据预设内核信息自动判断业务系统访问需要的浏览器内核；如果业务系统没有提前预设浏览器内核匹配，则浏览器会对业务系统进行分析，自动匹配合适浏览器内核进行访问。

3多核浏览器的自适配

考虑到不同电脑屏幕尺寸，解决样式发生改变的情况，主要是采用自适应来解决高度、宽度以及图片自适应的问题。如下：

①最小尺寸分辨率1024*768（传统17寸显示器），则可以采用940px、960px、或者常用的980px作为最小宽度。

②1024*768之后稍大的分辨率就是1280*768了，则可以采用1200px或者1220px作为稍大的网页宽度。

③支持css3、html5的高级浏览器可以利用CSS3MediaQueries让网页在不同分辨率下自动调节布局标签。

④不支持css3、html5的脑残浏览器特别是=ie8系列则需要用js以及resize事件来控制html的布局标签宽度了。

⑤宽度自适应需要对每个显示模块进行不同宽度的计算，在做html布局时需要大量的计算与适配。

⑥宽度自适应为不同宽度显示器写布局元素时常用的css。

4浏览器自适应实现的技术

4.1Web服务概述

Web服务(WebService)是一种部署在Web上的对象或者组件，它描述一系列操作的接口，它使用标准的规范的XML描述接口[1]。从表面上看WebService就是一个应用程序，它向外界暴露出一个能够通过Web进行调用的API，服务使用者能够用编程的方法通过Web来调用这个应用程序。Web服务通常具有以下特性[2]：

①Web服务具有自包含的特性。这是因为Web服务只需要被调用即可获得它的功能而不需要为所需的功能编写相关的代码。在客户端不需要专门安装软件，只需要能够连接到服务器端的服务容器即可。

②Web服务具有自描述的特性。因为Web服务是松耦合的，在服务调用时，客户端和服务器端都只关心请求和响应消息的格式和内容。在使用中可以跨越因特网发布定位、调用Web服务。

③Web服务具有跨平台的特性。在服务调用的过