网页同屏显示方法、装置、设备和存储介质制造方法及图纸

本发明专利技术实施例提供一种网页同屏显示方法、装置、设备和存储介质，包括：服务器响应于第一终端设备发送的网页同屏显示加入请求，获取第一终端设备的显示高度；加入请求用于请求与第二终端设备组同屏显示目标网页，显示高度和显示宽度用CSS像素数量表示。根据第一终端设备的显示高度和由第二终端设备组包括的多个正在进行网页同屏显示的第二终端设备的显示高度确定网页容器的第一目标高度，确定网页容器的第二目标高度。根据第二目标高度和预设的网页容器宽高比例，确定网页容器的第二目标宽度，第一终端设备和第二终端设备组根据服务器发送的第二目标高度和第二目标宽度渲染目标网页，从而使得多个参与同屏显示的终端设备显示相同的网页内容。示相同的网页内容。示相同的网页内容。

【技术实现步骤摘要】
网页同屏显示方法、装置、设备和存储介质


[0001]本专利技术涉及互联网
，尤其涉及一种网页同屏显示方法、装置、设备和存储介质。

技术介绍

[0002]层叠样式表(Cascading Style Sheets，简称CSS)是一种用来表现HTML等文件样式的计算机语言。CSS能够对网页中元素位置的排版进行像素级精确控制，实际应用中，可通过CSS像素的数量来控制网页容器的大小，进而确定网页展示内容的多少。其中，CSS像素是Web编程的概念，指的是CSS样式代码中使用的逻辑像素，是一种相对长度单位，是相对于显示器屏幕分辨率而言的，通常可通过设备像素比(Device Pixel Ratio，简称DPR)描述显示器的设备像素(也即物理像素)与CSS像素之间的关系。DPR为设备像素与CSS像素的比值，表示一个CSS像素需要用多少个设备像素来绘制。
[0003]由于现有的终端设备比如智能手机、平板电脑等，往往具有不同的分辨率、屏幕尺寸和设备像素比，在针对同一网页进行显示时，不同终端设备的网页容器大小不一，展示的内容也不同，比如：分辨率较高、屏幕尺寸较大的终端设备展示更多的网页内容。在多个终端设备同屏显示的应用场景中，不同终端设备展示的内容不同，会导致用户无法信息同步、影响沟通效率。因此，如何在同屏显示时，使不同的终端设备展示相同的网页内容，成为了亟待解决的问题。

技术实现思路

