CN115033335B - 一种应用于网页同屏的显示处理方法 - Google Patents

Abstract

本申请提供一种应用于网页同屏的显示处理方法，涉及互联网技术及通信领域，方法包括：服务端接收各个同屏终端发送的显示参数，按照预设的计算规则计算生成同屏显示基准，并基于该基准生成用于设置同屏终端目标网页或其容器的参考设置数据；同屏终端接收服务端返回或推送的参考设置数据，基于该数据包含的参数，调用目标网页预置的处理方法或参考设置数据中包含的处理方法，对目标网页或其容器进行显示设置处理，以使其显示符合服务端制定的同屏显示基准。本申请实施例提供对浏览器、视窗（viewport）、网页元素等的显示处理以使各同屏终端在同屏中显示保持一致。可见，本申请的方法专用解决网页同屏中的显示差异问题，提升同屏质量。

Description

一种应用于网页同屏的显示处理方法

技术领域

本发明实施例涉及互联网技术及通信领域，尤其涉及一种应用于网页同屏的显示处理方法。

背景技术

网页同屏是一种非视频类同屏技术，其在每个同屏终端运行网页，通过传输网页数据、操作指令的方式实现同步，相比传统的视频类同屏技术，具有传输数据小、画质高等明显优势。但是，由于参与同屏的各个同屏终端设备、浏览器等存在差异，因此，相同网页在每个同屏终端运行会出现不同的运行效果，由此造成显示差异问题。例如以下情形：用户A使用显示分辨率1920*1080的PC设备参与同屏、用户B使用显示分辨率1920*1200的PC设备参与同屏；用户A、用户B同屏交流过程中，用户C使用显示分辨率1280*720的手机设备加入同屏；用户C加入后，将手机屏幕显示由横屏切换为竖屏显示；其中一个用户双指操作，放大了网页。在以上几种情形中，用户间显示的网页画面均不相同，因此影响同屏效果，如网页中的元素比例显示不一致、某内容对一用户可见而对另一用户不可见、同步涂鸦标记位置不一致等问题。而现有的网页同屏技术均未有效解决以上问题，导致网页同屏技术无法达到视频类同屏技术显示一致的同屏效果。

因此，针对以上网页同屏技术中存在的显示差异问题，亟需应用新技术解决。

发明内容

针对上述问题，本发明提供一种应用于网页同屏的显示处理方法，旨在解决现有网页同屏技术存在的同屏终端间显示差异问题，提升网页同屏应用的用户体验，使网页同屏达到视频类同屏显示一致的同屏效果。本发明提供的技术方案如下：

第一方面，本发明提供了一种应用于网页同屏的显示处理方法，所述方法应用于同屏终端，所述方法包括：

运行目标网页，与服务端建立通信连接，执行网页内容或操作同步；

接收所述服务端返回或推送的参考设置数据；

基于所述参考设置数据中包含的参数，调用所述目标网页或其容器中预置的处理方法或所述参考设置数据中包含的处理方法，对目标网页或其容器进行显示设置处理，以使所述目标网页或其容器的显示符合服务端制定的同屏显示基准；

其中，所述目标网页为所述同屏终端运行的与其它同屏终端同步的网页，所述服务端用于为所述同屏终端提供同屏数据通信服务，所述参考设置数据包括用于设置所述目标网页或其容器的参数和/或方法，所述显示设置处理的内容包括宽度设置、高度设置、缩放设置、偏移设置、字体大小设置中的一种或者多种，所述同屏显示基准由所述服务端计算产生，为与之连接的同屏终端共同执行的显示标准。

通过以上实现方式，在同屏终端连接服务端接入同屏后，根据服务端给出的参考设置数据，对目标网页或其容器设置以使其符合同屏显示要求，由此获得各终端显示一致的同屏效果。

在一种可能的实现方式中，将参考设置数据从内容上区分，可分为同屏显示基准数据、显示设置数据，前者为一种服务端计算出的显示标准，要求各同屏终端按照该标准执行或符合该标准，后者为一种直接用于设置的数据。可见，服务端为某一同屏终端提供显示设置数据，需根据同屏显示基准与该同屏终端的显示参数进行计算，获得专用于设置该同屏终端的显示设置数据。在接收到所述参考设置数据后，确定其为显示设置数据时，基于所述显示设置数据设置所述目标网页或目标网页容器，包括基于其包含的参数设置所述目标网页或目标网页容器，或者，执行其包含的处理方法设置所述目标网页或目标网页容器；确定其为同屏显示基准数据时，获取目标网页或目标网页容器当前的显示参数，基于当前显示参数与同屏显示基准数据计算获得显示设置数据，基于所述显示设置数据设置所述目标网页或目标网页容器。

在一种可能的实现方式中，参考设置数据为同步网页元素（Element）的显示参考数据，同样地，其内容可为同步网页元素的同屏显示基准数据params和/或同步网页元素的显示设置数据settings，其中，所述同步网页元素为网页中的HTML元素，其包含网页中用于同步的显示内容。在接收到该类参考设置数据后，首先，基于其包含的同步网页元素获取目标网页元素，即在目标网页中对应于同步网页元素的网页元素（Element）；然后，获取其包含的显示设置数据settings，或者，获取其包含的同屏显示基准数据params与目标网页元素当前的显示参数一起计算生成显示设置数据settings；下一步，基于显示设置数据settings设置目标网页元素，包括但不限于设置它的宽width、高height、横向缩放scaleX、纵向缩放scaleY、缩放中心、总体缩放scale、字体大小fontSize等中的一种或者多种。在该实现方式中，服务端根据所连接的同屏终端的目标网页元素的显示参数，按照预定的计算规则，计算生成同步网页元素的同屏显示基准数据params，或者，根据指定的同屏终端提供的显示参数，进一步生成用于设置该指定同屏终端的目标网页元素的显示设置数据settings。

在一种可能的实现方式中，参考设置数据为meta设置参考数据，同样地，其内容可为meta计算参考数据和/或meta设置数据，其中，所述meta为网页中的meta元素，其至少包含name、content属性，在接收到所述参考设置数据后，包括：确定其为meta设置数据时，直接增加或修改设置meta元素；确定其为meta计算参考数据时，则首先计算生成meta设置数据，示例步骤为：获取meta计算参考数据中基准显示宽度standWidth，获取同屏终端的原始设备宽度orignWidth，计算orignWidth与standWidth比值得到缩放scale；计算生成content属性值，计算方法可表示为：content = `width=${standWidth}, minimum-scale=${scale}, maximum-scale=${scale}, user-scalable=no`；生成meta设置数据，计算方法可表示为：<meta name="viewport" content="${content}">；将所述meta设置数据增加至head元素中，或修改已有的meta元素。

在一种可能的实现方式中，在首次服务端建立通信连接时，基于目标网页或其容器采集显示参数向服务端发送，以供服务端接收同屏终端发送的显示参数，基于其计算生成同屏显示基准，并生成所述参考设置数据返回。进一步的，在建立与服务端之间的通信连接之后，在目标网页或其容器中启动显示变化监听，在监听到目标网页或其容器的显示变化后，获取目标网页或其容器的显示参数向服务端发送，其中，目标网页或其容器显示变化包括但不限于页面缩放、横屏与竖屏切换、用户主动或被动调整同屏目标的显示区域（如目标网页元素的区域）、网页视窗改变等，服务端接收同屏终端发送的显示参数，基于其重新计算生成新的同屏显示基准，并生成所述参考设置数据推送至所连接的同屏终端。

