一种网页布局方法、终端装置、系统及电子设备与流程

本发明属于计算机，具体涉及一种网页布局方法、终端装置、系统及相应的电子设备。

背景技术：

1、随着计算机技术和互联网技术的发展，浏览网页已经关系到工作生活的方方面面。用户可以通过不同的显示终端来浏览网页，例如通过不同屏幕尺寸的智能移动终端，以及应用日益广泛的数字大屏显示页面等。特别是智能移动终端的普及，用户使用不同尺寸的屏幕来访问网页愈加频繁，用户对于多设备和多屏幕的需求呈现出多样性和复杂性。

2、具体来说，传统的网页设计主要以固定布局为主，这在大屏幕设备上表现得不错，但在小屏幕上则存在明显的问题。网页内容无法适应小屏幕，导致用户需要不断放大和滑动以查看完整信息，既不友好也降低了用户体验。

3、现有技术中，为了解决多设备显示的问题，引入了响应式设计，现有响应式设计存在需要克服的缺陷，例如：难以提供足够的像素精细度，无法满足对于各种尺寸屏幕的精准适应。此外，在某些情况下，现有响应式设计导致在小设备上加载不必要的大型资源，影响性能。

4、由于现有技术的限制，面临以下主要问题：针对大屏幕设计的资源在小屏幕上加载过于冗余，导致加载时间延长；不同显示设备存在多样化、差异化的显示特征信息，现有的方案一般基于单一显示特征信息响应，难以涵盖所有设备的特殊需求。当某些设备需要特定的优化和适应性规则，则采用现有的适配方案会变得更加复杂。特别在用户切换设备或改变手持姿势时，过于繁琐或耗时的适配方案并不可行，会明显影响用户的体验。现有技术在实际应用中仍存在较多的局限性，适用场景特定，不灵活，可扩展性差，无法同时满足用户体验、性能和可维护性等方面的实际需求。

5、可知，现有技术不能满足用户对于不同尺寸屏幕上无缝、流畅网页体验的期望。因此，需要一种更智能、更灵活、更高效的网页布局方法，以确保在各种设备上都能提供一致而且令人满意的用户体验。这也是新的网页设计和响应式布局技术的发展需求和趋势。

6、因此，亟需开发一种网页布局方法、终端装置、系统及相应的电子设备，进一步完善自适应网页布局的应用效果且兼顾资源利用效率，以此推动计算机技术的深层次发展。

技术实现思路

1、本发明是为解决上述现有技术的全部或部分问题，本发明一方面提出了一种网页布局方法，基于前端技术，使网页在不同屏幕尺寸上能够动态调整布局，能够自动适应不同设备的屏幕尺寸，并提供更广泛的设备兼容性。本发明另一方面提供了基于前端技术的自适应网页布局终端装置及系统，能够实际地实施网页布局方法，既能满足用户获取更佳浏览体验的实际需求，也为开发人员提供一种灵活、易于实施的平台，使其能够轻松地开发出适应不同设备和屏幕尺寸的网页。本发明还提供了相应的电子设备，能够运行执行本发明的网页布局方法，适应实际显示界面展现网页。

2、本发明一方面提供的一种网页布局方法，包括：获取当前显示设备的显示特征信息；基于预定义的布局规则库，确定与所述显示特征信息匹配的目标布局规则；按照所述目标布局规则配置当前网页的结构和样式；其中，所述显示特征信息包括：屏幕信息和显示方向信息；所述屏幕信息包括屏幕二维尺寸信息；所述布局规则库包含根据不同的显示特征信息对应定义的多个布局规则所述布局规则包括网页所加载元素的位置、大小、间距。

3、通过综合考虑不同显示设备的多样化显示特征信息，包括屏幕尺寸(高度、宽度)和显示方向(横屏或竖屏显示)等，预定义对应的布局规则并获取所述显示特征信息，且所述布局规则可以根据实际应用场景日益丰富相应可持续的扩展，有效地增强了网页在多种设备上的适应性；充分利用前端技术通过简单的底层代码可以全面获取显示设备的综合性显示特征信息，而不依赖单一信息，使得用户在屏幕方向变化或屏幕尺寸等变化时依然能够流畅且满意的浏览体验，灵活性更高且可扩展性更强，更重要的是通过更新匹配的布局规则即可实现调整无需占用资源进行计算得到待添加组件的布局约束，兼顾了系统资源利用率的提升和整体性能的优化。此外，通过基于显示特征信息指定匹配的布局规则，确保了在不同设备上网页的结构和样式的一致性。用户能够在不同屏幕上获得相似的布局和同样的内容，提高了整体用户体验的一致性。通过基于不同的显示特征信息预定义布局规则，自动调整布局，开发人员无需手动处理每个设备上的细节问题，提高了前端开发的效率，更有助于降低开发成本，缩短开发周期。

4、一些实施例中，网页布局方法，包括监测所述显示特征信息的变化，实时更新匹配的所述目标布局规则调整当前网页布局。

5、具体的一个实施例中，所述监测所述显示特征信息的变化包括：获取当前网页加载的元素，和/或所加载元素的位置，利用媒体查询监测，判断所述屏幕二维尺寸信息是否发生更改。

6、通过监测显示特征信息的变化，实时更新匹配的布局规则，实现了网页布局的动态调整，且可以在任一项或者几项显示特征信息发生变化时，全面及时的调整，兼顾了资源、效率、效果的均衡优化。

7、一些实施例中，所述布局规则包括：指定加载的元素，所述指定加载的元素包括图像；所述屏幕信息包括像素密度；所述调整当前网页布局的过程包括动态加载适配当前显示设备的图像。