[0004]本专利技术实施例提供一种网页同屏显示方法、装置、设备和存储介质，用以使得多个参与同屏显示的终端设备显示相同的网页内容，提高沟通效率。
[0005]第一方面，本专利技术实施例提供一种网页同屏显示方法，应用于服务器，所述方法包括：
[0006]响应于第一终端设备发送的网页同屏显示加入请求，获取所述第一终端设备的显示高度；所述加入请求用于请求与第二终端设备组同屏显示目标网页，所述第一终端设备的显示高度小于等于所述第一终端设备的显示宽度，所述显示高度和显示宽度用CSS像素数量表示；
[0007]根据所述第一终端设备的显示高度和所述第二终端设备组对应的网页容器的第一目标高度，确定所述网页容器的第二目标高度；所述第一目标高度由所述第二终端设备组包括的多个正在进行网页同屏显示的第二终端设备的显示高度确定；
[0008]根据所述第二目标高度和预设的网页容器宽高比例，更新所述网页容器的第一目标宽度为第二目标宽度，所述第一目标宽度与所述第一目标高度匹配；
[0009]将所述第二目标高度和所述第二目标宽度发送给所述第一终端设备和所述第二终端设备组，以使所述第一终端设备和所述第二终端设备组根据所述第二目标高度和第二目标宽度渲染目标网页。
[0010]第二方面，本专利技术实施例提供一种网页同屏显示方法，应用于第一终端设备，所述方法包括：
[0011]向服务器发送网页同屏显示加入请求，以使所述服务器根据所述第一终端设备的显示高度、第二终端设备组对应的网页容器的第一目标高度和预设的网页容器宽高比例，确定所述网页容器的第二目标高度和第二目标宽度；所述加入请求用于请求与所述第二终端设备组同屏显示目标网页，所述第一目标高度由所述第二终端设备组包括的多个正在进行网页同屏显示的第二终端设备的显示高度确定，所述第一终端设备的显示高度小于等于所述第一终端设备的显示宽度，所述显示高度和显示宽度用CSS像素数量表示；
[0012]接收所述服务器发送的所述第二目标高度和所述第二目标宽度；
[0013]根据所述第二目标高度和第二目标宽度渲染所述目标网页。
[0014]第三方面，本专利技术实施例提供一种网页同屏显示装置，应用于服务器，所述装置包括：
[0015]获取模块，用于响应于第一终端设备发送的网页同屏显示加入请求，获取所述第一终端设备的显示高度；所述加入请求用于请求与第二终端设备组同屏显示目标网页，所述第一终端设备的显示高度小于等于所述第一终端设备的显示宽度，所述显示高度和显示宽度用CSS像素数量表示；
[0016]处理模块，用于根据所述第一终端设备的显示高度和所述第二终端设备组对应的网页容器的第一目标高度，确定所述网页容器的第二目标高度；所述第一目标高度由所述第二终端设备组包括的多个正在进行网页同屏显示的第二终端设备的显示高度确定；根据所述第二目标高度和预设的网页容器宽高比例，更新所述网页容器的第一目标宽度为第二目标宽度，所述第一目标宽度与所述第一目标高度匹配；
[0017]发送模块，用于将所述第二目标高度和所述第二目标宽度发送给所述第一终端设备和所述第二终端设备组，以使所述第一终端设备和所述第二终端设备组根据所述第二目标高度和第二目标宽度渲染目标网页。
[0018]第四方面，本专利技术实施例提供一种网页同屏显示装置，应用于第一终端设备，所述装置包括：
[0019]发送模块，用于向服务器发送网页同屏显示加入请求，以使所述服务器根据所述第一终端设备的显示高度、第二终端设备组对应的网页容器的第一目标高度和预设的网页容器宽高比例，确定所述网页容器的第二目标高度和第二目标宽度；所述加入请求用于请求与所述第二终端设备组同屏显示目标网页，所述第一目标高度由所述第二终端设备组包括的多个正在进行网页同屏显示的第二终端设备的显示高度确定，所述第一终端设备的显示高度小于等于所述第一终端设备的显示宽度，所述显示高度和显示宽度用CSS像素数量表示；
[0020]接收模块，用于接收所述服务器发送的所述第二目标高度和所述第二目标宽度；
[0021]处理模块，用于根据所述第二目标高度和第二目标宽度渲染所述目标网页。
[0022]第五方面，本专利技术实施例提供一种电子设备，包括：存储器、处理器、通信接口；其中，所述存储器上存储有可执行代码，当所述可执行代码被所述处理器执行时，使所述处理器至少可以实现如第一方面和/或第二方面所述的网页同屏显示方法。
[0023]第六方面，本专利技术实施例提供了一种非暂时性机器可读存储介质，所述非暂时性
机器可读存储介质上存储有可执行代码，当所述可执行代码被电子设备的处理器执行时，使所述处理器至少可以实现如第一方面和/或第二方面所述的网页同屏显示方法。
[0024]网页同屏显示即多个终端设备同步显示相同的目标网页。本专利技术实施例中，当存在多个终端设备(即第二终端设备组)要进行网页同屏显示时，服务器基于每个终端设备的显示高度和预设的网页容器宽高比例，确定网页容器的目标高度和目标宽度(即第一目标高度和第一目标宽度)，其中，每个终端设备的显示高度小于其显示宽度，显示高度、显示宽度、目标高度和目标宽度均用CSS像素数量来表示。由于CSS像素与终端设备的物理像素和设备像素比相关，且终端设备的显示高度小于显示宽度，从而通过各终端设备的显示高度对应的CSS像素的数量协商出的网页容器尺寸能够适配要进行网页同屏显示的多个终端设备，且由于网页容器尺寸统一，多个终端设备基于协商出的网页容器尺寸显示的目标网页的内容也相同。
[0025]在第二终端设备组进行网页同屏显示的过程中，若本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种网页同屏显示方法，其特征在于，应用于服务器，包括：响应于第一终端设备发送的网页同屏显示加入请求，获取所述第一终端设备的显示高度；所述加入请求用于请求与第二终端设备组同屏显示目标网页，所述第一终端设备的显示高度小于等于所述第一终端设备的显示宽度，所述显示高度和显示宽度用CSS像素数量表示；根据所述第一终端设备的显示高度和所述第二终端设备组对应的网页容器的第一目标高度，确定所述网页容器的第二目标高度；所述第一目标高度由所述第二终端设备组包括的多个正在进行网页同屏显示的第二终端设备的显示高度确定；根据所述第二目标高度和预设的网页容器宽高比例，更新所述网页容器的第一目标宽度为第二目标宽度，所述第一目标宽度与所述第一目标高度匹配；将所述第二目标高度和所述第二目标宽度发送给所述第一终端设备和所述第二终端设备组，以使所述第一终端设备和所述第二终端设备组根据所述第二目标高度和第二目标宽度渲染目标网页。2.根据权利要求1所述的方法，其特征在于，所述方法还包括：获取所述第二终端设备组包括的多个第二终端设备对应的多个显示高度；从所述多个显示高度中确定出最小的显示高度作为所述网页容器的第一目标高度；根据所述第一目标高度和所述预设的网页容器宽高比例，确定所述网页容器的第一目标宽度；将所述第一目标高度和所述第一目标宽度发送给所述多个第二终端设备，以使所述多个第二终端设备根据所述第一目标高度和第一目标宽度渲染目标网页。3.根据权利要求1所述的方法，其特征在于，所述根据所述第一终端设备的显示高度和第二终端设备组对应的网页容器的第一目标高度，确定所述网页容器的第二目标高度，包括：若所述第一终端设备的显示高度小于所述第二终端设备组对应的网页容器的第一目标高度，则确定所述第一终端设备的显示高度为所述网页容器的第二目标高度；若所述第一终端设备的显示高度大于等于所述第二终端设备组对应的网页容器的第一目标高度，则确定所述第一目标高度为所述网页容器的第二目标高度。4.根据权利要求1至3中任一项所述的方法，其特征在于，所述方法还包括：接收所述第一终端设备和所述第二终端设备组中的目标终端设备发送的针对所述目标网页的标记数据；将所述标记数据发送给除所述目标终端设备外的其他终端设备，以使所述其他终端设备根据所述标记数据对所述目标网页执行标记操作。5.一种网页同屏显示方法，其特征在于，应用于第一终端设备，包括：向服务器发送网页同屏显示加入请求，以使所述服务器根据所述第一终端设备的显示高度、第二终端设备组对应的网页容器的第一目标高度和预设的网页容器宽高比例，确定所述网页容器的第二目标高度和第二目标宽度；所述加入请求用于请求与所述第二终端设备组同屏显示目标网页，所述第一目标高度由所述第二终端设备组包括的多个正在进行网页同屏显示的第二终端设备的显示高度确定，所述第一终端设备的显示高度小于等于所述第一终...

【专利技术属性】
技术研发人员：请求不公布姓名，
申请(专利权)人：北京城市网邻信息技术有限公司，
类型：发明
国别省市：