在一种可能的实现方式中，在建立与服务端间的通信连接之后，接收服务端发送的指定的网页元素，在目标网页中加载所述网页元素，并基于所加载的网页元素采集显示参数向服务端发送，并接收服务端发送的参考设置数据，基于所述参考设置数据对目标网页或其容器进行显示设置处理。该实现方式中，服务端基于指定的网页元素在某一同屏终端中的显示参数计算生成同屏显示基准或用于该同屏终端使用的参考设置数据。可选的，在同屏终端的目标网页中加载指定的网页元素，并基于所加载的网页元素采集显示参数，基于该显示参数、从服务端接收的同屏显示基准数据两者计算获得显示设置数据，基于所述显示设置数据对目标网页或其容器进行显示设置处理。

通过以上各实现方式，同屏终端接收服务端返回或推送的参考设置数据，对同屏终端的目标网页或其容器进行设置，使其显示符合服务端要求的显示基准，另外，对所述目标网页或其容器的设置，提供了视窗（viewport）、网页元素（Element）等设置方式，最终，达到了同屏交流过程中，各同屏终端显示一致的有益效果，提高了网页同屏质量。

第二方面，本发明还提供了一种应用于网页同屏的显示处理方法，该方法应用于服务端，该服务端与同屏终端建立通信连接，为同屏终端提供同屏数据通信服务，方法包括：

接收同屏终端发送的显示参数；基于所接收的显示参数，按照预设的计算规则执行计算，生成同屏显示基准；基于同屏显示基准生成参考设置数据；向所述同屏终端发送或推送所述参考设置数据。

在以上方法中，显示参数为所述同屏终端首次连接服务端时基于其目标网页或其容器采集的显示参数，或为所述同屏终端在页面缩放、横屏与竖屏切换、用户主动或被动调整同屏目标的显示区域、网页视窗改变等情形发生时采集的显示参数。同屏显示基准用于作为各同屏终端共同执行的显示标准。参考设置数据包括用于设置同屏终端目标网页或其容器的参数和/或处理方法，以供同屏终端基于其对目标网页或其容器进行显示设置处理，以使所述目标网页或其容器的显示符合同屏显示基准。

通过以上实现方式，服务端接收一个或多个、或全部同屏终端发送的显示参数，基于所接收的显示参数，预设的计算规则执行计算生成可兼容或最大程度兼容各终端显示的同屏显示基准，各终端基于该基准进行显示设置，最终获得一致的显示效果。

在一种可能的实现方式中，接收所述同屏终端发送的显示参数，所述显示参数为同屏终端的目标网页元素的显示参数，所述服务端根据所接收的与之连接的同屏终端的目标网页元素的显示参数，按照预定的计算规则，计算生成同步网页元素的同屏显示基准数据params，或者，根据指定的同屏终端提供的显示参数，进一步生成用于设置该指定的同屏终端的目标网页元素的显示设置数据settings。在该实现方式中，同步网页元素为网页中的HTML元素，其包含网页中用于同步的显示内容，同步网页元素的同屏显示基准数据params用于在同屏终端本地计算生成所述显示设置数据settings，显示设置数据settings用于设置同屏终端的目标网页的目标网页元素。

在一种可能的实现方式中，基于同屏显示基准生成参考设置数据，还包括生成用于在同屏终端计算生成meta元素的meta计算参考数据，该数据至少包括基准显示宽度standWidth，其用于在同屏终端目标网页中设置meta元素的content属性中width参数值，还用于根据同屏终端的原始设备宽度orignWidth，通过计算orignWidth与standWidth比值得到缩放scale，并使用scale设置同屏终端目标网页中meta元素的content属性中minimum-scale、maximum-scale参数值。

可选的，为指定同屏终端生成设置meta元素的meta设置数据，包括步骤：从同屏显示基准中获取基准显示宽度standWidth，获取指定同屏终端提供的原始设备宽度orignWidth，通过orignWidth/standWidth得到缩放scale，计算生成content属性值，计算方法可表示为：content = `width=${standWidth}, minimum-scale=${scale}, maximum-scale=${scale}, user-scalable=no`；生成meta设置数据，计算方法可表示为：<metaname="viewport" content="${content}">。

以上实现方式在服务端生成用于设置meta元素的计算参考数据或设置数据，通过设置同屏终端viewport的方式达到各同屏终端一致的显示效果。

在一种可能的实现方式中，在建立与同屏终端之间的通信连接之后，向同屏终端发送指定的网页元素，接收同屏终端基于指定的网页元素采集的显示参数，基于该显示参数计算获得同屏显示基准，或计算生成用于指定同屏终端使用的参考设置数据。该实现方式通过采集同屏终端实际显示结果中的显示参数，进一步制定同屏显示基准，或对该指定终端的显示进行调整以获得与其它终端一致的显示效果。

通过以上各实现方式，服务端通过各同屏终端提供的显示参数，计算制定同屏显示标准，并生成可供同屏终端参考设置的参考设置数据，各同屏终端执行显示设置，由此在同屏中获得一致的显示效果。

第三方面，本发明还提供一种应用于网页同屏的显示处理系统，所述系统包括服务端、多个同屏终端。所述服务端包括同屏显示基准计算模块、参考设置数据生成模块、通信模块，其中，同屏显示基准计算模块，用于根据同屏终端提供的显示参数，计算获得同屏显示基准；参考设置数据生成模块，用于根据同屏显示基准生成参考设置数据，或者，根据同屏显示基准以及某同屏终端的显示参数生成用于该同屏终端的显示设置数据；所述通信模块用于接收与处理同屏终端的连接请求，连接同屏终端执行通信。所述同屏终端包括显示参数采集模块、显示设置模块、通信模块，其中，所述显示参数采集模块用于采集目标网页、目标网页容器、网页元素的显示参数，包括在建立与服务端通信时执行采集以及在监听到显示变化后执行采集等方式；显示设置模块用于基于服务端提供的参考设置数据，设置目标网页、目标网页容器、网页元素的显示参数，包括直接设置、先计算后设置等方式；通信模块用于连接服务端并执行数据通信。

第四方面，本发明实施例中还提供一种计算机存储介质，该存储介质中存储有软件程序，该软件程序在被一个或多个处理器读取并执行时可实现上述任一方面的任意一种实施方式提供的方法。

第五方面，本发明实施例中还提供一种计算机程序产品，该计算机程序产品在被一个或多个处理器读取并执行时可实现上述任一方面的任意一种实施方式提供的方法。

可见，通过本发明实施例所提供的方法，对接入同屏的同屏终端，采集本地显示参数向服务端提供，服务端根据所接入的同屏终端，生成可全部兼容或最大兼容已接入同屏终端的显示标准，然后，各同屏终端基于显示标准调整显示参数，最终获得一致的显示效果，由此提升网页同屏的用户体验。

附图说明

图1为本发明实施例提供的一种同屏终端执行显示处理的流程示意图；

图2为本发明实施例提供的一种对不同内容类型的参考设置数据处理的流程示意图；

图3为本发明实施例目标网页及其容器结构示意图；

图4为本发明实施例提供的一种网页同屏显示处理流程示意图；

