CN117055987A - 网页显示方法、装置、电子设备及计算机可读存储介质 - Google Patents

网页显示方法、装置、电子设备及计算机可读存储介质 Download PDF

Info

Publication number
CN117055987A
CN117055987A CN202310850589.3A CN202310850589A CN117055987A CN 117055987 A CN117055987 A CN 117055987A CN 202310850589 A CN202310850589 A CN 202310850589A CN 117055987 A CN117055987 A CN 117055987A
Authority
CN
China
Prior art keywords
webpage
size
target
display area
web page
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Pending
Application number
CN202310850589.3A
Other languages
English (en)
Inventor
杨泽伟
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Netease Hangzhou Network Co Ltd
Original Assignee
Netease Hangzhou Network Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Netease Hangzhou Network Co Ltd filed Critical Netease Hangzhou Network Co Ltd
Priority to CN202310850589.3A priority Critical patent/CN117055987A/zh
Publication of CN117055987A publication Critical patent/CN117055987A/zh
Pending legal-status Critical Current

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Databases & Information Systems (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • General Physics & Mathematics (AREA)
  • Data Mining & Analysis (AREA)
  • Human Computer Interaction (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本申请公开了一种网页显示方法、装置、电子设备及计算机可读存储介质，该方法包括：获取目标显示区域的尺寸、待显示网页的网页文件以及待显示网页对应的网页设计稿的尺寸；在网页文件中，将待显示网页的网页尺寸调整为目标显示区域的尺寸；根据网页设计稿的尺寸与目标显示区域的尺寸之间的差异，确定待显示网页中的网页元素对应的尺寸缩放方式；根据网页元素对应的尺寸缩放方式，在网页文件中对网页元素的尺寸进行调整；根据调整后的网页文件，进行网页显示。本申请在对网页尺寸和各网页元素的尺寸进行调整的过程中，无需对网页元素进行长度单位转换，这避免了因对网页元素进行长度单位转换而导致存在操作复杂、效率低、易出错的缺陷。

Description

网页显示方法、装置、电子设备及计算机可读存储介质
技术领域
本申请涉及计算机技术领域，具体涉及一种网页显示方法、装置、电子设备及计算机可读存储介质。
背景技术
随着移动互联网和大数据时代的到来，数据可视化在各行各业都变得越来越重要。作为一种可视化展示数据的方式，数据大屏旨在通过网页以图表、地图、文字、图片等形式将海量数据呈现在目标显示区域上，从而帮助用户直观地理解和分析数据，以更快速、更准确地做出决策。然而，由于网页与显示目标显示区域在尺寸上存在差异，导致数据大屏的显示效果常常不尽人意。
目前，相关技术中为了实现网页能够适应不同尺寸的目标显示区域(比如使同一网页在不同尺寸的手机、平板电脑和台式电脑上都能正常显示)，通常使用一种基于根元素的字体大小(font-size)倍数的相对长度单位rem来作为网页中其他元素的单位，来设置元素的字体大小、宽度、高度等属性。由于网页中其他元素的单位通常px，则需要将其他元素的单位转换为rem。之后，通过改变根元素的font-size大小来影响网页中其他元素的显示大小。例如，假设实现目标显示区域全屏显示网页(即目标显示区域宽度尺寸和网页宽度尺寸为1:1)，在目标显示区域宽度为375px和根元素的font-size为100px(即1rem＝100px)的情况下，那么需将根元素的font-size扩大3.75倍才能实现网页和目标显示区域1比1适配。因此，将根元素的font-size扩大3.75倍调整为font-size＝375px(即1rem＝375px)，那么后续根据根元素的font-size的调整，对网页中其他元素的rem值进行计算、修改，从而实现在改变根元素font-size值的同时，可以使网页中其他元素的显示大小进行自适应调整。
然而，上述相关技术通过使用rem作为网页中其他元素的单位来实现网页适应目标显示区域的技术方法，需要对根元素font-size值的大小手动进行来回调试，并且在每次调试时需要针对算其他每个元素进行长度单位转换，计算其rem值，非常繁琐耗时且容易出错。因此，上述相关技术在实现网页适应目标显示区域的过程中存在操作复杂、效率低、易出错的缺陷。
发明内容
本申请提供一种网页显示方法、装置、电子设备及计算机可读存储介质，以解决现有技术中在实现网页适应目标显示区域的过程中存在操作复杂、效率低、易出错的问题。
第一方面，本申请实施例提供一种网页显示方法，所述方法包括：
获取目标显示区域的尺寸、待显示网页的网页文件以及所述待显示网页对应的网页设计稿的尺寸，所述网页文件中包括网页元素的信息；
在所述网页文件中，将所述待显示网页的网页尺寸调整为所述目标显示区域的尺寸；
根据所述网页设计稿的尺寸与所述目标显示区域的尺寸之间的差异，确定所述待显示网页中的网页元素对应的尺寸缩放方式；
根据所述网页元素对应的尺寸缩放方式，在所述网页文件中对所述网页元素的尺寸进行调整；
根据调整后的所述网页文件，进行网页显示。
第二方面，本申请实施例提供一种网页显示装置，所述装置包括：
获取模块，用于获取目标显示区域的尺寸、待显示网页的网页文件以及所述待显示网页对应的网页设计稿的尺寸，所述网页文件中包括网页元素的信息；
第一调整模块，用于在所述网页文件中，将所述待显示网页的网页尺寸调整为所述目标显示区域的尺寸；
确定模块，用于根据所述网页设计稿的尺寸与所述目标显示区域的尺寸之间的差异，确定所述待显示网页中的网页元素对应的尺寸缩放方式；
第二调整模块，用于根据所述网页元素对应的尺寸缩放方式，在所述网页文件中对所述网页元素的尺寸进行调整；
处理模块，用于根据调整后的所述网页文件，进行网页显示。
第三方面，本申请实施例提供一种电子设备，所述电子设备包括：
存储器和处理器、所述存储器和所述处理器耦合；
所述存储器用于存储一条或多条计算机指令；
所述处理器用于执行所述一条或多条计算机指令，以实现上述第一方面任一项所述的网页显示方法。
第四方面，本申请实施例提供一种计算机可读存储介质，其上存储有一条或多条计算机指令，其特征在于，该指令被处理器执行以实现上述第一方面任一项所述的网页显示方法。
第五方面，本申请实施例提供一种计算机程序产品，包括计算机程序，所述计算机程序被处理器执行时实现上述第一方面任一项所述的网页显示方法。
与现有技术相比，本申请具有以下优点：
本申请提供的网页显示方法，获取目标显示区域的尺寸、待显示网页的网页文件以及待显示网页对应的网页设计稿的尺寸，网页文件中包括网页元素的信息。在网页文件中，将待显示网页的网页尺寸调整为目标显示区域的尺寸。根据网页设计稿的尺寸与目标显示区域的尺寸之间的差异，确定待显示网页中的网页元素对应的尺寸缩放方式。根据网页元素对应的尺寸缩放方式，在网页文件中对网页元素的尺寸进行调整。根据调整后的网页文件，进行网页显示。在本申请中，通过将待显示网页的网页尺寸调整为目标显示区域的尺寸，这样能够使网页的页面大小与目标显示区域的大小完全一致的同时，使网页的网页内容完全覆盖目标显示区域。同时，根据网页设计稿的尺寸与目标显示区域的尺寸之间的差异，对网页中的网页元素的尺寸进行了调整，这样使得调整网页元素的尺寸后的网页，在不同设备上(如不同尺寸的PC电脑、平板电脑或手机等)均能展示出与网页设计稿相似的效果，保证了网页中的网页元素不被拉伸或压缩。
相比现有技术，本申请无需对网页元素进行长度单位转换，只需要网页设计稿的尺寸与目标显示区域的尺寸之间的差异，对网页中的网页元素的尺寸进行调整，这在增加了网页适配显示在不同设备上的灵活性与可定制性的同时，避免了因对网页元素进行长度单位转换而导致存在操作复杂、效率低、易出错的缺陷。
附图说明
此处所说明的附图用来提供对本申请的进一步理解，构成本申请的一部分，本申请的示意性实施例及其说明用于解释本申请，并不构成对本申请的不当限定。在附图中：
图1为本申请第一实施例提供的网页显示方法的流程示意图；
图2为本申请第二实施例提供的网页显示装置的结构示意图；
图3为本申请第三实施例提供的电子设备的硬件结构示意图。
通过上述附图，已示出本申请明确的实施例，后文中将有更详细的描述。这些附图和文字描述并不是为了通过任何方式限制本申请构思的范围，而是通过参考特定实施例为本领域技术人员说明本申请的概念。
具体实施方式
为使本申请的目的、优点和特征更加清楚，以下结合附图和具体实施方式对本申请进行清楚、完整地描述。在下面的描述中，阐述了很多具体细节以便于充分理解本申请。但是，所描述的实施例是本申请一部分实施例，而不是全部的实施例，本领域普通技术人员在没有作出创造性劳动前提下所获得的所有其他实施例，都属于本申请保护的范围。
需要说明的是，在本申请的描述中，术语“第一”、“第二”等仅用于描述目的，而不能理解为指示或暗示相对重要性，以及特定的顺序或先后次序。对于本领域的普通技术人员而言，可以具体情况理解上述术语在本申请中的具体含义。此外，在本申请的描述中，除非另有说明，术语“多个”是指两个或两个以上。术语“和/或”，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况。字符“/”一般表示前后关联对象是一种“或”的关系。术语“包括”和“具有”以及他们的任何变形，旨在覆盖不排他的包含，例如，包含了一系列步骤或单元的过程、方法、系统、产品或设备不必限于清楚地列出的那些步骤或单元，而是可包括没有清楚地列出的或对于这些过程、方法、产品或设备固有的其它步骤或单元。
为了便于理解本申请的技术方案，首先对本申请所涉及的相关概念进行介绍。
Web开发是指使用Web技术(HTML/CSS/JavaScript)创建和维护网站和Web应用程序的过程。它包括使用不同的编程语言和技术来编写、测试和部署Web应用程序，以满足特定的业务需求和用户需求。
超文本标记语言(Hyper Text Markup Language，HTML)是一种用于创建网页的标准标记语言。它基于标记和标记属性的概念，用于描述网页的内容和结构，包括文本、图像、视频、音频等，以及它们在页面上的布局、样式和交互行为。HTML使用标签(Tag)来描述内容，通过标签和属性来控制网页的样式和行为。HTML也可以结合层叠样式表(CascadingStyle Sheets，CSS)和JavaScript等技术，来控制网页的样式和动态交互行为。
CSS样式：HTML文件使用CSS定义网页的样式和布局，例如定义页面元素的字体、颜色、大小、间距、位置等属性。
JavaScript脚本：HTML文件使用JavaScript脚本定义网页的交互或动态效果，例如，实现网页的页面元素的响应事件、动画效果等功能。
为了解决上述存在的问题，本申请提供了一种网页显示方法、与该方法相对应的一种网页显示装置，可实施该网页显示方法的电子设备以及计算机可读存储介质。以下提供实施例对上述方法、装置、电子设备以及计算机可读存储介质进行详细说明。
为了使本申请的目的、技术方案更加清楚直观，下面将结合附图及实施例，对本申请实施例提供的方法进行详细说明。应理解的是，此处所描述的具体实施例仅仅用于解释本申请，并不用于限定本申请。可以理解的是，下面几个实施例可以单独存在，以及在本申请提供的各实施例之间不冲突的情况下下述的实施例及实施例中的特征可以相互组合，对于相同或相似的内容，在不同的实施例中不再重复说明。另外，下述各方法实施例中的步骤时序仅为一种举例，而非严格限定，在某些情况下，可以以不同于此的顺序执行所示出或描述的步骤。
下面，结合图1，对本申请第一实施例提供的网页显示方法进行说明，图1为本申请第一实施例提供的网页显示方法的流程示意图。
如图1所示，该网页显示方法包括步骤S101-S105：
S101、获取目标显示区域的尺寸、待显示网页的网页文件以及待显示网页对应的网页设计稿的尺寸，网页文件中包括网页元素的信息。
在本申请实施例中，使用计算机设备的显示屏幕对网页进行显示。显示屏幕是指计算机设备显示图像、文本和视频的物体部件。显示屏幕的显示区域的大小通常由屏幕的分辨率和物体尺寸共同决定的。但在网页自适应屏幕大小的设计中，通常主要是根据屏幕的分辨率进行适配，而不是根据屏幕的物理尺寸进行适配。这是因为屏幕上的物理尺寸和分辨率之间并不是简单的比例关系。同一尺寸屏幕上，更高的分辨率通常意味着更多的像素，显示图片的细节就越丰富，文字也就越清晰。例如，一块27寸屏幕分辨率为3840×3160的显示器与同尺寸的屏幕分辨率为1920×1080的显示器相比，屏幕分辨率为3840×3160的显示器上的内容会更加细腻、清晰。因此，在网页适配屏幕的设计中，通常主要根据屏幕的分辨率来适配，根据显示设备的分辨率来进行合理的网页布局，使得网页在不同分辨率的屏幕上都能够呈现出最佳的显示效果。在本申请实施例中，目标显示区域可以为显示屏幕的整个显示区域，也可以为显示屏幕的部分显示区域，本申请对此不做任何限定。同时，目标显示区域的尺寸是指目标显示区域的分辨率。
在本申请实施例中，网页文件是指网页的实际文件，通常以HTML、CSS、JavaScript等编写，后缀名为.html的文件。网页开发人员开发网页设计稿时，通常将像素px作为网页设计稿的宽度和高度的单位。
在本申请实施例中，网页文件中包括网页元素的信息。其中，网页元素是构成网页的各种组成部分，包括文本、图像、音频、视频、链接、表格、表单、按钮等等。网页元素的信息包括元素的位置、尺寸、颜色、字体、样式以及与其他元素的关系等等。这些信息都被存储在网页文件中，用于浏览器渲染网页时正确地显示元素。
下面，结合一个具体示例，对网页文件的获取方法进行示例性说明。
在本申请实施例中，在项目开发阶段，通常需要在开发环境中编写开发代码，开发代码中包括程序主体的源代码、测试代码、注释和说明文档等内容。其中，源代码主要用于实现软件功能，源代码包括HTML、CSS、JavaScript等文件。在开发代码中添加测试代码、注释和说明文档等内容，有助于开发人员在开发环境上高效完成源代码和对源代码的调试工作过程中，高效方便定位程序问题所在。
为了方便开发者查看和编辑开发代码，通常需要对开发代码进行编译处理，以生成并优化得到可用于线上发布的代码(即线上代码)，该编译过程通常称为项目代码构建(build)过程。项目代码构建过程通常包括如下步骤：步骤一、进行打包处理，即把所有需要用到的代码文件进行组合打包，以减少HTTP请求次数，提升页面性能；步骤二、进行优化处理，如移除多余的代码、压缩CSS/JS文件等，以减少文件大小，提升页面加载速度和用户体验；步骤三、进行自动化任务处理，如自动化测试、代码检查、样式预处理等，以提高开发效率和代码可靠性。这样，在开发代码发布到线上服务器后，用户能访问到的就是经过优化处理的线上代码，而不是开发代码。
在项目代码构建过程完后，输出的代码是用于软件部署的实际代码，其包括可执行文件、静态文件、配置文件、数据库脚本等。随着应用程序规模和复杂度的不断增加，输出代码中常常存在安全漏洞和弱点。黑客可以利用这些漏洞攻击应用程序，导致用户数据泄露、服务瘫痪等问题。因此，为了提高应用程序的安全性和稳定性，通常需要对输出代码进行扫描，检测输出代码中潜在的安全隐患和漏洞，最终得到扫描报告。根据扫描报告，开发人员可以及时发现和修复代码中的漏洞。其中，常见的输出代码扫描工具包括静态代码分析工具和动态代码扫描工具。
根据扫描报告，开发人员对输出代码完成一轮漏洞修复后，得到新版本代码，该新版本代码需要再次进行测试和验证，直到确保修复了漏洞并满足用户需求以后，才能最终上线运行(即把可上线运行的新版本代码，称为线上代码)。
经过上述步骤得到线上代码后，考虑到本申请提供的网页显示方法需要对网页配置信息进行修改，这些网页配置信息通常包含在线上代码中HTML文件(即网页文件)中。其中，HTML是一种超文本标记语言，用于描述网页的内容和结构。因此，要对网页配置信息进行修改，则需要找到HTML文件，并对HTML文件的源代码进行编辑。
要想从线上代码中获取HTML文件的源代码，首先需要查找到HTML入口文件。之后，通过获取HTML入口文件就可以获取到HTML文件的源代码。
需要说明的是，在用户访问一个网站时，默认情况下web服务器会默认自动寻找该网站根目录下名称为index.html的HTML入口文件作为网站的首页文件或默认页面文件。HTML入口文件一般为网站的主要入口，通过HTML入口文件用户可以进入网页的其他页面。例如，通过HTML入口文件中的链接或菜单等方式，用户可以方便地访问到网站的其他页面，进一步了解网站的内容和功能。
下面，本申请实施例对查找HTML入口文件(index.html)、获取HTML入口文件的源代码的实现方式进行示例性说明。
为了便于理解，这里首先有必要对JavaScript，以及JavaScript和HTML之间的区别进行简要说明。JavaScript是一种高级的、解释型的编程语言，主要用来向HTML网页添加交互行为。其中，JavaScript的前端运行环境是浏览器，JavaScript的后端运行环境是Node.js。HTML和JavaScript的区别存在如下方面：1、HTML是一种标记语言，无逻辑功能；而，JavaScript是一种脚本语言，如C、JAVA一样具有逻辑功能。2、HTML在网页上提供静态内容；JavaScript向静态网页添加动态功能。
一种查找HTML入口文件可能的实施方式，使用NodeJS的fs模块的readdir函数读取项目根目录的dist文件夹，确认index.html文件是否存在。需要说明的是，项目的根目录通常指的是Web服务器上存储Web应用程序代码的根目录，也称为Web根目录或Web目录。在大多数Web服务器上，根目录下存储的文件和文件夹是Web应用程序可直接访问的。
其中，fs模块是Node.js官方提供的,用来操作实现读取/写入文件的模块；readdir函数用于获得指定目录下，所有文件的列表；dist文件夹是项目代码构建过程的一个输出目录，其存储了所有的所有静态资源文件(如HTML、CSS、JavaScript等)以及其他相关文件(如图片、字体、配置文件等)，这些文件已经过优化和压缩处理，可以直接部署到Web服务器上。
在本申请实施例中，在查找到HTML入口文件index.html的情况下，获取HTML文件源代码。一种获取HTML文件源代码的可能的实现方式，使用NodeJS的fs模块的readFileSync函数读取HTML文件源代码，得到文件数据fileData。
示例代码如下：
const fs＝require('fs')；
const fileData＝fs.readFileSync('index.html','utf8')；
上述示例代码中，使用了Node.js的fs模块中的readFileSync函数，它的作用是同步地读取当前目录下的index.html文件的内容，并以字符串形式存储在fileData变量中。其中，readFileSync函数的第一个参数是要读取的文件的路径，可以是相对路径或绝对路径；第二个参数是文件的编码方式。这里使用的是utf8编码，意味着文件被读取为Unicode字符集中的字符串形式。
S102、在网页文件中，将待显示网页的网页尺寸调整为目标显示区域的尺寸。
在本申请实施例中，显示设备通过浏览器软件来解析网页文件并将网页文件对应的网页页面呈现在显示屏幕上。基于上述步骤S101获取到目标显示区域的尺寸，为了使网页文件对应的网页页面完全铺满目标显示区域，故在本申请实施例中将网页文件中控制待显示网页的网页尺寸调整为目标显示区域的尺寸。也就是说，在显示时目标显示区域上的每个像素点都被网页页面所覆盖，且该网页页面的大小与目标显示区域的大小完全一致。
例如，目标显示区域为整个显示屏幕时，将待显示网页的网页尺寸调整为整个显示屏幕的尺寸(即分辨率)。那么在显示时，网页页面会覆盖整个显示屏幕。又例如，目标显示区域为显示屏幕中的一块矩形显示区域，将待显示网页的网页尺寸调整为与该矩形显示区域的尺寸(即分辨率)。那么在显示时，网页页面会显示在矩形显示区域所在的位置，且网页页面的大小与该矩形显示区域的大小完全一致。
S103、根据网页设计稿的尺寸与目标显示区域的尺寸之间的差异，确定待显示网页中的网页元素对应的尺寸缩放方式。
在本申请实施例中，为了保证网页的整体美观、布局合理性和用户体验，在对网页尺寸调整的同时，需要对网页中的网页元素进行调整。在网页开发者设计的网页设计稿中，各网页元素的宽高比和相对网页整体的大小是固定且合理的。为了使得调整网页元素的尺寸后的网页，在不同设备上(如不同尺寸的PC电脑、平板电脑或手机等)均能展示出与网页设计稿相似的效果，保证网页中的网页元素不被拉伸或压缩，故在本申请实施例中考虑根据网页设计稿的宽高比与目标显示区域的宽高比之间的差异，确定待显示网页中的网页元素对应的尺寸缩放方式。
可选地，一种步骤S103的可能的实现方式包括步骤S1031-S1032。
S1031、根据网页设计稿的尺寸与目标显示区域的尺寸之间的差异，确定待显示网页中各网页元素所需缩放的目标维度，目标维度包括宽度和高度。
一种可能的实现方式，根据目标显示区域的宽高尺寸，确定目标显示区域的宽高比。根据网页设计稿的宽高尺寸，确定网页设计稿的宽高比。在目标显示区域的宽高比小于网页设计稿的宽高比的情况下，将宽度确定为目标维度。或者，在目标显示区域的宽高尺寸大于网页设计稿的宽高比的情况下，将高度确定为目标维度。
另一种可能的实现方式，确定目标显示区域与网页设计稿的宽度尺寸比值。确定目标显示区域与网页设计稿的高度尺寸比值。在宽度尺寸比值大于高度尺寸比值的大小的情况下，将宽度确定为目标维度。或者，在宽度尺寸比值小于高度尺寸比值的大小的情况下，将高度确定为目标维度。
需要说明的是，当目标显示区域的宽高比小于网页设计稿的宽高比(或者，目标显示区域与网页设计稿的宽度尺寸比值大于目标显示区域与网页设计稿的高度尺寸比值)时，意味着目标显示区域越来越瘦，此时若按照设计稿高度比例缩放，可能会导致页面内容在目标显示区域宽度上空余太多，从而浪费了目标显示区域空间，用户体验不好。因此，此时应该按照目标显示区域宽度比例缩放，以充分利用目标显示区域空间，保证页面在目标显示区域上合适的宽度展示。同理，当目标显示区域宽高比大于等于网页设计稿的宽高比(或者，或者，目标显示区域与网页设计稿的宽度尺寸比值小于目标显示区域与网页设计稿的高度尺寸比值)时，意味着目标显示区域越来越宽，此时若按照网页设计稿宽度比例缩放，可能会导致页面内容过于集中在中间，看上去会显得很小，从而影响用户体验。因此，此时应该按照目标显示区域高度比例缩放，以保证页面在目标显示区域上合适的高度展示。
S1032、根据网页设计稿与目标显示区域在目标维度上的差异，确定待显示网页中各网页元素所需缩放的目标比例。
一种可能的实现方式，在目标维度为宽度的情况下，将目标显示区域的宽度尺寸与网页设计稿的宽度尺寸的比值，确定为目标比例。或者，在目标维度为高度的情况下，将目标显示区域的高度尺寸与网页设计稿的高度尺寸的比值，确定为目标比例。
在本申请实施例中，按照目标显示区域的宽高度比例，对网页中的所有网页元素进行缩放，从而保证网页在不同尺寸的目标显示区域上都可以完整地展示，同时保持网页的美观和用户体验。
S104、根据网页元素对应的尺寸缩放方式，在网页文件中对网页元素的尺寸进行调整。
可选地，基于上述步骤S103确定了网页元素对应的尺寸缩放方式，包括目标维度和目标缩放比例。
下面，结合一个具体示例，以目标维度为宽度和目标缩放比例为1/2为例，对网页文件中对网页元素的尺寸进行调整的实现方式进行示例性说明。
若一网页元素(如，按钮)其宽高尺寸分别为：50px和30px，那么根据上述确定的尺寸缩放方式对该网页元素进行尺寸调整的步骤为：将网页元素在宽度维度上缩放1/2，即将网页元素的宽度尺寸值乘以1/2的乘积作为网页元素更新后的宽度尺寸值，该网页元素的高度尺寸值不变，即尺寸调整后该网页元素的宽高尺寸分别为：25px和30px。
S105、根据调整后的网页文件，进行网页显示。
基于上述步骤对网页文件中网页尺寸和网页元素的尺寸进行了调整，得到调整后的网页文件，下来根据调整后的网页文件，进行网页显示。
在本申请实施例中提供的网页显示控制方法，获取目标显示区域的尺寸、待显示网页的网页文件以及待显示网页对应的网页设计稿的尺寸，网页文件中包括网页元素的信息。在网页文件中，将待显示网页的网页尺寸调整为目标显示区域的尺寸。根据网页设计稿的尺寸与目标显示区域的尺寸之间的差异，确定待显示网页中的网页元素对应的尺寸缩放方式。根据网页元素对应的尺寸缩放方式，在网页文件中对网页元素的尺寸进行调整。根据调整后的网页文件，进行网页显示。在本申请中，通过将待显示网页的网页尺寸调整为目标显示区域的尺寸，这样能够使网页的页面大小与目标显示区域的大小完全一致的同时，使网页的网页内容完全覆盖目标显示区域。同时，根据网页设计稿的尺寸与目标显示区域的尺寸之间的差异，对网页中的网页元素的尺寸进行了调整，这样使得调整网页元素的尺寸后的网页，在不同设备上(如不同尺寸的PC电脑、平板电脑或手机等)均能展示出与网页设计稿相似的效果，保证了网页中的网页元素不被拉伸或压缩。
相比现有技术，本申请无需对网页元素进行长度单位转换，只需要网页设计稿的尺寸与目标显示区域的尺寸之间的差异，对网页中的网页元素的尺寸进行调整，这在增加了网页适配显示在不同设备上的灵活性与可定制性的同时，避免了因对网页元素进行长度单位转换而导致存在操作复杂、效率低、易出错的缺陷。
进一步地，在上述实施例的基础上，对本申请提供的网页显示方法进行进一步说明。
可选地，步骤S104的实现方式可以采取如下方式：使用CSS的transform属性来实现对按尺寸缩放方式对网页元素进行调整。将要缩放的网页元素的transform属性声明为scale()。其中，scale()是CSS中于对网页元素按照缩放比例，进行缩放操作的函数。
下面，对scale()函数的规则进行简单说明。
scale(x,y)：同时指定水平和垂直缩放比例，其中x和y是缩放比例，取值范围为0～1之间的数字，1表示不缩放，小于1表示缩小，大于1表示放大。若只想在垂直方向上进行缩放，可以在scale()函数中，只设置y参数并将x参数默认为1，即scale(1,y)。若只想在水平方向上进行缩放，可以在scale()函数中，只设置x参数并将y参数默认为1，即scale(x,1)。
scale(x)：只指定水平缩放比例，这时x就是缩放比例，而垂直缩放比例则默认与水平缩放比例相同。
需要说明的是，在目标显示区域的宽高比例小于设计稿的宽高比例的情况下，只需要对网页元素在水平方向进行缩放，将网页中所有网页元素的宽度都乘上该缩放比例Scale，那么scale(x，y)函数中只需要将x参数取值为缩放比例，并将y参数默认为1。在目标显示区域的宽高比例大于设计稿的宽高比例的情况下，将网页中所有网页元素的高度都乘上该缩放比例Scale，那么scale(x，y)函数中只需要将y参数取值为缩放比例，并将x参数默认为1。
可选地，在步骤S104之后，还可以包括：针对各目标网页元素，控制目标网页元素居中于目标网页元素的父元素。
一种可能的实现方式，根据第三预设函数，控制页面元素居中于页面元素的父元素，第三预设函数包括translate3d函数。
在本申请实施例中，使用CSS的transform属性来实现缩放效果。具体实现方法为：将要缩放的元素的transform属性声明为“translate3d(-50％,-50％,0)。其中，translate3d(-50％,-50％,0)用于实现缩放后的网页元素沿水平方向和垂直方向居中其父元素。
在本申请实施例中，使用translate3d(-50％,-50％,0)，而不使用translate(-50％)。使用translate3d()的优势在于，其可以触发并借助浏览器的GPU加速，可实现提高动画的性能。这是因为，当浏览器对元素进行translate3d变化时，会同时渲染元素的3D变换和其他样式变化，而GPU则可以特别高效地处理3D变换，从而降低了浏览器的负担，提高渲染性能，使变换效果更流畅。这样就能够实现整个网页的自适应缩放以适配目标显示区域。
可选地，针对步骤S102，步骤S102的实现方式可以包括步骤S1021-S1022：
S1021、为目标网页元素创建容器元素，容器元素用于封装目标网页元素，目标网页元素用于指示网页文件中body标签包括的网页元素，body标签是网页文件中用于定义待显示网页包含的网页元素的标签。
在一种可能的实现方式中，将网页文件转换为抽象语法树。其中，抽象语法树包括多个节点，节点用于表征网页文件中的语法结构。为body标签节点的所有子节点创建容器节点，容器节点用于对body标签节点的所有子节点进行封装。其中，body标签节点为body标签对应的节点，子节点为目标网页元素对应的节点。
需要说明的是，为了便于清楚了解HTML文件源代码(即网页文件)的语法结构，可以将网页文件转换为抽象语法树。其中，抽象语法树(Abstract Syntax Tree，AST)是HTML文件源代码的抽象语法结构的树状表示。抽象语法树包含多个节点(也可以称为子树，因为AST是一种多叉树结构。)，每个节点可以有一个或多个子节点。AST中的每个节点都表示源代码中的一种某个语法结构。每个节点包含着这个语法结构的信息，包括节点的类型、属性以及它的所有子节点。在遍历或处理AST进行代码分析、优化等操作时，可以将每个节点作为一个整体进行处理，或在需要的情况进行删除、添加、修改、替换等操作。
一种将网页文件转换为抽象语法树的可能的实现方法，通过NodeJS的htmlparser2模块将网页文件转换为抽象语法树T。
下面，针对步骤“为body标签节点的所有子节点创建容器节点”的实现方式可以包括步骤S1-S3：
S1、遍历所述抽象语法树的所有所述节点，筛选出body标签节点的所有子节点。S2、向所述body标签节点的子节点列表中添加div标签节点，并将所述div标签节点的父节点设置为所述body标签节点。S3、将各所述子节点中，父节点为所述body标签节点的子节点，确定为目标子节点，并将各所述目标子节点的父节点修改为所述div标签节点。
在本申请实施例中，通过上述步骤获取由网页文件转换得到的抽象语法树T后，遍历抽象语法树T并找到body标签节点。查看抽象语法树T，若抽象语法树T中一个节点(或称子树)的name为body，则表示该节点即为body标签节点。通过children字段可获取body标签节点包含的所有内容，将获得到所有内容记为bodyContent。body标签节点中包含的页面元素，均可以称为body标签节点的子节点，那么在body标签节点的子节点列表中包括body标签节点的每个子节点。
需要注意的是，作为HTML网页的主体部分，<body>标签内的内容是向用户展示的，具体内容可以包含文本、图片、音频、视频等。因此，这里通过抽象语法树T，主要从body标签节点里获取内容即bodyContent，也就是说，这个bodyContent就是HTML网页<body>标签内的全部内容。
为了后续能够实现对bodyContent内包含的所有元素提供通用的样式或其他属性，需要在body标签节点内中增加一个div标签节点，并将该div标签节点的父节点设置为body标签节点。之后，将原body标签节点内的所有内容bodyContent放入div标签节点中，即实现了将各子节点中，父节点为body标签节点的子节点，确定为目标子节点，并将各目标子节点的父节点修改为div标签节点。其中，div标签是HTML中最常用的标签之一，其作用是在网页中创建一个分组(或称分区、容器、显示框)，用来组织其他HTML元素。需要注意的是，其本身不具有任何特定的样式或功能，本申请实施例主要是通过样式设置以使让div标签的内容以想要的样式、大小和形状展现出来，并且可以对其中的内容进行布局和排列，从而让HTML文档更具有层次性。其中，div标签中包括<div>和</div>，其分别用于标识分组的开始和结束，即div标签内的所有元素构成一个分组。
一种向body标签节点内增加div标签节点的可能的实现方式，通过NodeJS的htmlparser2模块的appendNode函数，在body标签节点内增加一个div标签节点。
可以理解的是，由于div标签节点内包含原body标签节点内包含的所有内容将全部展示在目标显示区域上。因此，该div标签所创建的容器可以称为用于在目标显示区域上展示网页的显示框。
S1022、将浏览器的显示窗口目标显示区域的尺寸设置为容器元素尺寸。
一种可能的实现方式，向抽象语法树中head标签节点的子节点列表添加style标签节点，head标签节点为网页文件中head标签对应的节点，head标签用于定义描述目标网页元素的样式信息的标签，style标签节点为网页文件中style标签对应的节点。
在style标签节点中编写用于控制div标签呈目标样式的脚本，目标样式为div标签对应的容器的尺寸等于目标显示区域的尺寸。
可选地，步骤S102的一种可能的实现方式包括步骤A1-A2。
A1、向抽象语法树中head标签节点的子节点列表添加style标签节点，head标签节点为网页文件中head标签对应的节点，head标签用于定义描述目标网页元素的样式信息的标签，style标签节点为网页文件中style标签对应的节点，style标签用于为定义目标网页元素的样式信息。
A2、在style标签节点中编写用于控制div标签呈目标样式的脚本，目标样式为div标签对应的容器的尺寸等于目标显示区域的尺寸。
在本申请实施例中，其中，style标签定义了文档的样式信息。使用style标签，可以在单个HTML文件中指定多个元素的样式，也可以将一个文档的样式信息存储在外部层叠样式表CSS文件中，然后通过link标签将这个样式文件链接到HTML文件中引用。
在本申请实施例中，在抽象语法树中head标签内追加一个style标签，该style标签用于定义该div标签的样式，样式声明为div标签对应的容器的尺寸等于所述目标显示区域的尺寸，即div标签生成的显示框(或容器)的大小)会随着浏览器窗口或目标显示区域的大小进行自动调整，保证在任何分辨率下都能正常显示，并且不会出现样式被截断的情况，始终能够完美适配目标显示区域。其中，样式被截断是指网页布局中的网页尺寸设置不合理，导致网页元素的内容无法完全显示或者超出父元素的范围，从而导致网页页面出现了错位或者内容无法完整显示的情况。
通过style标签声明div标签的样式：div标签对应的容器的尺寸等于所述目标显示区域的尺寸，可以实现div标签(即div标签生成的显示框(或容器)的大小)自动100％适配浏览器窗口的宽高尺寸。
可选地，步骤S103的一种可能的实现方式包括步骤B1-B3。
B1、向抽象语法树中head标签节点的子节点列表中添加script标签节点，script标签节点用于定义目标网页元素对应的尺寸缩放方式。
B2、在监听到待显示网页的尺寸发生调整事件的情况下，通过第一预设函数根据网页设计稿的尺寸和目标显示区域的尺寸，确定目标网页元素对应的尺寸缩放方式。
B3、通过script标签节点从第一预设函数处获取目标网页元素对应的尺寸缩放方式。
其中，script标签用来加载JavaScript代码，可以直接在HTML文件中嵌入JavaScript代码或者通过指定JavaScript文件的路径来引入外部JavaScript文件。当网页被浏览器加载时，JavaScript代码会被解析执行，从而实现与用户交互、修改文档结构、改变样式以及执行逻辑等功能。
在本申请实施例中，在抽象语法树中head标签内追加一个script标签用于定义该div标签中网页元素的尺寸缩放方式。
为了保证网页在目标显示区域大小变化时能够实时响应并进行自适应缩放，需要对目标显示区域的resize事件进行监听。
一种可能的实现方式，通过监听resize事件做出相关计算行为，将自适应缩放的AutoScreen函数绑定到该resize事件中(即在网页大小改变时触发resize事件，然后运行指定的AutoScreen函数。)，以便在目标显示区域大小发生变化时自动调用AutoScreen函数进行自适应缩放。这样就能够保证目标显示区域大小变化时网页可实时响应并进行自适应缩放，从而提高网页的兼容性和用户体验。
其中，resize事件是指在网页大小发生改变时的事件。例如，当用户调整浏览器窗口大小时，网页大小调整完成后触发resize事件。通过JavaScript可以监听做出resize事件以做出相应的处理，例如重新调整页面布局、修改CSS样式、动态地改变元素的大小或位置等等。因此，通过监听resize事件，可以确保网页页面在不同的设备和浏览器窗口大小下都能够展现出最佳的效果，提升用户体验。
其中，AutoScreen函数通常被用于实现网页的自适应缩放，以便能够在不同大小的目标显示区域上，自动调整页面的布局和样式大小，以保持最佳的显示效果。具体地，监听窗口resize事件，每次目标显示区域大小发生改变时，就会调用AutoScreen函数来重新计算网页元素的尺寸缩放方式，以达到自适应缩放的效果。
进一步，可选地，在网页显示过程中，根据第二预设函数控制对网页的网页尺寸调整事件进行响应，第二预设函数包括throttle函数。
在本申请实施例中，为了避免因短时间内多次改变目标显示区域大小变化带来的性能影响，封装一个throttle()函数用来对resize事件进行节流。其中，throttle()是一种用于限制某个函数在一段时间内执行的次数的节流函数，它的作用是让一个函数在一定时间内只执行一次，从而减少对DOM操作的频率，以避免过于频繁地执行某个操作，提高了用户体验、页面性能和响应速度。DOM操作是指对浏览器中的文档对象模型(DOM)进行的一系列修改，例如添加、删除、修改、移动HTML元素或者修改HTML元素的样式等行为。
throttle(func,delay)，throttle()函数接受两个参数，一是需要被控制频率的函数func，二是时间间隔delay。例如，throttle(onResize(),500ms),则可以实现在500ms内操作多次也仅仅触发一次resized事件，这样在目标显示区域改变大小时，onResize函数就会被执行，但是节流函数将会控制其执行次数，从而提高性能。其中，onResize()为resize事件监听函数。
综上，本申请实施例提供的网页显示方法还具有如下优势：
1、简单易用：只需在网页中引入一小段JavaScript代码即可，无需修改原有的CSS或JavaScript代码。
2、快速响应：能够快速响应目标显示区域的变化，网页布局与元素大小能够实时自适应，保证网页在不同设备上的目标显示区域上呈现一致的效果。
3、适配性强：不依赖特定的目标显示区域尺寸或分辨率，可适配不同目标显示区域大小与设备类型，适用范围更广。
4、代码优化：能够有效减少开发中的代码量，避免使用大量的媒体查询或适配单位，提高代码的可维护性与可读性。
5、兼容性好：不依赖特定的前端框架或类库，可与现有的前端技术无缝集成，具有很好的兼容性。
6、无污染性：不会污染开发过程中的代码，只在项目代码构建阶段的最后才执行植入操作，只改变输出代码，保障了源码的统一性与稳定性，也方便线上调试。
下面对本申请提供的网页显示装置进行描述，下文描述的网页显示装置与上文描述的网页显示方法可相互对应参照。
图2为本申请第二实施例提供的网页显示装置的结构示意图。如图2所示，该网页显示装置包括：获取模块201、第一调整模块202、确定模块203、第二调整模块204，以及处理模块205。
获取模块，用于获取目标显示区域的尺寸、待显示网页的网页文件以及所述待显示网页对应的网页设计稿的尺寸，所述网页文件中包括网页元素的信息；
第一调整模块，用于在所述网页文件中，将所述待显示网页的网页尺寸调整为所述目标显示区域的尺寸；
确定模块，用于根据所述网页设计稿的尺寸与所述目标显示区域的尺寸之间的差异，确定所述待显示网页中的网页元素对应的尺寸缩放方式；
第二调整模块，用于根据所述网页元素对应的尺寸缩放方式，在所述网页文件中对所述网页元素的尺寸进行调整；
处理模块，用于根据调整后的所述网页文件，进行网页显示。
可选地，所述第一调整模块具体用于：
为目标网页元素创建容器元素，所述容器元素用于封装所述目标网页元素，所述目标网页元素用于指示所述网页文件中body标签包括的网页元素，所述body标签是所述网页文件中用于定义所述待显示网页包含的网页元素的标签；
将所述目标显示区域的尺寸设置为所述容器元素尺寸。
可选地，所述第一调整模块具体用于：
将所述网页文件转换为抽象语法树；其中，所述抽象语法树包括多个节点，所述节点用于表征所述网页文件中的语法结构；
为body标签节点的所有子节点创建容器节点，所述容器节点用于对所述body标签节点的所有子节点进行封装；其中，所述body标签节点为所述body标签对应的节点，所述子节点为所述目标网页元素对应的节点。
可选地，所述第一调整模块具体用于：
遍历所述抽象语法树的所有所述节点，筛选出body标签节点的所有子节点；
向所述body标签节点的子节点列表中添加div标签节点，并将所述div标签节点的父节点设置为所述body标签节点；
将各所述子节点中，父节点为所述body标签节点的子节点，确定为目标子节点，并将各所述目标子节点的父节点修改为所述div标签节点。
可选地，其特征在于，所述第一调整模块具体用于：
向所述抽象语法树中head标签节点的子节点列表添加style标签节点，所述head标签节点为所述网页文件中head标签对应的节点，所述head标签用于定义描述所述目标网页元素的样式信息的标签，所述style标签节点为所述网页文件中style标签对应的节点；
在所述style标签节点中编写用于控制所述div标签呈目标样式的脚本，所述目标样式为所述div标签对应的容器的尺寸等于所述目标显示区域的尺寸。
可选地，所述第二调整模块具体用于：
向所述抽象语法树中所述head标签节点的子节点列表中添加script标签节点，所述script标签节点用于定义所述目标网页元素对应的尺寸缩放方式；
在监听到所述待显示网页的尺寸发生调整事件的情况下，通过第一预设函数根据所述网页设计稿的尺寸和所述目标显示区域的尺寸，确定所述目标网页元素对应的尺寸缩放方式；
通过所述script标签节点从所述第一预设函数处获取所述目标网页元素对应的尺寸缩放方式。
可选地，所述装置还包括控制模块，所述控制模块具体用于：
针对所述各所述目标网页元素，控制所述目标网页元素居中于所述目标网页元素的父元素。
可选地，所述第二调整模块具体用于：
根据所述网页设计稿的尺寸与所述目标显示区域的尺寸之间的差异，确定所述待显示网页中各网页元素所需缩放的目标维度，所述目标维度包括宽度和高度；
根据所述网页设计稿与所述目标显示区域在所述目标维度上的差异，确定所述待显示网页中各网页元素所需缩放的目标比例。
可选地，所述第二调整模块具体用于：
根据所述目标显示区域的宽高尺寸，确定所述目标显示区域的宽高比；
根据所述网页设计稿的宽高尺寸，确定所述网页设计稿的宽高比；
在所述目标显示区域的宽高尺寸大于所述网页设计稿的宽高比的情况下，将宽度确定为目标维度；或者，在所述目标显示区域的宽高尺寸小于所述网页设计稿的宽高比的情况下，将高度确定为目标维度。
可选地，所述第二调整模块具体用于：
确定所述目标显示区域与所述网页设计稿的宽度尺寸比值；
确定所述目标显示区域与所述网页设计稿的高度尺寸比值；
在所述宽度尺寸比值大于所述高度尺寸比值的大小的情况下，将宽度确定为目标维度；或者，在所述宽度尺寸比值小于所述高度尺寸比值的大小的情况下，将高度确定为目标维度。
可选地，所述第二调整模块具体用于：
在所述目标维度为宽度的情况下，将所述目标显示区域的宽度尺寸与所述网页设计稿的宽度尺寸的比值，确定为目标缩放比例；或者，
在所述目标维度为高度的情况下，将所述目标显示区域的高度尺寸与所述网页设计稿的高度尺寸的比值，确定为目标缩放比例。
可选地，所述控制模块还用于：
在网页显示过程中，根据第二预设函数控制对所述网页的网页尺寸调整事件进行响应，所述第二预设函数包括throttle函数。
可选地，所述控制模块具体还用于：
根据第三预设函数，控制所述页面元素居中于所述页面元素的父元素，所述第三预设函数包括translate3d函数。
本实施例提供的网页显示装置，可用于执行上述网页显示方法实施例的技术方案，其实现原理和技术效果类似，本实施例此处不再赘述。
图3为本申请第三实施例提供的电子设备的硬件结构示意图，如图3所示，本实施例的电子设备300包括：处理器301以及存储器302；其中
存储器302，用于存储计算机执行指令；
处理器301，用于执行存储器存储的计算机执行指令，以实现上述实施例中网页显示方法所执行的各个步骤。具体可以参见前述方法实施例中的相关描述。
可选地，存储器302既可以是独立的，也可以跟处理器301集成在一起。
当存储器302独立设置时，该电子设备还包括总线303，用于连接所述存储器302和处理器301。
本申请第四实施例还提供一种计算机可读存储介质，所述计算机可读存储介质中存储有计算机执行指令，当处理器执行所述计算机执行指令时，实现如上电子设备所执行的上述任一实施例中网页显示方法对应的技术方案。
本申请第五实施例还提供一种计算机程序产品，程序产品包括：计算机程序，计算机程序存储在可读存储介质中，电子设备的至少一个处理器可以从可读存储介质读取计算机程序，至少一个处理器执行计算机程序使得电子设备执行上述任一实施例中网页显示方法对应的技术方案。
需要说明的是，对于本申请第二实施例、第三实施例、第四实施例和第五实施例提供的装置、电子设备及计算机可读存储介质、计算机程序产品的详细描述可以参考对本申请第一实施例的相关描述，这里不再赘述。
本申请虽然以较佳实施例公开如上，但其并不是用来限定本申请，任何本领域技术人员在不脱离本申请的精神和范围内，都可以做出可能的变动和修改，因此本申请的保护范围应当以本申请权利要求所界定的范围为准。
在本申请所提供的几个实施例中，应该理解到，所揭露的设备和方法，可以通过其它的方式实现。例如，以上所描述的设备实施例仅仅是示意性的，例如，所述模块的划分，仅仅为一种逻辑功能划分，实际实现时可以有另外的划分方式，例如多个模块可以结合或者可以集成到另一个系统，或一些特征可以忽略，或不执行。另一点，所显示或讨论的相互之间的耦合或直接耦合或通信连接可以是通过一些接口，装置或模块的间接耦合或通信连接，可以是电性，机械或其它的形式。
上述以软件功能模块的形式实现的集成的模块，可以存储在一个计算机可读取存储介质中。上述软件功能模块存储在一个存储介质中，包括若干指令用以使得一台电子设备(可以是个人计算机，服务器，或者网络设备等)或处理器(英文：processor)执行本申请各个实施例所述方法的部分步骤。
应理解，上述处理器可以是中央处理模块(英文：Central Processing Unit，简称：CPU)，还可以是其他通用处理器、数字信号处理器(英文：Digital Signal Processor，简称：DSP)、专用集成电路(英文：Application Specific Integrated Circuit，简称：ASIC)等。通用处理器可以是微处理器或者该处理器也可以是任何常规的处理器等。结合发明所公开的方法的步骤可以直接体现为硬件处理器执行完成，或者用处理器中的硬件及软件模块组合执行完成。
存储器可能包含高速RAM存储器，也可能还包括非易失性存储NVM，例如至少一个磁盘存储器，还可以为U盘、移动硬盘、只读存储器、磁盘或光盘等。
总线可以是工业标准体系结构(Industry Standard Architecture，ISA)总线、外部设备互连(Peripheral Component，PCI)总线或扩展工业标准体系结构(ExtendedIndustry Standard Architecture，EISA)总线等。总线可以分为地址总线、数据总线、控制总线等。为便于表示，本申请附图中的总线并不限定仅有一根总线或一种类型的总线。
上述存储介质可以是由任何类型的易失性或非易失性存储设备或者它们的组合实现，如静态随机存取存储器(SRAM)，电可擦除可编程只读存储器(EEPROM)，可擦除可编程只读存储器(EPROM)，可编程只读存储器(PROM)，只读存储器(ROM)，磁存储器，快闪存储器，磁盘或光盘。存储介质可以是通用或专用计算机能够存取的任何可用介质。
本领域普通技术人员可以理解：实现上述各方法实施例的全部或部分步骤可以通过程序指令相关的硬件来完成。前述的程序可以存储于一计算机可读取存储介质中。该程序在执行时，执行包括上述各方法实施例的步骤；而前述的存储介质包括：ROM、RAM、磁碟或者光盘等各种可以存储程序代码的介质。
最后应说明的是：以上各实施例仅用以说明本申请的技术方案，而非对其限制；尽管参照前述各实施例对本申请进行了详细的说明，本领域的普通技术人员应当理解：其依然可以对前述各实施例所记载的技术方案进行修改，或者对其中部分或者全部技术特征进行等同替换；而这些修改或者替换，并不使相应技术方案的本质脱离本申请各实施例技术方案的范围。

Claims (16)

1.一种网页显示方法，其特征在于，所述方法包括：
获取目标显示区域的尺寸、待显示网页的网页文件以及所述待显示网页对应的网页设计稿的尺寸，所述网页文件中包括网页元素的信息；
在所述网页文件中，将所述待显示网页的网页尺寸调整为所述目标显示区域的尺寸；
根据所述网页设计稿的尺寸与所述目标显示区域的尺寸之间的差异，确定所述待显示网页中的网页元素对应的尺寸缩放方式；
根据所述网页元素对应的尺寸缩放方式，在所述网页文件中对所述网页元素的尺寸进行调整；
根据调整后的所述网页文件，进行网页显示。
2.根据权利要求1所述的方法，其特征在于，所述在所述网页文件中，将所述待显示网页的网页尺寸调整为所述目标显示区域的尺寸，包括：
为目标网页元素创建容器元素，所述容器元素用于封装所述目标网页元素，所述目标网页元素用于指示所述网页文件中body标签包括的网页元素，所述body标签是所述网页文件中用于定义所述待显示网页包含的网页元素的标签；
将所述浏览器的显示窗口目标显示区域的尺寸设置为所述容器元素尺寸。
3.根据权利要求2所述的方法，其特征在于，所述为目标网页元素创建容器元素，包括：
将所述网页文件转换为抽象语法树；其中，所述抽象语法树包括多个节点，所述节点用于表征所述网页文件中的语法结构；
为body标签节点的所有子节点创建容器节点，所述容器节点用于对所述body标签节点的所有子节点进行封装；其中，所述body标签节点为所述body标签对应的节点，所述子节点为所述目标网页元素对应的节点。
4.根据权利要求3所述的方法，其特征在于，所述为body标签节点的所有子节点创建容器节点，包括：
遍历所述抽象语法树的所有所述节点，筛选出body标签节点的所有子节点；
向所述body标签节点的子节点列表中添加div标签节点，并将所述div标签节点的父节点设置为所述body标签节点；
将各所述子节点中，父节点为所述body标签节点的子节点，确定为目标子节点，并将各所述目标子节点的父节点修改为所述div标签节点。
5.根据权利要求4所述的方法，其特征在于，所述将所述目标显示区域的尺寸设置为所述容器元素尺寸，包括：
向所述抽象语法树中head标签节点的子节点列表添加style标签节点，所述head标签节点为所述网页文件中head标签对应的节点，所述head标签用于定义描述所述目标网页元素的样式信息的标签，所述style标签节点为所述网页文件中style标签对应的节点；
在所述style标签节点中编写用于控制所述div标签呈目标样式的脚本，所述目标样式为所述div标签对应的容器的尺寸等于所述目标显示区域的尺寸。
6.根据权利要求4所述的方法，其特征在于，所述根据所述网页设计稿的尺寸与所述目标显示区域的尺寸之间的差异，确定所述待显示网页中的网页元素对应的尺寸缩放方式，包括：
向所述抽象语法树中所述head标签节点的子节点列表中添加script标签节点，所述script标签节点用于定义所述目标网页元素对应的尺寸缩放方式；
在监听到所述待显示网页的尺寸发生调整事件的情况下，通过第一预设函数根据所述网页设计稿的尺寸和所述目标显示区域的尺寸，确定所述目标网页元素对应的尺寸缩放方式；
通过所述script标签节点从所述第一预设函数处获取所述目标网页元素对应的尺寸缩放方式。
7.根据权利要求1所述的方法，其特征在于，所述方法还包括：
针对所述各所述目标网页元素，控制所述目标网页元素居中于所述目标网页元素的父元素。
8.根据权利要求1所述的方法，其特征在于，所述根据所述网页设计稿的尺寸与所述目标显示区域的尺寸之间的差异，确定所述待显示网页中的网页元素对应的尺寸缩放方式，包括：
根据所述网页设计稿的尺寸与所述目标显示区域的尺寸之间的差异，确定所述待显示网页中各网页元素所需缩放的目标维度，所述目标维度包括宽度和高度；
根据所述网页设计稿与所述目标显示区域在所述目标维度上的差异，确定所述待显示网页中各网页元素所需缩放的目标比例。
9.根据权利要求8所述的方法，其特征在于，所述根据所述网页设计稿的尺寸与所述目标显示区域的尺寸之间的差异，确定所述待显示网页中各网页元素所需缩放的目标维度，包括：
根据所述目标显示区域的宽高尺寸，确定所述目标显示区域的宽高比；
根据所述网页设计稿的宽高尺寸，确定所述网页设计稿的宽高比；
在所述目标显示区域的宽高尺寸小于所述网页设计稿的宽高比的情况下，将宽度确定为目标维度；或者，在所述目标显示区域的宽高尺寸大于所述网页设计稿的宽高比的情况下，将高度确定为目标维度。
10.根据权利要求8所述的方法，其特征在于，所述根据所述网页设计稿的尺寸与所述目标显示区域的尺寸之间的差异，确定所述待显示网页中各网页元素所需缩放的目标维度，包括：
确定所述目标显示区域与所述网页设计稿的宽度尺寸比值；
确定所述目标显示区域与所述网页设计稿的高度尺寸比值；
在所述宽度尺寸比值大于所述高度尺寸比值的情况下，将宽度确定为目标维度；或者，在所述宽度尺寸比值小于所述高度尺寸比值的情况下，将高度确定为目标维度。
11.根据权利要求8所述的方法，其特征在于，所述根据所述网页设计稿与所述目标显示区域在所述目标维度上的差异，确定所述待显示网页中各网页元素所需缩放的目标比例，包括：
在所述目标维度为宽度的情况下，将所述目标显示区域的宽度尺寸与所述网页设计稿的宽度尺寸的比值，确定为目标比例；或者，
在所述目标维度为高度的情况下，将所述目标显示区域的高度尺寸与所述网页设计稿的高度尺寸的比值，确定为目标比例。
12.根据权利要求1所述的方法，其特征在于，所述方法还包括：
在网页显示过程中，根据第二预设函数控制对所述网页的网页尺寸调整事件进行响应，所述第二预设函数包括throttle函数。
13.根据权利要求7所述的方法，其特征在于，所述控制所述网页元素居中于所述网页元素的父元素，包括：
根据第三预设函数，控制所述页面元素居中于所述页面元素的父元素，所述第三预设函数包括translate3d函数。
14.一种网页显示装置，其特征在于，所述装置包括：
获取模块，用于获取目标显示区域的尺寸、待显示网页的网页文件以及所述待显示网页对应的网页设计稿的尺寸，所述网页文件中包括网页元素的信息；
第一调整模块，用于在所述网页文件中，将所述待显示网页的网页尺寸调整为所述目标显示区域的尺寸；
确定模块，用于根据所述网页设计稿的尺寸与所述目标显示区域的尺寸之间的差异，确定所述待显示网页中的网页元素对应的尺寸缩放方式；
第二调整模块，用于根据所述网页元素对应的尺寸缩放方式，在所述网页文件中对所述网页元素的尺寸进行调整；
处理模块，用于根据调整后的所述网页文件，进行网页显示。
15.一种电子设备，其特征在于，所述电子设备包括：
处理器；以及
存储器，用于存储数据处理程序，该电子设备通电并通过所述处理器运行该程序后，执行如权利要求1-13中任一项所述的网页显示方法。
16.一种计算机可读存储介质，其特征在于，存储有数据处理程序，该程序被处理器运行，执行如权利要求1-13中任一项所述的网页显示方法。
CN202310850589.3A 2023-07-11 2023-07-11 网页显示方法、装置、电子设备及计算机可读存储介质 Pending CN117055987A (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN202310850589.3A CN117055987A (zh) 2023-07-11 2023-07-11 网页显示方法、装置、电子设备及计算机可读存储介质

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN202310850589.3A CN117055987A (zh) 2023-07-11 2023-07-11 网页显示方法、装置、电子设备及计算机可读存储介质

Publications (1)

Publication Number Publication Date
CN117055987A true CN117055987A (zh) 2023-11-14

Family

ID=88661527

Family Applications (1)

Application Number Title Priority Date Filing Date
CN202310850589.3A Pending CN117055987A (zh) 2023-07-11 2023-07-11 网页显示方法、装置、电子设备及计算机可读存储介质

Country Status (1)

Country Link
CN (1) CN117055987A (zh)

Cited By (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117539491A (zh) * 2024-01-09 2024-02-09 腾讯科技（深圳）有限公司 页面布局方法、装置、电子设备、存储介质及程序产品

Cited By (2)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN117539491A (zh) * 2024-01-09 2024-02-09 腾讯科技（深圳）有限公司 页面布局方法、装置、电子设备、存储介质及程序产品
CN117539491B (zh) * 2024-01-09 2024-04-26 腾讯科技（深圳）有限公司 页面布局方法、装置、电子设备、存储介质及程序产品

Similar Documents

Publication Publication Date Title
JP7354294B2 (ja) 階層流動コンポーネントおよび動的レイアウトを統合した応答編集および表示を提供するシステムおよび方法
TW202141300A (zh) 頁面處理方法、裝置、設備及儲存媒體
US20180052808A1 (en) Creation and display of a webpage with alternative layouts for different webpage widths
US8413070B1 (en) Declarative resizeable list in electronic form
US11475097B1 (en) Simplified website creation, configuration, and customization system
US20150286739A1 (en) Html5-protocol-based webpage presentation method and device
US20190324890A1 (en) System and Method for Testing Electronic Visual User Interface Outputs
US8645823B1 (en) Converting static websites to resolution independent websites in a web development environment
EA033675B1 (ru) Система и способ автоматизированного преобразования интерактивных сайтов и приложений для поддержки мобильных и других сред отображения
US10049095B2 (en) In-context editing of output presentations via automatic pattern detection
JP2010532513A (ja) データシステム及び方法
AU2018279309C1 (en) System and method for smart interaction between website components
EP3805909A1 (en) Display control device, display control method, and display control program
CN111459501A (zh) 基于SVG的Web组态画面存储与展示系统和方法及介质
CN113158651A (zh) Web服务器系统以及演示应用生成方法
CN117055987A (zh) 网页显示方法、装置、电子设备及计算机可读存储介质
CN112287255A (zh) 页面构建方法及装置、计算设备、计算机可读存储介质
CN114730341A (zh) 保护在本地应用的用户界面数据收集中的用户隐私
KR101546359B1 (ko) 웹 브라우저 호환성 및 폰트 유지를 위한 웹 페이지 생성방법 및 시스템
Khan et al. A retargetable model-driven framework for the development of mobile user interfaces
US20030154462A1 (en) Software maintenance material generation apparatus and generation program therefor
CN116595284B (zh) 网页系统运行方法、装置、设备、存储介质和程序
JP5470860B2 (ja) 表示制御装置とプログラムとコンピュータ読み取り可能な記録媒体
Korner Learning Responsive Data Visualization
CN116009863B (zh) 前端页面渲染方法、设备及存储介质

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination