【技术实现步骤摘要】
本申请涉及网页，尤其涉及一种网页自适应排版方法、排版装置及计算机设备。
技术介绍
1、随着互联网技术的不断发展，网页已经成为人们获取信息、进行交流的重要平台。然而，由于不同设备的屏幕大小和分辨率不同，网页在不同设备上的显示效果也会有所不同，这给用户带来了不便。
2、目前，常见的网页排版方式主要是基于固定像素或百分比进行布局。然而，这种排版方式存在一些问题。首先，固定像素布局方式无法适应不同屏幕尺寸和分辨率的设备，导致网页在不同设备上的显示效果差异较大。其次，百分比布局方式虽然能够根据窗口大小进行自适应调整，但在某些情况下可能会导致元素之间的比例失调，影响用户体验。
技术实现思路
1、本专利技术的主要目的在于提供一种网页自适应排版方法，旨在提供一种能够自适应不同屏幕尺寸和分辨率的网页排版方法。
2、为实现上述目的，本专利技术提供一种网页自适应排版方法，所述方法包括：
3、基于浏览器dom对象和screen对象，确定浏览器的类型，并确定与所述浏览器的类型对应的浏览器监听信息的方法；
4、根据浏览器监听信息的方法，获取浏览器窗口的适配区信息，以生成对应的浏览器的屏显信息；
5、根据浏览器的屏显信息，计算网页元素的缩放比例，并确定网页元素的transform属性；
6、根据网页transform属性和预设布局模型，调整网页中各元素对应的位置和对应的大小。
7、可选地，所述根据浏览器监听信息的方法，获取浏览器
8、根据浏览器监听信息的方法，通过监听浏览器窗口的resize事件，获取浏览器当前窗口的宽度和高度；
9、基于浏览器对应的api信息、所述窗口的宽度以及所述窗口的高度，获取页面的分辨率信息；
10、根据所述窗口的宽度、所述窗口的高度以及页面分辨率信息，生成对应的适配区信息，以生成对应的浏览器的屏显信息。
11、可选地，所述基于浏览器对应的api信息、所述窗口的宽度以及所述窗口的高度，获取页面的分辨率信息，以生成对应的浏览器的屏显信息的步骤，包括：
12、根据所述浏览器对应的api信息，获取浏览器支持的分辨率范围；
13、根据所述窗口的宽度、所述窗口的高度以及所述分辨率范围，确定最佳的页面的分辨率信息，以生成对应的浏览器的屏显信息。
14、可选地，所述根据浏览器的屏显信息，计算网页元素的缩放比例，并确定网页元素的transform属性的步骤，包括：
15、基于浏览器的屏显信息，确定所述网页元素的原始尺寸和原始位置；
16、根据浏览器的屏显信息中的页面分辨率、浏览器窗口宽度以及浏览器窗口高度，计算出至少一个缩放因子；
17、利用计算出的缩放因子，对网页元素的原始尺寸进行缩放，得到缩放后的尺寸；
18、根据缩放后的尺寸以及原始位置，确定网页元素的transform属性。
19、可选地，所述根据缩放后的尺寸以及原始位置，确定网页元素的transform属性的步骤，包括：
20、根据缩放后的尺寸以及原始位置，计算网页元素在浏览器窗口中的新位置；
21、根据所述新位置以及所述原始位置，计算所述网页元素的平移值，并将所述平移值设置到所述transform属性的translate函数中。
22、可选地，所述根据网页transform属性和预设布局模型，调整网页中各元素对应的位置和对应的大小的步骤，包括：
23、根据网页transform属性，确定网页中各元素的变换参数；
24、根据所述变换参数的位置因子以及所述预设布局模型，调整网页中各元素在布局模型中的相对位置；
25、根据所述变换参数中的缩放因子，调整网页中各元素在布局模型中的相对大小。
26、可选地，所述根据网页transform属性，确定网页中各元素的变换参数的步骤，包括：
27、根据网页transform属性，提取各元素的缩放因子、旋转角度和平移值；
28、根据所述缩放因子，确定各元素在水平方向和垂直方向上的缩放比例；
29、根据所述平移值，确定各元素在水平方向和垂直方向上的平移距离；
30、根据所述缩放比例、平移距离以及旋转角度，确定网页中各元素的变换参数；
31、所述根据所述变换参数中的缩放因子，调整网页中各元素在布局模型中的相对大小的步骤，包括：
32、根据元素的缩放因子，对元素的原始尺寸进行等比例缩放，以保持元素的宽高比不变；
33、将缩放后的元素尺寸应用到布局模型中，以更新元素在网页中的显示大小。
34、可选地，还包括：
35、获取用户反馈的布局效果，生成对应的反馈结果；
36、根据所述反馈结果，优化调整所述网页transform属性以及预设布局模型。
37、此外，为实现上述目的，本专利技术还提供一种排版装置，所述排版装置包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的网页自适应排版程序，所述网页自适应排版程序配置为实现如上所述的网页自适应排版方法。
38、此外，为实现上述目的，本专利技术还提供一种计算机设备，包括如上所述的排版装置。
39、本专利技术实施例通过采用基于浏览器dom对象和screen对象，确定浏览器的类型，并确定浏览器监听信息的方法，再获取浏览器窗口的适配区信息，以生成对应的浏览器的屏显信息，再计算与浏览器的屏显信息对应的网页元素的缩放比例，并确定网页元素的transform属性，从而与预设布局模型结合，从而调整网页中各元素对应的位置和对应的大小，实现了一种高度灵活且适应性强的网页排版方案，能够自适应不同屏幕尺寸和分辨率。
本文档来自技高网...【技术保护点】
1.一种网页自适应排版方法，其特征在于，所述方法包括：
2.根据权利要求1所述的网页自适应排版方法，其特征在于，所述根据浏览器监听信息的方法，获取浏览器窗口的适配区信息，以生成对应的浏览器的屏显信息的步骤，包括：
3.根据权利要求2所述的网页自适应排版方法，其特征在于，所述基于浏览器对应的API信息、所述窗口的宽度以及所述窗口的高度，获取页面的分辨率信息，以生成对应的浏览器的屏显信息的步骤，包括：
4.根据权利要求1所述的网页自适应排版方法，其特征在于，所述根据浏览器的屏显信息，计算网页元素的缩放比例，并确定网页元素的transform属性的步骤，包括：
5.根据权利要求4所述的网页自适应排版方法，其特征在于，所述根据缩放后的尺寸以及原始位置，确定网页元素的transform属性的步骤，包括：
6.根据权利要求1所述的网页自适应排版方法，其特征在于，所述根据网页transform属性和预设布局模型，调整网页中各元素对应的位置和对应的大小的步骤，包括：
7.根据权利要求6所述的网页自适应排版方法，其特征在于，所
8.根据权利要求1至7任一项所述的网页自适应排版方法，其特征在于，还包括：
9.一种排版装置，其特征在于，所述排版装置包括：存储器、处理器及存储在所述存储器上并可在所述处理器上运行的网页自适应排版程序，所述网页自适应排版程序配置为实现如权利要求1至8中任一项所述的网页自适应排版方法。
10.一种计算机设备，其特征在于，包括如权利要求9所述的排版装置。
...【技术特征摘要】
1.一种网页自适应排版方法，其特征在于，所述方法包括：
2.根据权利要求1所述的网页自适应排版方法，其特征在于，所述根据浏览器监听信息的方法，获取浏览器窗口的适配区信息，以生成对应的浏览器的屏显信息的步骤，包括：
3.根据权利要求2所述的网页自适应排版方法，其特征在于，所述基于浏览器对应的api信息、所述窗口的宽度以及所述窗口的高度，获取页面的分辨率信息，以生成对应的浏览器的屏显信息的步骤，包括：
4.根据权利要求1所述的网页自适应排版方法，其特征在于，所述根据浏览器的屏显信息，计算网页元素的缩放比例，并确定网页元素的transform属性的步骤，包括：
5.根据权利要求4所述的网页自适应排版方法，其特征在于，所述根据缩放后的尺寸以及原始位置，确定网页元素的transfor...
【专利技术属性】
技术研发人员：陈宇翔，林伟盛，
申请(专利权)人：深圳洽客科技有限公司，
类型：发明
国别省市：
还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。