图5为本发明实施例提供一种通过指定网页元素采集显示参数并执行同屏显示处理的流程示意图；

图6为本发明实施例提供一种目标网页元素的部分显示参数示意图；

图7为本发明实施例提供的一种PC端与手机端进行同屏的同屏显示基准计算方式示意图；

图8为本发明实施例提供的一种摄像头开关状态下的目标网页元素区域变化示意图；

图9为本发明实施例提供的一种宽高比不同的设备同屏显示效果示意图；

图10为本发明实施例提供的另一种宽高比不同的设备同屏显示效果示意图；

图11为本发明实施例提供的另一种宽高比不同的设备同屏显示效果示意图；

图12为本发明实施例提供的一种应用于网页同屏的显示处理系统结构示意图。

具体实施方式

本发明的实施方式部分仅用于对本发明进行解释，而非旨在限制本发明。

以下，对本发明的实施例进行描述，显然，所描述的实施例仅仅是本发明一部分的实施例，而不是全部的实施例。本领域普通技术人员可知，随着技术的发展和新场景的出现，本发明实施例提供的技术方案对于类似的技术问题，同样适用。

网页同屏作为一种非视频类同屏技术，其通过在参与同屏的终端同步运行网页实现同屏，相比视频类同屏技术具有速度快、画质无损等优势，但由于每个终端设备的显示尺寸、浏览器等存在差异，相同网页在不同设备、浏览器中运行，可能产生不同的显示效果，由此造成同屏显示差异，交流质量下降。

本发明实施例提供一种应用于网页同屏的显示处理方法，解决以上问题，目的在于使各同屏终端获得一致的显示效果，即显示相同或显示成比例。

以下，对本发明中中的部分用语进行解释说明，以便本领域技术人员理解：

（1）目标网页及其容器。所述目标网页即为在一个同屏终端运行，且与其它同屏终端保持同步的网页。所述容器即为包含目标网页的容器，如图3所示的目标网页及其容器结构示意图，网页在浏览器中运行，浏览器为网页运行创建一viewport以包含网页内容，在网页内容中，documentElement为网页内容的根结点，其本身也是一个网页元素（Element），但包含全部的网页元素，每个网页元素即为一个Element，网页元素之间存在包含关系。根据以上结构，浏览器、视窗（viewport）均可视为网页的容器。需要说明的是，本发明不对浏览器类型进行限定，任意可执行网页浏览的程序均可视为浏览器，如Android中的webview部件、小程序中的web-view部件等。分析以上目标网页及其容器结构，本发明实施例在网页同屏中执行显示处理，包括对浏览器的显示进行设置、对viewport的显示进行设置、对documentElement与网页元素（Element）的显示进行设置等方式实现，具体详见实施例。

（2）同步网页元素。在具体的实施场景中，本申请支持对其中的任意一网页元素同屏，即在各同屏终端同步显示该网页元素包含的网页内容，该用于执行同屏的网页元素即为同步网页元素。可选的，在未指定所述同步网页元素的实施场景中，默认使用documentElement为所述同步网页元素。

（3）显示参数。包括基于目标网页或其容器采集的与显示相关的数据，如网页元素的宽width、高height、横向缩放scaleX、纵向缩放scaleY、缩放中心、纵横成比例缩放scale、字体大小fontSize等，如WebView的宽、高、是否支持缩放属性等，如浏览器视窗的width、minimum-scale、maximum-scale、user-scalable属性等。

（4）同屏显示基准。是由服务端根据所连接的同屏终端提供的显示参数计算产生的，用于各同屏终端共同执行的显示标准，例如，规定显示的同屏区域、横向偏移值、纵向偏移值、缩放值等。

（5）参考设置数据。是一种提供至同屏客户端以执行本地目标网页或其容器显示设置的数据。它可以是同屏显示基准，同屏终端根据本地获取的显示参数，计算如何变换和设置才能够使本地目标网页或其容器符合所述同屏显示基准。它也可以是一种直接用于设置的参数或直接调用以执行设置的方法。

（6）和/或，描述关联对象的关联关系，表示可以存在三种关系，例如，A和/或B，可以表示：单独存在A，同时存在A和B，单独存在B这三种情况，字符“/”一般表示前后关联对象是一种“或”的关系。下面采用几个具体的实施例对本申请技术方案进行详细说明。

以下结合附图，对本发明实施例详细介绍：

实施例一

图1为本发明应用于网页同屏的显示处理方法实施例一流程图，如图1所示，本实施例的方法在同屏终端实施，可以包括以下步骤：

S101，运行目标网页，与服务端建立通信连接，执行网页内容或操作同步；

在该步骤中，同屏终端接入同屏，需首先加载目标网页，与服务端建立通信连接，通过从服务端接收同屏数据并在本地执行同步处理以实现网页内容同步，采集网页数据或操作数据向服务端发送以供服务端执行同步。服务端用于为所述同屏终端提供同屏数据通信服务。

可选的，同屏终端在首次加载目标网页后，向服务端发送同屏连接请求，建立与服务端之间的通信连接。可选的，同屏终端向服务端发送同屏连接请求，同时，采集本同屏终端的显示参数向服务端发送。

S102，接收服务端返回或推送的参考设置数据；

在该步骤中，参考设置数据包括用于设置目标网页或其容器的参数和/或方法，此处，本发明不对参考设置数据的内容、类型进行限定，可理解为，其由服务端计算产生，且为用于同屏终端执行本地设置的数据，

S103，基于参考设置数据中包含的参数，调用目标网页中预置的处理方法或参考设置数据中包含的处理方法，对目标网页容器进行显示设置处理；

在该步骤中，参考设置数据中包含的参数可用于设置，或计算生成设置数据并进行设置，其包含的方法可被调用以执行设置，可选的，在所述方法被调用时，可使用参考设置数据中包含的参数或从本地采集的参数。设置所述目标网页或其容器，即对其显示参数进行设置。显示设置处理的内容包括但不限于对目标网页或其容器的宽度设置、高度设置、缩放设置、偏移设置、字体大小设置等。

在以上方法中，服务端根据同屏显示基准为同屏终端提供参考设置数据，同屏终端根据参考设置数据对本地的目标网页或其容器进行设置，使最终的显示效果符合所述同屏显示基准，由此获得一致的显示效果。

实施例二

如图2所示的一种对不同内容类型的参考设置数据处理的流程示意图，在同屏客户端，根据参考设置数据所包含的内容执行相应的处理，步骤如下：

S201，接收服务端返回或推送的参考设置数据；

该步骤包括同屏客户端向服务端发送连接请求并从服务端返回参考设置数据、服务端在同屏基准发生改变后向同屏客户端推送参考设置数据两种方式。

S202，判断参考设置数据的内容；

从内容上划分，参考设置数据的内容包括两种：一种为显示设置数据，该数据可用于直接设置所述目标网页或其容器，为一种在服务端根据某同屏终端提供的显示参数与同屏显示基准计算产生的可直接设置该同屏终端的目标网页或容器显示的数据；另一种为同屏显示基准数据，该数据仅包含服务端制定的同屏显示基准，同屏终端接收后，从本地获取显示参数，计算出与其同屏显示基准之间的差异，进一步获得显示设置数据，基于显示设置数据设置本地目标网页或容器显示以符合所述同屏显示基准。