8、动态加载适配当前显示设备的图像的方法包括：通过底层代码设定属性来指定多张备用图像，匹配不同像素密度的屏幕；网页浏览器根据获取的当前显示设备的所述像素密度，从所述备用图像中选择匹配的目标图像进行加载。

9、动态加载适配当前显示设备的图像的方法包括：采用媒体查询，根据获取的当前所述屏幕二维尺寸信息得到当前屏幕的尺寸值，基于所述尺寸值加载图像。判断当前屏幕为大尺寸屏幕或小尺寸屏幕，若是大尺寸屏幕则选用较大尺寸的图像，若是小尺寸屏幕则选用更小尺寸的图像。

10、一些具体的实施例中，所述网页布局方法包括：获取当前浏览器和/或当前操作系统的版本信息，基于当前网页的结构和样式，进行兼容性处理。

11、一些具体的实施例中，所述布局规则包括基于所述显示方向相应定义的不同展示规则；获取所述显示方向信息包括：检测设备的横竖屏状态，并根据检测结果得到当前显示方向为纵向或横向，并对应设定当前页面的展示规则；所述展示规则包括样式代码；所述样式代码表征的属性包括背景颜色。

12、通过将布局规则和样式代码整合到一个动态适应的系统中，可以更容易地维护和更新网页。当需要进行布局调整或样式更改时，只需修改相应的规则和代码，而不必为每个设备和方向创建独立的版本。

13、检测设备的横竖屏状态的方法包括：采用css中的媒体查询或者采用javascript检测。

14、一些具体的实施例中，采用的前端技术包括html、css、javascript、ajax的一种或几种。

15、本发明另一方面提供了一种终端装置，基于前端技术，包括：用于获取显示设备显示特征信息的获取模块、用于预定义和存储不同的(两个以上)布局规则的定义模块、用于响应所述布局规则进行网页设计的布局模块、用于监测所述显示特征信息变化的监测模块、用于响应所述监测模块更新网页布局的调整模块；其中，所述定义模块根据不同显示设备的显示特征信息预定义相应的所述布局规则所述布局模块基于所述显示特征信息，指定匹配的目标布局规则并按照所述目标布局规则设计得到当前网页的结构和样式；所述调整模块被配置为当所述监测模块监测到所述显示特征信息发生变化则实时更新当前匹配的所述布局规则进行调整；所述显示特征信息包括：屏幕信息和显示方向信息；所述屏幕信息包括屏幕二维尺寸信息；所述布局规则包括网页所加载元素的位置、大小、间距。

16、通过动态调整布局规则，可以有选择性地加载适应当前设备的元素，避免不必要的资源浪费，从而优化了网页的加载性能。由于网页能够根据不同设备实时调整布局，用户无论是在大屏幕电脑、平板还是手机上访问网页，都能够获得更好的用户体验，无需手动缩放或滚动页面。通过明确定义布局规则，可以精确控制网页元素的位置、大小和间距，提供更灵活的布局选项，适应差异化的设计需求。

17、有些实施例中，所述终端装置包括图像处理模块；所述图像处理模块被配置为动态加载适配当前显示设备的图像；所述布局规则包括：指定加载的元素，所述元素包括图像；所述屏幕信息包括像素密度。

18、所述终端装置引入图像处理模块的存在使得系统能够动态加载适配当前显示设备的图像，避免加载不必要的大型图像资源，优化了网页的加载性能。

19、有些实施例中，所述终端装置包括兼容处理模块；所述获取模块被配置为获取当前浏览器和/或当前操作系统的版本信息；所述兼容处理模块被配置为响应所述获取模块，基于当前网页的结构和样式，进行兼容性处理。所述布局系统引入兼容处理模块根据当前浏览器和操作系统的版本信息，进行兼容性处理，确保网页在不同浏览器和操作系统上的兼容性。这提高了网页在跨平台环境中的稳定性。

20、本发明也提供了一种网页布局系统，包括：本发明的所述终端装置、服务器单元、数据库单元和通信单元；所述终端装置、所述服务器单元和所述数据库单元通过所述通信单元交互；所述通信单元包括api接口组件。

21、本发明还一方面提供了一种电子设备，包括存储器、处理器，以及一个以上的计算机程序，其中所述计算机程序存储于所述存储器中，且经配置以由若干所述处理器执行本发明一方面提供的所述网页布局方法。

22、本发明还提供了一种电子设备，包括多个电子元件，所述多个电子元件相互通信连接，构成本发明另一方面提供的所述终端装置。所述多个电子元件可以是集成的或是采用分布式设计的互联网系统结构，并不限定。

23、与现有技术相比，本发明的主要有益效果：

24、1、本发明提供的一种网页布局方法，通过综合考虑不同设备的屏幕信息、显示方向信息等显示特征信息，有效地利用前端技术优化了用户在不同设备上及同一设备切换显示方向时的浏览体验，同时也减轻了开发者在多平台适配方面的工作负担，兼顾资源利用和运行效率，可扩展性强、灵活性更好，为适应不断变化的多设备环境提供了积极的解决方案。

25、2、本发明提供的一种终端装置，通过获取模块获取显示设备的显示特征信息，定义模块能够预定义覆盖面更广的布局规则。提前考虑多种设备情况，为每种情况定义相应的布局规则，从而提高网页在各种设备上的自适应性。调整模块能够在监测到显示特征信息变化时实时调用所述定义模块中的匹配的布局规则，从而实现了网页布局的实时调整，保障了用户在设备变化时能够持续获得理想的浏览体验。本发明的系统具有相应的优势。

26、3、本发明提供的一种电子设备，能够自动化实现本发明的网页布局方法，具有相应优势，有利于在实际应用中进一步推广。