当S202判断为显示设置数据时，执行S203，基于所述显示设置数据设置目标网页或其容器；当S202判断为同屏显示基准数据时，执行S204，获取目标网页或其容器当前的显示参数，基于当前的显示参数、从服务端接收的同屏显示基准数据计算获得显示设置数据，并基于所述显示设置数据设置目标网页或其容器。

以上实现方法中，分别提供了在服务端、同屏终端计算获得显示设置数据的两种方式，参考设置数据分别对应于这两种方式产生，可获得相同的技术效果。

实施例三

本实施例提供一种服务端、同屏终端执行网页同屏显示处理的交互流程，如图4所示的流程示意图，步骤如下：

在同屏终端10中：

S401，建立通信连接；

在服务端20中：

S402，建立通信连接；

以上步骤为，同屏终端10与服务端20建立通信连接，包括，同屏终端10向服务端20发送同屏连接请求，服务端20应答所述同屏连接请求并建立通信，如WebSokcet通信。

在同屏终端10中：

S403，采集显示参数；

S404，发送显示参数；

S405，启动显示变化监听；

以上步骤中，所述显示参数以供服务端20计算同屏显示基准。S405启动显示变化监听，包括但不限于页面缩放、横屏与竖屏切换、用户主动或被动调整同屏目标的显示区域（如目标网页元素的区域）、网页视窗改变等。可选的，将S401、S403、S404步骤合并实施，即在向服务端20发送同屏连接请求时，同时携带同屏终端10的显示参数。可选的，同屏终端10向服务端20发送设备适配算法（deviceMethod），以供服务端20根据同屏终端10指定的设备适配算法计算生成同屏显示基准。

在服务端20中：

S406，接收同屏终端显示参数，计算生成同屏显示基准，生成参考设置数据；

S407，发送参考设置数据；

以上步骤中，服务端20接收各同屏终端发送的显示参数，计算生成同屏显示基准，即基于所接收的显示参数，按照预设的计算规则执行计算，生成同屏显示基准，所述同屏显示基准为服务端制定的、为与之连接的同屏终端共同执行的显示标准。基于同屏显示基准生成参考设置数据，所述参考设置数据包括用于设置同屏终端目标网页或其容器的参数和/或处理方法，以供同屏终端基于其对目标网页或其容器进行显示设置处理，以使所述目标网页或其容器的显示符合同屏显示基准。

在同屏终端10中：

S408，接收参考设置数据，对目标网页或其容器进行显示设置处理；

该步骤对同屏终端10的目标网页或容器进行显示设置，使其显示符合服务端20制定的同屏显示基准。

在同屏终端10中：

S409，监听到显示变化；

S410，采集显示参数；

S411，发送显示参数；

在同屏交流过程中，经常会遇到其中一个同屏终端显示参数发生变化的情形，例如，用户进行了页面缩放、横屏与竖屏切换、主动或被动调整目标网页元素的区域、网页视窗改变等，根据S405启动的变化监听，以上步骤在监听到变化后采集显示参数并向服务端20发送。

在服务端20中：

S412，接收同屏终端显示参数，重新计算生成同屏显示基准，生成参考设置数据并向所有同屏终端推送；

S413，推送参考设置数据；

以上步骤中，服务端20根据同屏终端发生的显示参数变化，根据所接收的显示参数重新计算同屏显示基准，例如，在同屏交流过程中接收到主控同屏终端的放大屏幕的显示参数，基于其包含的缩放中心坐标、缩放值等计算生成新的同屏显示基准数据，生成新的参考设置数据并执行S413推送至服务端20所连接的同屏终端执行设置。可见，以上步骤在服务端20中维护了一个动态的同屏显示基准，且动态采集各同屏终端的显示变化、动态计算可适配各同屏终端显示的同屏显示基准、动态维护各同屏终端显示的一致性。

在同屏终端10中：

S414，接收参考设置数据，对目标网页或其容器进行显示设置处理；

以上步骤根据服务端20动态推送的参考设置数据，在同屏过程中动态设置目标网页或其容器。

以上实施例提供的方法，可获得的有益效果是，服务端根据所连接的同屏终端所提供的显示参数，计算获得可适配各同屏终端正常、一致显示目标网页内容的同屏显示基准，各同屏终端执行该同屏显示基准，由此获得显示一致的同屏效果，另外，在同屏交流过程中支持用户对显示进行调整，且动态保持显示的一致性。

实施例四

本实施例提供一种应用于网页同屏中基于网页元素执行显示处理的方法，所述网页元素参考图3中的documentElement、网页元素1（Element1）、网页元素2（Element2）等，本发明支持对任意指定的网页元素执行同屏，被指定进行同屏的网页元素即同步网页元素，在未指定同步网页元素时，默认使用documentElement或body元素为所述同步网页元素。本实施例方法的实现原理为，通过对同步网页元素执行显示处理以使同屏终端间获得一致的显示效果。以下，结合图4示意的交互流程示意图详细说明：

首先，在S403步骤中，显示参数为同屏终端的目标网页元素的显示参数，所述目标网页元素为目标网页中对应于所述同步网页元素的网页元素，采集目标网页元素的显示参数，如采集以下显示参数信息中的一种或者多种作为显示参数（参考图6所示）：

（1）目标网页元素的右侧偏移x（offsetLeft）；

（2）目标网页元素的顶部偏移y（offsetTop）；

（3）目标网页元素的缩放比例scale；

（4）目标网页元素的宽度，若获取到的目标网页元素宽度为0时，则通过节点documentElement属性获取根节点，并获取根节点的宽度；

（5）目标网页元素的高度，若获取到的同屏节点高度为0时，则通过节点documentElement属性获取根节点，并获取根节点的高度；

（6）获取目标网页元素所在的documentElement所指定的字体大小（fontSize）。

在S406步骤中，服务端20根据所接收的与之连接的同屏终端的目标网页元素的显示参数，按照预定的计算规则，计算生成同步网页元素的同屏显示基准数据params，或者，根据指定的同屏终端提供的显示参数，进一步生成用于设置该指定的同屏终端的目标网页元素的显示设置数据settings。此处，params、settings均表示数据变量名，其可包含多个子数据，例如params.width、settings.scale等。所述预定的计算规则，用于生成可适配已连接同屏终端正常、一致显示的同屏显示基准数据params，例如以下计算规则：

（1）按照所有目标网页元素的宽度和高度，设定同屏显示基准数据params的宽width、高height分别为最小的宽度和高度，该计算规则适用于不同设备之间的宽高差异较大，例如PC端与手机端执行同屏，则以手机端的宽高作为基准尺寸进行设置（参考图7所示）；

（2）按照所有目标网页元素的宽度和高度，同屏显示基准数据params的宽width取最小的宽度，计算各目标网页元素的宽高比，同屏显示基准数据params的宽高比取最大的宽高比；

（3）将同屏显示基准数据params的宽width、高height分别设置为指定的值；

（4）按照指定的同屏终端所提供的显示参数设置基准数据params的宽width、高height。

以上计算规则仅用于举例说明本发明的实现原理，在具体的实施场景中，还包括更多种类的计算规则，以及对多种类型的显示参数进行设置，例如fontSize、Scale参数等。

可选的，服务端20在S402中提供同步队列服务，用于确保同一个房间同一时刻只会有一个同屏连接请求进入。

可选的，S401步骤中，同屏终端10携带显示参数连接服务端20，服务端20接收到该连接请求以及显示参数后，基于当前的同屏连接进行判断并执行以下处理：

（1）确定所述同屏连接为同屏房间的首个同屏连接时，设置同屏房间的同屏显示基准数据params，如根据所接收的目标网页元素的显示参数所包含的宽度、高度、字体大小、缩放基准点、缩放值等对同屏显示基准数据params中包含的参数进行对应设置；可选的，默认设置同屏房间的初始缩放值为1（如：roomScale=1）、缩放基准点为（0，0）（如：transform-origin: 0% 0%，即为左上角）。向当前请求连接的同屏终端返回参考设置数据。

（2）确定同屏房间已存在同屏连接时，基于当前请求连接的同屏终端的目标网页的显示参数、当前同屏显示基准数据params，按照预定的计算规则进行计算，生成同屏房间新的同屏显示基准数据params。向当前请求连接的同屏终端返回参考设置数据，且向同屏房间内已连接的其它同屏终端推送参考设置数据。

在S408或S414步骤中，同屏终端10的处理步骤包括：基于参考设置数据中的同步网页元素获取目标网页元素，该目标网页元素为同屏终端10中目标网页中对应于所述同步网页元素的网页元素；根据同步网页元素的显示参考数据的内容类型，当为显示设置数据settings时，基于该数据直接对目标网页元素进行设置，或者，当为同屏显示基准数据params时，获取目标网页元素当前的显示参数，基于该两者计算生成显示设置数据settings，然后，基于显示设置数据settings对目标网页元素进行设置。其中，基于显示设置数据settings设置目标网页元素，包括设置目标网页元素的宽width、高height、横向缩放scaleX、纵向缩放scaleY、缩放中心、纵横成比例缩放scale、字体大小fontSize中的一种或者多种。以上计算生成显示设置数据settings，或设置目标网页元素显示的方式例如：

将目标网页元素的width和maxWidth设置为params.width；

将目标网页元素的height和maxHeight设置为params.height；

将目标网页元素的fontSize设置为params.fontSize；

计算目标网页元素所在documentElement的width与params.width的比值获得水平缩放scaleX，将目标网页元素的scaleX设置为所述水平缩放scaleX；

求得目标网页元素所在documentElement的height与目标网页元素的垂直偏移y的差totalHeight，计算totalHeight与params. height的比值获得垂直缩放scaleY，将目标网页元素的scaleY设置为所述垂直缩放scaleY；

通过scaleX和scaleY修正整体缩放，以避免缩放后变形，因宽经过缩放后近似保证全宽显示，所以需保证缩放后的高不超过目标网页元素所在documentElement的高减去垂直偏移y；

在当前同屏显示基准数据params中包含用户自主双指缩放的情况下, 根据params.roomTransformOrigin计算缩放中心，根据params.roomScale和以上计算出的scale乘积得到最终的scale，基于其设置目标网页元素的scale。

需要说明的是，以上计算设置目标网页元素的方式仅用于举例说明本发明实现原理，在具体实施时，可执行其中的一项或多项设置，且包括但不限于以上设置方式。

S409步骤监听同屏终端10的显示变化，例如用户主动或被动调整目标网页元素的区域，该场景如图8所示，在用户打开摄像头时将视频固定到头部，目标网页元素的区域则发生变化。在监听到变化后，执行S410采集目标网页元素的显示参数，执行S411向服务端20发送。在服务端20接收到所述显示参数后，按照预设的计算规则执行计算，重新生成同步网页元素的同屏显示基准数据params，或进一步生成用于设置指定的同屏终端的目标网页元素的显示设置数据settings，并生成参考设置数据向所有同屏终端推送。

S414步骤接收服务端20推送的参考设置数据，在同屏过程中动态调整同屏终端中目标网页元素显示，例如，作为主控端的同屏终端的用户执行了缩放操作，在S413推送的同步网页元素的同屏显示基准数据params包括缩放参数，根据当前目标网页元素的缩放参数以及params中的缩放参数更新当前目标网页元素的缩放。

可选的，在同屏终端10中，S401步骤之后，屏蔽目标网页中原有的缩放设置，如在目标网页的meta标签中，将user-scalable（是否允许用户手动缩放页面）参数设置为0，目的在于，将网页缩放的操作限制为仅通过本发明提供的方法执行，禁止用户手动操作，利于使用本发明提供方法，对同屏终端的显示缩放进行控制，获得指定的显示结果。

可选的，在同屏终端10中，S401步骤之后，在所述同屏终端10获取到操作权限后，开启对目标网页的缩放权限，如将目标网页meta标签中user-scalable参数设置为1；在所述同屏终端10失去操作权限后，关闭对目标网页的缩放权限，如将目标网页meta标签中user-scalable参数设置为0。该实现方式有利于同屏操作的控制方对网页的显示进行控制，且避免受控方因手动改变显示设置而造成与其它方不一致的显示效果。进一步的，S405启动显示变化监听，仅在所述同屏终端10获取到操作权限后启动，且在失去操作权限后关闭该监听，在所述同屏终端10切换为受控方后，屏蔽其对目标网页执行显示设置，如屏蔽对页面缩放、横屏与竖屏切换、调整目标网页元素区域、改变网页视窗等操作，该实现方式有利于提升服务端20计算同屏显示基准的效率，且减少因多用户同时进行显示设置而造成的干扰。

可选的，在服务端20检测到其中一同屏终端10断开通信连接后，执行S412步骤中的重新计算生成同屏显示基准，以及生成参考设置数据并向所有同屏终端推送。

通过以上，本实施例基于网页元素执行显示处理，使参与同屏交流的各终端获得一致的显示效果，以解决因网页显示差异造成的同屏交流问题。另外需要说明的是，本实施例提供的方法，可同时结合本发明其它实施例中的方法进行实施。

实施例五

本实施例提供一种应用于网页同屏中基于meta设置执行显示处理的方法，所述meta为网页中的meta元素，其至少包含name、content属性，参考图3中的viewport，所述meta设置即对viewport的显示进行处理，本实施例方法的实现原理为，通过对同屏终端的viewport执行显示处理获得一致的显示效果。以下，同样结合图4示意的交互流程示意图详细说明：

在S406、S412步骤中，所述参考设置数据为meta设置参考数据，该meta的设置参考数据包括meta计算参考数据和/或meta设置数据。meta计算参考数据是一种可用于在同屏终端计算生成meta元素的数据，其至少包括基准显示宽度standWidth。meta设置数据是一种可用于为指定同屏终端直接设置meta元素的数据，在服务端20生成该数据的步骤如：从同屏显示基准中获取基准显示宽度standWidth，获取指定同屏终端提供的原始设备宽度orignWidth，通过orignWidth/standWidth得到缩放scale，计算生成content属性值，设置content属性值中的width参数为standWidth值，设置content属性值中minimum-scale参数、maximum-scale参数为scale值，可选的，设置content属性值中user-scalable参数值为no，根据以上，content属性值的计算方法可表示为：content = `width=${standWidth},minimum-scale=${scale}, maximum-scale=${scale}, user-scalable=no`；生成meta设置数据，包括设置meta元素的name属性值为"viewport"、设置meta元素的content属性为所述content属性值，所述meta设置数据的计算方法可表示为：<meta name="viewport"content="${content}">。

在S408、S414步骤中，根据客户端10所接收的参考设置数据类型，执行以下处理：确定其为meta计算参考数据时，根据其包含的基准显示宽度standWidth，获取本同屏终端的原始设备宽度orignWidth，计算orignWidth与standWidth比值得到缩放scale；计算生成content属性值，设置content属性值中的width参数为standWidth值，设置content属性值中minimum-scale参数、maximum-scale参数为scale值，可选的，设置content属性值中user-scalable参数值为no，根据以上，content属性值的计算方法可表示为：content = `width=${standWidth}, minimum-scale=${scale}, maximum-scale=${scale}, user-scalable=no`；生成meta设置数据，包括设置meta元素的name属性值为"viewport"、设置meta元素的content属性为content属性值，所述meta设置数据的计算方法可表示为：<metaname="viewport" content="${content}">；将meta设置数据增加至head元素中。确定其为meta设置数据时，获取所述meta设置数据，将所述meta设置数据增加至head元素中。

在以上表示方法中，例如，${scale}表示scale变量的值，最终，生成的meta设置数据例如：<meta name="viewport" content="width=1920, minimum-scale=1 maximum-scale=1, user-scalable=no">。可选的，设置所述content属性值，还包括对其它参数进行设置，例如initial-scale参数等。

根据以上，本实施例的技术特征为，通过对meta设置实现对viewport的显示处理。可获得的有益效果是：使参与同屏交流的各终端获得一致的显示效果，解决因网页显示差异造成的同屏交流问题，且实施步骤简单、实施成本低。同样地，本实施例所提供的方法，可结合本发明其它实施例进行实施。

在本发明中，各同屏终端根据服务端制定的同屏显示基准计算并设置所述目标网页或其容器的显示参数获得一致的显示效果，所述一致的显示效果并非完全相同的显示画面，例如显示内容相同、显示内容成比例、指定的区域显示相同等。其中，当两个设备宽高比相同时，可使显示内容相同，根据设备尺寸成比例显示画面。当两个设备宽高比不相同时，如使显示内容成比例且显示内容相同，则至少其中的一个设备会出现边界留白的情况，如同屏设备A（宽高比较小）、同屏设备B（宽高比较大），当以同屏设备A的宽高比为同屏显示基准时，则两个设备的显示效果如图9所示，同屏设备B左右边界会出现留白区域，当以同屏设备B的宽高比为同屏显示基准时，则两个设备的显示效果如图10所示，同屏设备A的上下边界会出现留白区域。当两个设备宽高比不相同时，另一种可行的方式为：将指定的区域显示相同的网页内容（公共显示的网页内容），即在同屏显示基准中规定同屏显示的区域，如以上同屏设备A、同屏设备B，执行同屏的显示效果如图11所示，由此，两个终端均正常显示目标网页内容，在同屏终端A中，标记框内的内容与同屏终端B的显示内容相同（即为公共显示的网页内容），该方式可获得的有益效果是，在进入同屏后，不改变同屏终端原有的显示规则，显示画面内容保持不变，且不会出现留白现象，由此获得较好的用户体验，可选的，在同屏终端，显示标记以标记所述指定的区域，包括但不限于方框、四角边框、半透明遮罩等。可选的，例如以上同屏设备A小于同屏设备B的宽高比，则在同屏设备B中正常显示目标网页，在同屏设备A中，按照同屏设备A与同屏设备B的宽度比值scale等比例缩放同屏设备A中的网页，由此，在两个设备中均可获得满屏显示网页内容的效果，在同屏设备A中同时标记出与其它设备同屏的显示区域。

实施例六

本实施例提供一种应用于网页同屏中基于浏览器设置执行显示处理的方法，所述浏览器例如WebView、web-view等显示网页的控件等，参考图3中的浏览器，所述浏览器设置即对用于显示网页的控件的显示进行处理，本实施例方法的实现原理为，通过对同屏终端中显示网页的浏览器容器执行显示处理获得一致的显示效果。以下，以WebView为例结合图4示意的交互流程示意图详细说明：

本实施例包括两种实现方式，第一种方式为，在S406、S412步骤中，在服务端20接收所述同屏终端发送的显示参数，按照预设的计算规则执行计算，生成包含浏览器显示参数的同屏显示基准，将所述同屏显示基准生成参考设置数据发送至客户端10，客户端10中执行S408或S414步骤，获取本地WebView当前的显示参数，基于所述当前显示参数与所述同屏显示基准数据计算获得WebView显示设置数据，基于所述WebView显示设置数据设置所述WebView的显示参数。另一方式为，在S406、S412步骤中，在服务端20接收同屏终端发送的显示参数，按照预设的计算规则执行计算，生成包含浏览器显示参数的同屏显示基准，且根据指定的同屏终端提供的显示参数，进一步生成用于设置所述指定的同屏终端的WebView的显示设置参数，基于所述WebView的显示设置参数生成参考设置数据发送至客户端10，客户端10中执行S408或S414步骤，基于所述WebView的显示设置参数设置本地WebView的显示参数。

在本实施例中，WebView的显示参数同样包括尺寸、缩放比例、字体大小等参数。本实施例技术特征在于，通过对执行目标网页显示的浏览器的显示进行设置，实现各同屏终端一致的显示效果，另外，该实施方式的前提是，实施者需拥有对浏览器的显示参数执行设置的权限，例如Android中显示网页的控件WebView等，实施者可对其显示参数进行设置。同样地，本实施例提供的方法，也可以与本发明其它实施例相结合进行实施。

实施例七

本发明目的在于使参与网页同屏的各同屏终端可获得一致的显示效果，但在具体的实施场景中，存在一些特殊的浏览器，其设置、运行使用了自定义的规范，由此，在与其它浏览器保持相同的显示设置的基础上，对同一网页进行解析、渲染，仍可能出现与其它浏览器输出画面不一致的情形，例如设备像素比（devicePixelRatio，dpr），window.devicePixelRatio是设备物理像素和设备独立像素（device-independentpixels，dips）之间的比值，即：window.devicePixelRatio = 物理像素/ 设备独立像素，CSS操作的为dips，因此，该参数在各浏览器中的定义和实现会关系到最终的显示效果，例如， 在CSS中使用百分比设置line-height，则在不同浏览器中实际显示可能存在差异。如图5所示的一种通过指定网页元素采集显示参数并执行同屏显示处理的流程示意图，本发明提供一种针对以上问题的解决方法，主要步骤包括：

在同屏终端10中：

S501，建立通信连接；

在服务端20中：

S502，建立通信连接；

以上步骤建立同屏终端10与服务端20之间的通信连接，所述通信连接用于同屏数据通信；

在服务端20中：

S503，生成指定的网页元素；

S504，发送指定的网页元素；

在同屏终端10中：

S505，接收指定的网页元素，在目标网页中加载该网页元素，并采集该网页元素的显示参数；

S506，发送显示参数；

在服务端20中：

S507，接收同屏终端基于指定的网页元素采集的显示参数，基于其计算同屏显示基准，或计算生成用于指定同屏终端所使用参考设置数据，发送参考设置数据；

S508，推送参考设置数据；

在同屏终端10中：

S509，接收参考设置数据，对目标网页或其容器进行显示设置处理。

以上步骤中，服务端20要求同屏终端10对指定的网页元素进行加载，并在同屏终端10中实际加载该指定的网页元素后，获取其显示参数，即根据其在同屏终端10中的实际显示执行情况进行调整。S503中指定的网页元素，包括指定目标网页中已有的网页元素或在服务端临时创建的网页元素。可选的，本实施例中方法可完全在同屏终端10中实施完成，例如，在同屏终端10中生成指定的网页元素，S505加载该网页元素并采集其显示参数，基于指定的网页元素采集的显示参数、从服务端20接收的同屏显示基准，两者计算生成用于本同屏终端所使用的显示设置数据，执行S509对目标网页或其容器进行显示设置处理。

本实施例的技术特征在于，通过同屏终端对指定网页元素的实际显示效果采集显示参数，根据该显示参数反向对同屏终端的显示进行处理，以使与其它同屏终端的显示保持一致。本申请所提供的方法，主要用于解决浏览器间的执行规范不一致问题。

实施例八

本实施例提供一种应用于网页同屏的显示处理系统，如图12所示，所述系统包括服务端20、多个同屏终端10。所述服务端20包括同屏显示基准计算模块201、参考设置数据生成模块202、通信模块203，其中，同屏显示基准计算模块201，用于根据同屏终端10提供的显示参数，计算获得同屏显示基准；参考设置数据生成模块202，用于根据同屏显示基准生成参考设置数据，或者，根据同屏显示基准以及某同屏终端10的显示参数生成用于该同屏终端的显示设置数据；所述通信模块203用于接收与处理同屏终端10的连接请求，连接同屏终端10执行通信。所述同屏终端10包括显示参数采集模块101、显示设置模块102、通信模块103，其中，所述显示参数采集模块101用于采集目标网页、目标网页容器、网页元素的显示参数，包括在建立与服务端20通信时执行采集以及在监听到显示变化后执行采集等方式；显示设置模块102用于基于服务端20提供的参考设置数据，设置目标网页、目标网页容器、网页元素的显示参数，包括直接设置、先计算后设置等方式；通信模块103用于连接服务端20并执行数据通信。

以上，为本申请的一些基础实施例，用于说明本发明实现原理，可见，本发明为网页同屏提供了一种显示处理方法，可作为网页同屏的一项必要技术，用于解决现有网页同屏技术存在的各同屏终端显示差异问题。其技术特征在于，服务端根据同屏终端提供的显示参数，生成同屏显示基准，在同屏过程中使各同屏终端按照所述同屏显示基准执行显示设置，由此保证各终端的显示一致性。其有益效果包括：解决了网页同屏技术中的网页渲染因设备、浏览器差异而造成的显示不一致问题，取得像传统视频同屏一样显示一致的技术效果，同时，还为同步涂鸦提供了有效支持，通过本发明实施例，各同屏终端在显示一致的基础上执行同步涂鸦，可有效避免涂鸦错位问题。

需要说明的是，以上本申请的方法实施例中，一些步骤可以被相似的步骤取代，一些步骤可以合并、分解、调整顺序实施，因此，以上实施例并不构成对本申请所提出的一种应用于网页同屏的显示处理方法的限定。

本申请实施例还提供一种计算机程序产品，该计算机程序产品在被一个或多个处理器读取并执行时可实现上述任意一种实施方式提供的方法。

本申请还提供一种计算机可读存储介质，该计算机可读存储介质中存储有软件程序，软件程序在被一个或多个处理器读取并执行上述任一实施例的应用于网页同屏的显示处理方法的步骤。

本领域普通技术人员可以理解实现上述实施例方法中的全部或部分流程，是可以通过计算机程序来指令相关的硬件来完成，该计算机程序可存储于一计算机可读取存储介质中，该程序在执行时，可包括如上述各方法的实施例的流程。其中，前述的存储介质可为磁碟、光盘、只读存储记忆体（Read-Only Memory，ROM）等非易失性存储介质，或随机存储记忆体（Random Access Memory，RAM）等。

以上，仅为本申请实施例的具体实施方式，但本申请实施例的保护范围并不局限于此，任何熟悉本技术领域的技术人员在本申请实施例揭露的技术范围内，可轻易想到的变化或替换，都应涵盖在本申请实施例的保护范围之内。因此，本申请实施例的保护范围应以权利要求的保护范围为准。

Claims (10)

1.一种应用于网页同屏的显示处理方法，其特征在于，所述方法应用于同屏终端，所述方法包括：

运行目标网页，与服务端建立通信连接，执行网页内容或操作同步，所述目标网页为所述同屏终端运行的与其它同屏终端同步的网页，所述服务端用于为所述同屏终端提供同屏数据通信服务；

接收所述服务端返回或推送的参考设置数据，所述参考设置数据包括用于设置所述目标网页或其容器显示的参数和/或处理方法；

基于所述参考设置数据中包含的参数，调用所述目标网页或其容器中预置的处理方法或所述参考设置数据中包含的处理方法，对所述目标网页或其容器进行显示设置处理，以使所述目标网页或其容器的显示符合所述服务端制定的同屏显示基准，其中，所述参数用于对所述目标网页或其容器进行显示设置，或者，所述参数用于计算生成设置数据以对所述目标网页或容器进行显示设置，所述处理方法用于在所述同屏终端调用以执行对所述目标网页或其容器进行显示设置；所述显示设置处理的内容包括宽度设置、高度设置、缩放设置、偏移设置、字体大小设置、显示方向设置、显示区域设置中的一种或者多种，所述同屏显示基准由所述服务端计算产生，为与之连接的同屏终端共同执行的显示标准。

2.根据权利要求1所述的方法，其特征在于，所述参考设置数据为同屏显示基准数据和/或显示设置数据，在接收到所述参考设置数据后，包括：

确定其为所述显示设置数据时，基于所述显示设置数据设置所述目标网页或目标网页容器，包括基于其包含的参数设置所述目标网页或其容器，或者，执行其包含的处理方法设置所述目标网页或其容器；

确定其为所述同屏显示基准数据时，获取所述目标网页或目标网页容器当前的显示参数，基于所述当前显示参数与所述同屏显示基准数据计算获得显示设置数据，基于所述显示设置数据设置所述目标网页或目标网页容器；

其中，所述同屏显示基准数据用于作为同屏显示基准，用于同屏终端基于其计算并设置所述目标网页或目标网页容器，所述显示设置数据用于直接设置所述目标网页或目标网页容器。

3.根据权利要求1所述的方法，其特征在于，所述参考设置数据为同步Element的显示参考数据，所述同步Element的显示参考数据包括同步Element 的同屏显示基准数据params和/或同步Element的显示设置数据settings，其中，所述同步Element为网页中的HTML元素，其包含网页中用于同步的显示内容，在接收到所述参考设置数据后，包括：

基于所述同步Element获取目标Element，所述目标Element为所述目标网页中对应于所述同步Element的Element；

从所述同步Element的显示参考数据中获取所述显示设置数据settings，或者，从所述同步Element的显示参考数据中获取所述同步Element的同屏显示基准数据params，并获取所述目标Element当前的显示参数，基于两者计算生成所述显示设置数据settings；

基于所述显示设置数据settings设置所述目标Element，包括设置所述目标Element的宽width、高height、横向缩放scaleX、纵向缩放scaleY、缩放中心、横纵成比例缩放scale、字体大小fontSize中的一种或者多种；

其中，所述服务端根据所连接的所述同屏终端的目标Element的显示参数，按照预定的计算规则，计算生成所述同步Element的同屏显示基准数据params，或者，根据指定的同屏终端提供的显示参数，进一步生成用于设置所述指定的同屏终端的目标Element的所述显示设置数据settings。

4.根据权利要求1所述的方法，其特征在于，所述参考设置数据为meta设置参考数据，所述meta的设置参考数据包括meta计算参考数据和/或meta设置数据，其中，所述meta为网页中的meta元素，其至少包含name、content属性，在接收到所述参考设置数据后，包括：

确定所述meta设置参考数据为meta设置数据时，获取所述meta设置数据；确定所述meta设置参考数据为meta计算参考数据时，通过以下步骤计算生成所述meta设置数据：根据其包含的基准显示宽度standWidth，获取所述同屏终端的原始设备宽度orignWidth，计算orignWidth与standWidth比值得到缩放scale；计算生成content属性值，设置所述content属性值中的width参数为standWidth值，设置所述content属性值中minimum-scale参数、maximum-scale参数为scale值，进一步的，设置所述content属性值中user-scalable参数值为no，所述content属性值的计算方法可表示为：content＝`width＝${standWidth},minimum-scale＝${scale},maximum-scale＝${scale},user-scalable＝no`；生成meta设置数据，包括设置meta元素的name属性值为"viewport"、设置meta元素的content属性为所述content属性值，所述meta设置数据的计算方法可表示为：<meta name＝"viewport"content＝"${content}">；

将所述meta设置数据增加至head元素中。

5.根据权利要求1所述的方法，其特征在于，在建立与所述服务端之间的通信连接之后，还包括：

基于所述目标网页或其容器采集显示参数向所述服务端发送；

在所述目标网页或其容器中启动显示变化监听，在监听到所述目标网页或其容器的显示变化后，获取所述目标网页或其容器的显示参数向所述服务端发送，所述目标网页或其容器显示变化包括页面缩放、横屏与竖屏切换、用户主动或被动调整同屏目标的显示区域、网页视窗改变中的一种；

其中，所述服务端接收所述同屏终端发送的所述显示参数，基于其计算或重新计算生成新的同屏显示基准，并生成所述参考设置数据返回或推送至所连接的同屏终端。

6.根据权利要求1所述的方法，其特征在于，在建立与所述服务端之间的通信连接之后，还包括：

接收所述服务端发送的指定的网页元素，在所述目标网页中加载所述网页元素，并基于所加载的网页元素采集显示参数向所述服务端发送，并接收所述服务端发送的所述参考设置数据，基于所述参考设置数据对目标网页或其容器进行显示设置处理；其中，所述服务端基于所接收的指定的网页元素在所述同屏终端中的显示参数计算生成同屏显示基准，或计算生成用于指定同屏终端执行显示设置所使用的所述参考设置数据；

或者，在所述目标网页中加载指定的网页元素，并基于所加载的网页元素采集显示参数，基于所述显示参数、从所述服务端接收的所述同屏显示基准数据计算获得显示设置数据，基于所述显示设置数据对所述目标网页或其容器进行显示设置处理。

7.一种应用于网页同屏的显示处理方法，其特征在于，所述方法应用于服务端，所述服务端与同屏终端建立通信连接，为所述同屏终端提供同屏数据通信服务，所述方法包括：

接收所述同屏终端发送的显示参数，其中，所述显示参数为所述同屏终端首次连接所述服务端时基于目标网页或其容器采集的显示参数，或为所述同屏终端在页面缩放、横屏与竖屏切换、用户主动或被动调整同屏目标的显示区域、网页视窗改变中的一种或多种情形发生时采集的显示参数；

基于所接收的所述显示参数，按照预设的计算规则执行计算，生成同屏显示基准，所述同屏显示基准为与之连接的同屏终端共同执行的显示标准；

基于所述同屏显示基准生成参考设置数据，其中，所述参考设置数据包括用于设置所述同屏终端目标网页或其容器显示的参数和/或处理方法，以供同屏终端基于其对目标网页或其容器进行显示设置处理，以使所述目标网页或其容器的显示符合同屏显示基准；所述参数用于在所述同屏终端对所述目标网页或其容器进行显示设置，或者，所述参数用于在所述同屏终端计算生成设置数据以对所述目标网页或容器进行显示设置；所述方法用于在所述同屏终端调用以执行对所述目标网页或其容器进行显示设置；所述显示设置处理包括宽度设置、高度设置、缩放设置、偏移设置、字体大小设置、显示方向设置、显示区域设置中的一种或者多种；

向所述同屏终端发送或推送所述参考设置数据。

8.根据权利要求7所述的方法，其特征在于，接收所述同屏终端发送的显示参数，还包括，所述显示参数为所述同屏终端的目标Element的显示参数，所述服务端在接收到所述同屏终端的目标Element的显示参数后，还包括：

根据所接收的与之连接的所述同屏终端的目标Element的显示参数，按照预定的计算规则，计算生成同步Element的显示基准数据params，或者，根据指定的同屏终端提供的显示参数，进一步生成用于设置所述指定的同屏终端的目标Element的显示设置数据settings；

其中，所述同步Element为网页中的HTML元素，其包含网页中用于同步的显示内容，所述同步Element的显示基准数据params用于在所述同屏终端计算生成所述显示设置数据settings，所述显示设置数据settings用于设置所述同屏终端的目标网页的目标Element。

9.根据权利要求7所述的方法，其特征在于，基于所述同屏显示基准生成参考设置数据，还包括：

生成用于在所述同屏终端计算生成meta元素的meta计算参考数据，所述meta计算参考数据至少包括基准显示宽度standWidth，其用于在所述同屏终端目标网页中设置meta元素的content属性中width参数值，还用于根据所述同屏终端的原始设备宽度orignWidth，通过计算orignWidth与standWidth比值得到缩放scale，并使用其设置所述同屏终端目标网页中meta元素的content属性中minimum-scale、maximum-scale参数值；

或者，为指定同屏终端生成设置meta元素的meta设置数据，包括步骤：从所述同屏显示基准中获取基准显示宽度standWidth，获取所述指定同屏终端提供的原始设备宽度orignWidth，通过orignWidth/standWidth得到缩放scale，计算生成content属性值，设置所述content属性值中的width参数为standWidth值，设置所述content属性值中minimum-scale参数、maximum-scale参数为scale值，进一步的，设置所述content属性值中user-scalable参数值为no，所述content属性值的计算方法可表示为：content＝`width＝${standWidth},minimum-scale＝${scale},maximum-scale＝${scale},user-scalable＝no`；生成meta设置数据，包括设置meta元素的name属性值为"viewport"、设置meta元素的content属性为所述content属性值，所述meta设置数据的计算方法可表示为：<meta name＝"viewport"content＝"${content}">。

10.根据权利要求7所述的方法，其特征在于，在建立与所述同屏终端之间的通信连接之后，还包括：

向所述同屏终端发送指定的网页元素；

接收所述同屏终端基于所述指定的网页元素采集的显示参数；

基于所述显示参数计算同屏显示基准，或计算生成用于指定同屏终端使用的所述参考设置数据。

Images