一种显示设备及网页显示方法与流程

文档序号:31677622发布日期:2022-09-28 03:05阅读:56来源:国知局
1.本技术涉及显示设备
技术领域
:,尤其涉及一种显示设备及网页显示方法。
背景技术
::2.显示设备存在安装有多种浏览器应用的情况,例如:hbbtv(混合广播宽带电视,hybridbroadcast/broadbandtv)应用、store(商店)应用、openbrowser(开放浏览器)网页应用可同时安装在显示设备中。但是不同浏览器应用的网页渲染分辨率存在差异,例如hbbtv应用网页渲染分辨率是720p;store应用网页渲染分辨率有720p和1080i两种;openbrowser网页应用网页渲染分辨率是1080i。同一浏览器应用的不同网页渲染分辨率也可能存在差异。以上两种差异导致不同分辨率应用之间的切换或同一应用不同分辨率页面之间切换会出现画面闪烁、屏幕一小块区域渲染全部网页内容或满屏显示部分网页内容。低分辨率的应用显示在高物理分辨率屏幕时在渲染的后端直接做拉伸处理,或者高分辨率的应用显示在低物理分辨率屏幕时在渲染的后端直接做压缩处理,会出现画面模糊现象,用户体验差。技术实现要素:3.本技术一些实施例提供了一种显示设备及网页显示方法,防止出现屏幕闪屏现象、屏幕一小块区域渲染网页内容或满屏显示部分网页内容,给用户展现合适视口,给用户带来良好体验。4.第一方面,本技术一些实施例中提供一种显示设备,包括:5.显示器;6.控制器,被配置为:7.响应于用户输入打开浏览器应用的指令,开始加载所述浏览器应用的第一网页;8.解析下载的所述第一网页,得到文件对象模型树;9.如果所述文件对象模型树包含元视口标签,根据所述元视口标签确定所述第一网页的第一分辨率;10.根据所述显示设备的物理分辨率和所述第一分辨率确定第一网页缩放因子;11.基于所述第一网页缩放因子将所述第一网页中的元素重新布局、重绘和重排,确定第二网页;12.控制所述显示器显示所述第二网页。13.在一些实施例中,在解析下载的所述第一网页的步骤之前,所述控制器,还被配置为:14.确定所述第一网页对应的窗口模式,根据所述窗口模式确定所述第一网页的第二分辨率。15.在一些实施例中,所述控制器,被配置为:16.如果所述文件对象模型树不包含元视口标签,根据所述显示设备的物理分辨率和所述第二分辨率确定第二网页缩放因子;17.基于所述第二网页缩放因子将所述第一网页中的元素重新布局、重绘和重排,得到第三网页;18.控制所述显示器显示所述第三网页。19.在一些实施例中,所述控制器,被配置为:20.如果所述文件对象模型树不包含元视口标签,控制所述显示器显示第二分辨率对应的第一网页。21.在一些实施例中,将所述第一网页中的元素重新布局、重绘和重排的步骤中,所述控制器,被进一步配置为:22.如果所述第一网页中的元素对应控件为文字控件,确定文字控件特定点的第一坐标和文字控件中文字的第一字号,所述特定点包括文字控件的中心点或顶点;23.根据所述文字控件特定点的第一坐标和所述第一网页缩放因子确定所述文字控件特定点的第二坐标;24.根据所述文字的第一字号和所述第一网页缩放因子确定所述文字的第二字号;25.在所述第二坐标的位置上绘制所述文字控件,所述文字控件中文字的字号为第二字号。26.在一些实施例中,将所述第一网页中的元素重新布局、重绘和重排的步骤中,所述控制器,被进一步配置为:27.如果所述第一网页中的元素对应控件为图像控件,确定图像控件特定点的第一坐标,以及,所述图像控件的第一宽度和第一高度,所述特定点包括文字控件的中心点或顶点;28.根据所述图像控件特定点的第一坐标和所述第一网页缩放因子确定所述图像控件特定点的第二坐标;29.根据所述图像控件的第一宽度和第一高度,以及,所述第一网页缩放因子确定所述图像控件的第二宽度和第二高度;30.在所述图像控件特定点的第二坐标上绘制所述图像控件,所述图像控件的宽度为第二宽度,所述图像控件的高度为第二高度。31.在一些实施例中,在根据所述元视口标签确定所述第一网页的第二分辨率的步骤之后,所述控制器,被配置为:32.判断所述第一分辨率是否与所述显示设备的物理分辨率相同;33.如果所述第一分辨率与所述显示设备的物理分辨率相同,控制所述显示器显示所述第一分辨率对应的第一网页;34.如果所述第二分辨率与所述显示设备的物理分辨率不相同,执行根据所述显示设备的物理分辨率和所述第一分辨率确定第一网页缩放因子的步骤。35.第二方面,本技术一些实施例中提供一种网页显示方法,包括:36.响应于用户输入打开浏览器应用的指令,开始加载所述浏览器应用的第一网页;37.解析下载的所述第一网页,得到文件对象模型树;38.如果所述文件对象模型树包含元视口标签,根据所述元视口标签确定所述第一网页的第一分辨率;39.根据所述显示设备的物理分辨率和所述第一分辨率确定第一网页缩放因子;40.基于所述第一网页缩放因子将所述第一网页中的元素重新布局、重绘和重排,确定第二网页;41.控制所述显示器显示所述第二网页。42.在一些实施例中,在解析下载的所述第一网页的步骤之前,所述方法还包括:43.确定所述第一网页对应的窗口模式,根据所述窗口模式确定所述第一网页的第二分辨率。44.在一些实施例中,所述方法还包括:45.如果所述文件对象模型树不包含元视口标签,根据所述显示设备的物理分辨率和所述第二分辨率确定第二网页缩放因子;46.基于所述第二网页缩放因子将所述第一网页中的元素重新布局、重绘和重排,得到第三网页;47.控制所述显示器显示所述第三网页。48.本技术的一些实施例提供一种显示设备及网页显示方法,通过解析下载的第一网页,得到文件对象模型树;并从文件对象模型树中获取元视口标签,从而确定第一网页的第一分辨率。通过第一分辨率与显示设备的物理分辨率,对第一网页的元素进行重新布局、重绘和重排,并重排后的第一页面显示在显示器上,从而防止出现屏幕一小块区域渲染网页内容或满屏显示部分网页内容的现象,给用户展现合适视口还使得网页展示更加清晰,提升用户体验。附图说明49.图1示出了根据一些实施例的显示设备与控制装置之间操作场景;50.图2示出了根据一些实施例的控制设备100的硬件配置框图;51.图3示出了根据一些实施例的显示设备200的硬件配置框图;52.图4示出了根据一些实施例的显示设备200中软件配置图;53.图5示出了根据一些实施例提供的控制器流程图;54.图6示出了根据一些实施例提供的一种用户界面的示意图;55.图7示出了根据一些实施例提供的一种用户界面的示意图;56.图8示出了根据一些实施例提供的一种用户界面的示意图;57.图9示出了根据一些实施例提供的一种主页页面的示意图;58.图10示出了根据一些实施例提供的一种第一浏览器应用的动漫推荐页面的示意图;59.图11示出了根据一些实施例提供的一种直角坐标系的示意图;60.图12示出了根据一些实施例提供的一种第一网页的控件的布局示意图;61.图13示出了根据一些实施例提供的一种第二网页的控件的布局示意图;62.图14示出了根据一些实施例提供的一种第一网页的控件的布局示意图;63.图15示出了根据一些实施例提供的一种第二网页的控件的布局示意图;64.图16示出了根据一些实施例提供的一种第一网页的控件的布局示意图;65.图17示出了根据一些实施例提供的一种第二网页的控件的布局示意图;66.图18示出了根据一些实施例提供的一种第一网页的控件的布局示意图;67.图19示出了根据一些实施例提供的一种第二网页的控件的布局示意图;68.图20示出了根据一些实施例提供的一种切换应用的用户界面的示意图;69.图21示出了根据一些实施例提供的一种切换应用的用户界面的示意图。具体实施方式70.为使本技术的目的和实施方式更加清楚,下面将结合本技术示例性实施例中的附图,对本技术示例性实施方式进行清楚、完整地描述,显然,描述的示例性实施例仅是本技术一部分实施例,而不是全部的实施例。71.需要说明的是,本技术中对于术语的简要说明,仅是为了方便理解接下来描述的实施方式,而不是意图限定本技术的实施方式。除非另有说明,这些术语应当按照其普通和通常的含义理解。72.本技术中说明书和权利要求书及上述附图中的术语“第一”、“第二”和“第三”等是用于区别类似或同类的对象或实体,而不必然意味着限定特定的顺序或先后次序,除非另外注明。应该理解这样使用的用语在适当情况下可以互换。73.术语“包括”以及他们的任何变形,意图在于覆盖但不排他的包含,例如,包含了一系列组件的产品或设备不必限于清楚地列出的所有组件,而是可包括没有清楚地列出的或对于这些产品或设备固有的其它组件。74.本技术实施方式提供的显示设备可以具有多种实施形式,例如,可以是电视、智能电视、激光投影设备、显示器(monitor)、电子白板(electronicbulletinboard)、电子桌面(electronictable)等。图1和图2为本技术的显示设备的一种具体实施方式。75.图1为根据实施例中显示设备与控制装置之间操作场景的示意图。如图1所示,用户可通过智能设备300或控制装置100操作显示设备200。76.在一些实施例中,控制装置100可以是遥控器,遥控器和显示设备的通信包括红外协议通信或蓝牙协议通信,及其他短距离通信方式,通过无线或有线方式来控制显示设备200。用户可以通过遥控器上按键、语音输入、控制面板输入等输入用户指令,来控制显示设备200。77.在一些实施例中,也可以使用智能设备300(如移动终端、平板电脑、计算机、笔记本电脑等)以控制显示设备200。例如,使用在智能设备上运行的应用程序控制显示设备200。78.在一些实施例中,显示设备可以不使用上述的智能设备或控制设备接收指令,而是通过触摸或者手势等接收用户的控制。79.在一些实施例中,显示设备200还可以采用除了控制装置100和智能设备300之外的方式进行控制,例如,可以通过显示设备200设备内部配置的获取语音指令的模块直接接收用户的语音指令控制,也可以通过显示设备200设备外部设置的语音控制设备来接收用户的语音指令控制。80.在一些实施例中,显示设备200还与服务器400进行数据通信。可允许显示设备200通过局域网(lan)、无线局域网(wlan)和其他网络进行通信连接。服务器400可以向显示设备200提供各种内容和互动。服务器400可以是一个集群,也可以是多个集群,可以包括一类或多类服务器。81.图2示例性示出了根据示例性实施例中控制装置100的配置框图。如图2所示,控制装置100包括控制器110、通信接口130、用户输入/输出接口140、存储器、供电电源。控制装置100可接收用户的输入操作指令,且将操作指令转换为显示设备200可识别和响应的指令,起用用户与显示设备200之间交互中介作用。82.如图3,显示设备200包括调谐解调器210、通信器220、检测器230、外部装置接口240、控制器250、显示器260、音频输出接口270、存储器、供电电源、用户接口中的至少一种。83.在一些实施例中控制器包括处理器,视频处理器,音频处理器,图形处理器,ram,rom,用于输入/输出的第一接口至第n接口。84.显示器260包括用于呈现画面的显示屏组件,以及驱动图像显示的驱动组件,用于接收源自控制器输出的图像信号,进行显示视频内容、图像内容以及菜单操控界面的组件以及用户操控ui界面。85.显示器260可为液晶显示器、oled显示器、以及投影显示器,还可以为一种投影装置和投影屏幕。86.通信器220是用于根据各种通信协议类型与外部设备或服务器进行通信的组件。例如:通信器可以包括wifi模块,蓝牙模块,有线以太网模块等其他网络通信协议芯片或近场通信协议芯片,以及红外接收器中的至少一种。显示设备200可以通过通信器220与外部控制设备100或服务器400建立控制信号和数据信号的发送和接收。87.用户接口,可用于接收控制装置100(如:红外遥控器等)的控制信号。88.检测器230用于采集外部环境或与外部交互的信号。例如,检测器230包括光接收器,用于采集环境光线强度的传感器;或者,检测器230包括图像采集器,如摄像头,可以用于采集外部环境场景、用户的属性或用户交互手势,再或者,检测器230包括声音采集器,如麦克风等,用于接收外部声音。89.外部装置接口240可以包括但不限于如下:高清多媒体接口接口(hdmi)、模拟或数据高清分量输入接口(分量)、复合视频输入接口(cvbs)、usb输入接口(usb)、rgb端口等任一个或多个接口。也可以是上述多个接口形成的复合性的输入/输出接口。90.调谐解调器210通过有线或无线接收方式接收广播电视信号,以及从多个无线或有线广播电视信号中解调出音视频信号,如以及epg数据信号。91.在一些实施例中,控制器250和调谐解调器210可以位于不同的分体设备中,即调谐解调器210也可在控制器250所在的主体设备的外置设备中,如外置机顶盒等。92.控制器250,通过存储在存储器上中各种软件控制程序,来控制显示设备的工作和响应用户的操作。控制器250控制显示设备200的整体操作。例如:响应于接收到用于选择在显示器260上显示ui对象的用户命令,控制器250便可以执行与由用户命令选择的对象有关的操作。93.在一些实施例中控制器包括中央处理器(centralprocessingunit,cpu),视频处理器,音频处理器,图形处理器(graphicsprocessingunit,gpu),ramrandomaccessmemory,ram),rom(read-onlymemory,rom),用于输入/输出的第一接口至第n接口,通信总线(bus)等中的至少一种。94.用户可在显示器260上显示的图形用户界面(gui)输入用户命令,则用户输入接口通过图形用户界面(gui)接收用户输入命令。或者,用户可通过输入特定的声音或手势进行输入用户命令,则用户输入接口通过传感器识别出声音或手势,来接收用户输入命令。[0095]“用户界面”,是应用程序或操作系统与用户之间进行交互和信息交换的介质接口,它实现信息的内部形式与用户可以接受形式之间的转换。用户界面常用的表现形式是图形用户界面(graphicuserinterface,gui),是指采用图形方式显示的与计算机操作相关的用户界面。它可以是在电子设备的显示屏中显示的一个图标、窗口、控件等界面元素,其中控件可以包括图标、按钮、菜单、选项卡、文本框、对话框、状态栏、导航栏、widget等可视的界面元素。[0096]如图4所示,将显示设备的系统分为三层,从上至下分别为应用层、中间件层和硬件层。[0097]应用层主要包含电视上的常用应用,以及应用框架(applicationframework),其中,常用应用主要是基于浏览器browser开发的应用,例如:html5apps;以及原生应用(nativeapps);[0098]应用框架(applicationframework)是一个完整的程序模型,具备标准应用软件所需的一切基本功能,例如:文件存取、资料交换...,以及这些功能的使用接口(工具栏、状态列、菜单、对话框)。[0099]原生应用(nativeapps)可以支持在线或离线,消息推送或本地资源访问。[0100]中间件层包括各种电视协议、多媒体协议以及系统组件等中间件。中间件可以使用系统软件所提供的基础服务(功能),衔接网络上应用系统的各个部分或不同的应用,能够达到资源共享、功能共享的目的。[0101]硬件层主要包括hal接口、硬件以及驱动,其中,hal接口为所有电视芯片对接的统一接口,具体逻辑由各个芯片来实现。驱动主要包含:音频驱动、显示驱动、蓝牙驱动、摄像头驱动、wifi驱动、usb驱动、hdmi驱动、传感器驱动(如指纹传感器,温度传感器,压力传感器等)、以及电源驱动等。[0102]显示设备存在安装有多种浏览器应用的情况,例如:hbbtv应用、store应用、openbrowser网页应用可同时安装在电视中。但是不同浏览器应用的网页渲染分辨率存在差异,例如hbbtv应用网页渲染分辨率是720p;store应用网页渲染分辨率有720p和1080i两种;openbrowser网页应用网页渲染分辨率是1080i。同一浏览器应用的不同网页渲染分辨率也可能存在差异。一些实施例中,浏览器应用的网页渲染分辨率大于显示设备的物理分辨率,会导致满屏显示该网页部分内容,如图5所示;浏览器应用的网页渲染分辨率小于显示设备的物理分辨率,会导致屏幕一小块区域渲染全部网页内容,如图6所示。一些实施例中,当浏览器应用的网页渲染分辨率大于显示设备的物理分辨率时,在算法层对浏览器应用网页直接做收缩处理并显示;当浏览器应用的网页渲染分辨率小于显示设备的物理分辨率时,在算法层对浏览器应用网页直接做拉伸处理并显示。对渲染后的网页直接做收缩和拉伸处理并显示这种方式,虽然可填满整个屏幕但是拉伸或收缩处理会导致画面模糊的现象,如图7所示,用户体验差。[0103]为了解决以上技术问题,本技术实施例提供一种显示设备200,显示设备200的结构及各部分的功能可以参阅上述实施例。此外,在上述实施例示出的显示设备200的基础上,本实施例对显示设备200的一些功能做进一步的完善,如图8所示,控制器250执行以下步骤:[0104]步骤s801:接收用户输入打开浏览器应用的指令;[0105]在一些实施例中,显示器260显示主页页面,所述主页页面包括浏览器应用控件,用户可通过对浏览器应用控件的确认操作来输入打开浏览器应用的指令。示例性的,主页页面如图9所示,图9包括第一浏览器应用控件91,第二浏览器应用控件92和指示控件被选择的焦点93,当前指示第一浏览器应用控件91被选择。当用户按压控制装置100的确认键时,输出打开浏览器应用的指令。[0106]在一些实施例中,打开浏览器应用的指令包括打开浏览器应用中页面的指令。显示器260显示第一浏览器应用的第一页面,所述第一页面包括至少一个跳转页面控件,所述跳转页面控件为取消显示第一页面,同时显示第二页面的控件。用户可通过对跳转页面控件的确认操作来输入打开第一浏览器应用的第二页面的指令。示例性的,第一浏览器应用的动漫推荐页面如图10所示,图10包括排行榜控件101、分类控件102、节目单控件103和指示控件被选择的焦点104,当前指示排行榜控件101被选择。当用户按压控制装置100的确认键时,输出打开浏览器应用中排行榜页面的指令。[0107]需要说明的是,浏览器应用是指以显示设备中浏览器为基础的应用程序。在打开浏览器应用后本质是显示浏览器的页面,浏览器页面的内容由浏览器应用控制。其中,浏览器应用包括hbbtv应用、store应用和openbrowser网页应用。[0108]步骤s802:响应于用户输入打开浏览器应用的指令,开始加载所述浏览器应用的第一网页;[0109]在一些实施例中,接收用户对浏览器应用控件的确认指令,该浏览器应用控件配置链接,可通过该链接中下载第一网页。[0110]在一些实施例中,接收用户对浏览器应用中跳转页面控件的确认指令,跳转页面控件配置跳转链接,可通过该链接中下载浏览器应用中的第二页面,即第一网页。[0111]在一些实施例中,图4所示的中间件层包括配置层,配置层用于响应于用户输入打开浏览器应用的指令,开始加载所述浏览器应用的第一网页。[0112]步骤s803:确定第一网页的窗口模式,根据所述窗口模式确定所述第一网页的第二分辨率;[0113]在一些实施例中,在浏览器中,加载第一网页之前会为加载的第一网页创建一个窗口,该窗口作为第一网页渲染的区域。第一网页渲染的区域以(x,y,width,height)表示。其中,x和y取值为0,width为第一网页的宽度,height为第一网页的高度。以显示器屏幕的相邻两边为x轴和y轴,以相邻两边的交点为坐标原点建立直角坐标系,第一网页渲染的区域(x,y,width,height)为以(0,0)、(width,0)、(0,height)及(width,height)四个顶点围城长方形区域,如图11所示。[0114]在一些实施例中,hbbtv应用的窗口模式(x,y,width,height)为(0,0,1280,720)。store应用的窗口模式为(0,0,1280,720)或者(0,0,1920,1080)。openbrowser应用的窗口模式为(0,0,1920,1080)。在加载第一网页之前,检测加载当前第一网页的窗口模式。[0115]在一些实施例中,可直接从第一网页的窗口模式参数中获取窗口模式的具体数值。[0116]在一些实施例中,可先确定当前浏览器应用的名称,再基于浏览器应用确定其对应的窗口模式。[0117]在一些实施例中,窗口模式中的宽度值和高度值为第一网页的第二分辨率,即窗口模式(x,y,width,height)的第二分辨率为width*height。示例性的,窗口模式为(0,0,1280,720)的第二分辨率为1280*720,窗口模式为(0,0,1920,1080)的第二分辨率为1920*1080。[0118]在一些实施例中,配置层还用于确定第一网页的窗口模式,根据所述窗口模式确定所述第一网页的第二分辨率。[0119]在一些实施例中,图4所示的中间件层包括能力层,配置层还用于将第一网页的第二分辨率发送至能力层。[0120]需要说明的是,如果解析下载的第一网页得到文件对象模型树中一定包含元视口标签,步骤s803可以省略,如果解析下载的第一网页得到文件对象模型树中不一定包含元视口标签,步骤s803不可以省略,但由窗口模式确定的第二分辨率可能不会采用,第一网页的分辨率以文件对象模型树的数字为准。[0121]步骤s804:解析下载的所述第一网页,得到文件对象模型树;[0122]在一些实施例中,解析通过浏览器下载模块下载的第一网页,得到第一网页的文件对象模型(dom,documentobjectmodel)树。文件对象模型是w3c组织推荐的处理可扩展置标语言的标准编程接口。文件对象模型实际上是以面向对象方式描述的文档模型。文件对象模型定义了表示和修改文档所需的对象、这些对象的行为和属性以及这些对象之间的关系。可以把文件对象模型认为是页面上数据和结构的一个树形表示,不过页面可能不是以这种树的方式具体实现。[0123]在一些实施例中,能力层用于解析下载的所述第一网页,得到文件对象模型树。[0124]步骤s805:判断所述文件对象模型树是否包含元视口标签;[0125]在一些实施例中,文件对象模型树中包含至少一个标签,可通过遍历文件对象模型树的标签名称来确定该文件对象模型树中是否有元视口标签,或者,遍历文件对象模型树中网页头(head)的标签名称来确定该文件对象模型树中是否有元视口标签。其中,元视口标签名称以《metaviewport》表示。示例性的,遍历文件对象模型树中网页头(head)的标签名称,如果网页头中有metaviewport,则确定文件对象模型树有元视口标签;如果网页头中没有metaviewport,则确定文件对象模型树没有元视口标签。[0126]如果所述文件对象模型树包含元视口标签,控制器250执行步骤s806:根据所述元视口标签确定所述第一网页的第一分辨率;[0127]在一些实施例中,在确定文件对象模型树包含元视口标签后,提取元视口标签的内容,可从元视口标签的内容中确定第一网页的第一分辨率。[0128]在一些实施例中,对于规范化的网页来说,元视口标签的内容仅包含网页显示的宽度,或元视口标签的内容仅包含网页显示的高度。可根据单一高度和宽度来确定第一网页的第一分辨率。示例性的,元视口标签的内容为《metaname="viewport"content="width=1280,initial-scale=1,user-scalable=1"》。第一网页的宽度为1280,可确定第一网页的分辨率为1280*720,规范化的网页是指按照显示屏幕长宽比16:9设计的网页,例如分辨率为1280*720和1920*1080的网页。[0129]在一些实施例中,对于非规范化的网页来说,元视口标签的内容包括网页显示的宽度和高度。示例性的,元视口标签的内容为《metaname="viewport"content="width=1280,height=1280,initial-scale=1,user-scalable=1"》。第一网页的宽度为1280,宽度为1280,可确定第一网页的分辨率为1280*1280。非规范化的网页是指没有按照显示屏幕长宽比16:9设计的网页,例如分辨率1280*1280的网页。[0130]在一些实施例中,能力层用于根据所述元视口标签确定所述第一网页的第一分辨率。[0131]在一些实施例中,控制器250可先判断所述第一分辨率是否与所述显示设备的物理分辨率相同;[0132]如果所述第一分辨率与所述显示设备的物理分辨率相同,控制所述显示器直接显示所述第一分辨率对应的第一网页;[0133]如果所述第二分辨率与所述显示设备的物理分辨率不相同,控制器250执行步骤s807:根据所述显示设备的物理分辨率和所述第一分辨率确定第一网页缩放因子。[0134]本实施例中当第一分辨率与所述显示设备的物理分辨率相同时,无需执行确定第一网页缩放因子、重新布局、重绘、重排等步骤。[0135]在一些实施例中,控制器250无需判断第一分辨率是否与所述显示设备的物理分辨率相同,直接执行步骤s807:根据所述显示设备的物理分辨率和所述第一分辨率确定第一网页缩放因子;[0136]在一些实施例中,显示设备浏览器的显存物理分辨率设定在1280*720或1920*1080。[0137]在一些实施例中,显示设备浏览器的显存物理分辨率设定在1280*1280。[0138]在一些实施例中,第一网页缩放因子只有一个数值,可通过显示设备的物理水平分辨率与第一水平分辨率的比值,或显示设备的物理垂直分辨率与第一垂直分辨率的比值确定。[0139]在一些实施例中,第一网页缩放因子包括第一网页宽度缩放因子和第一网页高度缩放因子。第一网页宽度缩放因子为显示设备的物理水平分辨率与第一水平分辨率的比值,第一网页高度缩放因子为显示设备的物理垂直分辨率与第一垂直分辨率的比值。第一网页宽度缩放因子和第一网页高度缩放因子可以相同,也可以不同。[0140]在一些实施例中,在第一网页中设置一个网页标识或者在文件对象模型树中设置一个网页标签。通过网页标识或网页标签的数值来确定第一网页是否是规范化网页。如果网页标识或网页标签的数值为第一预设值,则确定第一网页是规范化网页。第一网页缩放因子只有一个数值,第一网页缩放因子为显示设备的物理水平分辨率与第一水平分辨率的比值,或,第一网页缩放因子为显示设备的物理垂直分辨率与第一垂直分辨率的比值。如果网页标识或网页标签的数值为第二预设值,则确定第一网页是非规范化网页。第一网页缩放因子包含两个,分别为第一网页宽度缩放因子和第一网页高度缩放因子。第一网页宽度缩放因子为显示设备的物理水平分辨率与第一水平分辨率的比值;第一网页高度缩放因子为第一网页高度缩放因子为显示设备的物理垂直分辨率与第一垂直分辨率的比值。[0141]示例性的,第一网页的分辨率为1280*720,显示设备的物理分辨率为1920*1080。网页标识或网页标签的数值为1,则确定第一网页是规范化网页。第一网页缩放因子scale为显示设备的物理水平分辨率与第一水平分辨率的比值,即scale=1920/1280=1.5。[0142]示例性的,第一网页的分辨率为1280*1280,显示设备的物理分辨率为1920*1080。网页标识或网页标签的数值为0,则确定第一网页是非规范化网页。第一网页宽度缩放因子scale1为显示设备的物理水平分辨率与第一水平分辨率的比值,即scale1=1920/1280=1.5;第一网页高度缩放因子scale2为显示设备的物理垂直分辨率与第一垂直分辨率的比值,即scale2=1080/1280=0.84。[0143]在一些实施例中,能力层用于根据所述显示设备的物理分辨率和所述第一分辨率确定第一网页缩放因子。[0144]步骤s808:基于所述第一网页缩放因子将所述第一网页中的元素重新布局、重绘和重排,确定第二网页;[0145]在一些实施例中,基于所述第一网页缩放因子将所述第一网页中的元素重新布局、重绘和重排,确定第二网页的步骤包括:[0146]基于所述第一网页缩放因子对所述第一网页中的元素所在坐标进行计算,得到第二坐标;[0147]根据第二坐标对第一网页中的元素进行重排,得到第二网页。[0148]需要说明的是,本实施例的方法仅适用于第一网页缩放因子大于1的情况。[0149]在一些实施例中,第一网页包括至少一个元素,元素与控件对应,控件包括可选中控件和不可选中控件,可选中控件是指焦点可以移动至该控件对应位置的控件;不可选中控件是指焦点不可以移动至该控件对应位置的控件。[0150]在一些实施例中,第一网页缩放因子只有一个数值,以显示器屏幕的相邻两边为x轴和y轴,以相邻两边的交点为坐标原点建立直角坐标系,确定第一网页的控件中心点的第一坐标(x1,y1),根据第一坐标(x1,y1)和第一网页缩放因子scale确定该控件中心点在第二网页的第二坐标(x2,y2)。其中,x2=x1*scale;y2=y1*scale。[0151]在一些实施例中,第一网页缩放因子包括第一网页宽度缩放因子和第一网页高度缩放因子,以显示器屏幕的相邻两边为x轴和y轴,以相邻两边的交点为坐标原点建立直角坐标系。确定第一网页的控件中心点的第一坐标(x1,y1),根据第一坐标(x1,y1)、第一网页宽度缩放因子scale1和第一网页高度缩放因子scale2确定该控件中心点在第二网页的第二坐标(x2,y2)。其中,x2=x1*scale1;y2=y1*scale2。[0152]在一些实施例中,控件中心点可由控件的四个顶点代替。[0153]示例性的,第一网页的控件的布局如图12所示,第一网页的分辨率为1280*720;显示设备的物理分辨率为1920*1080,经计算第一网页缩放因子为1.5。以图12中第一控件121为例,第一控件121中心点的第一坐标(x1,y1)为(100,650),第一控件121中心点的第二坐标(x2,y2)为(150,975)。其中,x2=x1*scale=100*1.5=150;y2=y1*scale=650*1.5=975,以(150,975)为第一控件121的中心点坐标显示第一控件121。对第一网页的所有控件的中心点坐标都进行计算得到第二坐标后,根据第二坐标对控件进行重排,得到第二网页,如图13所示。[0154]示例性的,第一网页的控件的布局如图14所示,第一网页的分辨率为720*720;显示设备的物理分辨率为1920*1080,经计算第一网页宽度缩放因子scale1为2.7,第一网页高度缩放因子scale2为1.5。以图14中第一控件141为例,第一控件141中心点的第一坐标(x1,y1)为(100,600),第一控件141中心点的第二坐标(x2,y2)为(270,900)。其中,x2=x1*scale1=100*2.7=270;y2=y1*scale2=600*1.5=900,以(270,900)为第一控件141的中心点坐标显示第一控件141。对第一网页的所有控件的中心点坐标都进行计算得到第二坐标后,根据第二坐标对控件进行重排,得到第二网页,如图15所示。[0155]本技术实施例仅对第一网页中控件的坐标进行重新布局,可使第一网页中的控件均匀分布在显示屏幕中,计算方法简单,在接收到用户发送的打开浏览器应用的指令后,可更快显示第二页面。[0156]在一些实施例中,如果所述第一网页中的元素对应控件为文字控件,可根据第一网页缩放因子对所述第一网页中的元素所在坐标进行计算,得到第二坐标,通过可直接将文字控件按照第一网页缩放因子拉伸或收缩。例如:第一网页缩放因子为1.5,可将文字控件按照宽度和高度的1.5倍拉伸。在第二坐标处显示拉伸后的文字控件。[0157]在一些实施例中,如果所述第一网页中的元素对应控件为图像控件,可根据第一网页缩放因子对所述第一网页中的元素所在坐标进行计算,得到第二坐标,通过可直接将图像控件按照第一网页缩放因子拉伸或收缩。例如:第一网页缩放因子为1.5,可将图像控件按照宽度和高度的1.5倍拉伸。在第二坐标处显示拉伸后的图像控件。[0158]本技术实施例仅对第一网页中控件的坐标进行重新布局,可使第一网页中的控件均匀分布在显示屏幕中,并对元素对应的控件进行拉伸或收缩,计算方法简单,且能更好的铺满屏幕,在接收到用户发送的打开浏览器应用的指令后,可更快显示第二页面。[0159]在一些实施例中,基于所述第一网页缩放因子将所述第一网页中的元素重新布局、重绘和重排,确定第二网页的步骤包括:[0160]基于所述第一网页缩放因子对所述第一网页中的元素所在坐标进行计算,得到第二坐标;[0161]基于所述第一网页缩放因子将所述第一网页中的元素大小对所述第一网页中的元素的大小进行计算,得到第二大小;[0162]其中,元素的大小是指衡量元素显示的大小。如果元素对应的控件是图片控件,则图片控件的大小是图片的宽度和高度;如果元素对应的控件是文字控件,则文字控件对应的是文字的字体大小;如果元素对应的控件是组合控件,组合控件是指包括至少两个控件,且可以同时被选中的控件,可将组合控件拆分为两个控件,分别计算两个控件的大小。例如:组合控件中包括图片控件和设置在图片控件底部的文字控件,可分别对图片控件的宽度和高度进行计算,同时,对文字控件的字体大小进行计算。[0163]根据第二坐标对第一网页中的元素进行重排,并在第二坐标的位置绘制所述第二大小的元素,得到第二网页。[0164]在一些实施例中,如果所述第一网页中的元素对应控件为文字控件,确定文字控件特定点的第一坐标(x1,y1)和文字控件中文字的第一字号a1,其中,所述特定点包括文字控件的中心点或顶点;[0165]根据所述文字控件特定点的第一坐标(x1,y1)和所述第一网页缩放因子scale确定所述文字控件特定点的第二坐标(x2,y2);其中,x2=x1*scale;y2=y1*scale。[0166]根据所述文字的第一字号a1和所述第一网页缩放因子scale确定所述文字的第二字号a2;其中,a2=a1*scale;[0167]在一些实施例中,为了避免文字的字体被过度放大,可对第一网页缩放因子设置对应的字体缩放倍数,然后根据字体缩放倍数改变字体的字号。例如当第一网页缩放因子为1.5,字体放大倍数为1.2。[0168]在一些实施例中,第一网页缩放因子包括第一网页宽度缩放因子scale1和第一网页高度缩放因子scale2,所述文字的第二字号a2=a1*scale1或a2=a1*scale2,或者选择第一网页宽度缩放因子scale1和第一网页高度缩放因子scale2中最小值计算文字的第二字号。[0169]在所述第二坐标的位置上绘制所述文字控件,其中,文字控件中文字的大小为第二字号。[0170]示例性的,第一网页的控件的布局如图16所示,第一网页的分辨率为1280*720;显示设备的物理分辨率为1920*1080,经计算第一网页缩放因子为1.5。以图16中第一文字控件161为例,第一文字控件中心点的第一坐标(x1,y1)为(100,650),第一文字控件中心点的第二坐标(x2,y2)为(150,975)。其中,x2=x1*scale=100*1.5=150,y2=y1*scale=650*1.5=975;第一文字控件161的文字第一字号为10,第一文字控件161的文字第二字号为15;其中,a2=a1*scale=10*1.5=15。以(150,975)为第一文字控件161的中心点坐标显示字号为15的第一文字控件161。对第一网页的所有文字控件的中心点坐标和文字字号都进行计算,得到第二坐标和第二字号,根据第二坐标和第二字号对文字控件进行重绘重排,得到第二网页,如图17所示。[0171]示例性的,第一网页的控件的布局如图18所示,显示设备的物理分辨率为1920*1080,第一网页的分辨率为720*720;经计算第一网页宽度缩放因子scale1为2.7,第一网页高度缩放因子scale2为1.5。以图18中第一文字控件181为例,第一文字控件中心点的第一坐标(x1,y1)为(100,650),第一文字控件181中心点的第二坐标(x2,y2)为(150,975)。其中,x2=x1*scale=100*2.7=270,y2=y1*scale=650*1.5=975;第一文字控件181的文字第一字号为10,第一文字控件的文字第二字号为15;其中,a2=a1*scale=10*1.5=15。以(270,975)为第一文字控件181的中心点坐标显示字号为15的第一文字控件181。对第一网页的所有文字控件的中心坐标和文字字号都进行计算得到第二坐标和第二字号后,根据第二坐标和第二字号对文字控件进行重绘重排,得到第二网页,如图19所示。[0172]在一些实施例中,如果所述第一网页中的元素对应控件为图像控件,确定图像控件特定点的第一坐标,以及,所述图像控件的第一宽度和第一高度,所述特定点包括文字控件的中心点或顶点;[0173]根据所述图像控件特定点的第一坐标(x1,y1)和所述第一网页缩放因子scale确定所述图像控件特定点的第二坐标(x2,y2)其中,x2=x1*scale;y2=y1*scale。[0174]根据所述图像控件的第一宽度w1和第一高度h1,以及,所述第一网页缩放因子scale确定所述图像控件的第二宽度w2和第二高度h2;其中,w2=w1*scale,h2=h1*scale。[0175]在一些实施例中,第一网页缩放因子包括第一网页宽度缩放因子scale1和第一网页高度缩放因子scale2,所述图像控件的第二宽度w2=w1*scale1和第二高度h2=h1*scale2。[0176]在一些实施例中,为了避免图像的长宽比例失衡,当第一网页缩放因子包括第一网页宽度缩放因子scale1和第一网页高度缩放因子scale2,可选取二者中较小的值进行宽高的计算。例如:scale1<scale2,图像控件的第二宽度w2=w1*scale1和第二高度h2=h1*scale1。[0177]在所述图像控件特定点的第二坐标上绘制所述图像控件,所述图像控件的宽度为第二宽度,所述图像控件的高度为第二高度。[0178]需要说明的是,在第二坐标上绘制第二宽度和第二高度的图像控件中,并不是将图像控件直接拉伸和收缩,而是根据第一网页缩放因子对图像控件进行重新绘制。[0179]对图像控件进行重新绘制的步骤包括:识别图像中每个像素点的颜色,确定至少一个像素块,所述像素块内像素点的颜色相同;根据像素块的第一区域和第一网页缩放因子确定像素块的第二区域,在第二区域的像素设置为红色像素。可对原像素块的边界长度同时乘以第一网页缩放因子,从而确定像素块的第二区域。边界长度是指像素块边缘的直线,像素块由数个边界围成的闭合图形。以4*2的长方形红色像素块为例,第一网页缩放因子为1.5,则红色像素块的第二区域为6*3的长方形,红色像素块具体显示位置可由与图像控件特定点相对位置确定,也可由红色像素块在坐标系的实际坐标确定。[0180]示例性的,第一网页的控件的布局如图16所示,第一网页的分辨率为1280*720;显示设备的物理分辨率为1920*1080,经计算第一网页缩放因子为1.5。以图16中第一图像控件162为例,第一图像控件162左上顶点的第一坐标(x1,y1)为(100,500),第一图像控件162左上顶点的第二坐标(x2,y2)为(150,750)。其中,x2=x1*scale=100*1.5=150,y2=y1*scale=500*1.5=750;第一图像控件的第一宽度为400,第一高度为400,第一图像控件的第二宽度为600,第二高度为600。以(150,750)为第一图像控件162的左上顶点坐标显示宽度为600、高度为600的第一图像控件162。对第一网页的所有图像控件的左上顶点坐标和宽高都进行计算得到第二坐标、第二宽度和第二高度后,根据第二坐标第二宽度和第二高度对图像控件进行重绘重排,得到第二网页,如图17所示。[0181]示例性的,第一网页的控件的布局如图18所示,第一网页的分辨率为720*720;显示设备的物理分辨率为1920*1080;经计算第一网页宽度缩放因子scale1为2.7,第一网页高度缩放因子scale2为1.5。以图18中第一文字控件182为例,第一图像控件左上顶点的第一坐标(x1,y1)为(100,500),第一图像控件左上顶点的第二坐标(x2,y2)为(270,750)。其中,x2=x1*scale=100*2.7=270,y2=y1*scale=500*1.5=750;第一图像控件的第一宽度为200,第一高度为200,第一图像控件的第二宽度为540,第二高度为300。以(270,750)为第一图像控件182的左上顶点坐标显示宽度为540,高度为300的第一图像控件182。对第一网页的所有图像控件的左上顶点坐标和宽高都进行计算得到第二坐标、第二宽度和第二高度后,根据第二坐标第二宽度和第二高度对图像控件进行重绘重排,得到第二网页,如图19所示。[0182]本实施例防止出现屏幕一小块区域渲染网页内容或满屏显示部分网页内容的情况,给用户展现合适视口且页面清晰,给用户带来良好体验。[0183]步骤s809:控制所述显示器显示所述第二网页。[0184]如果所述文件对象模型树不包含元视口标签,控制器250执行步骤s810:控制所述显示器显示第二分辨率对应的第一网页。[0185]在一些实施例中,如果所述文件对象模型树不包含元视口标签,控制器250还可执行根据所述显示设备的物理分辨率和所述第二分辨率确定第二网页缩放因子;[0186]基于所述第二网页缩放因子将所述第一网页中的元素重新布局、重绘和重排,得到第三网页;[0187]控制所述显示器显示所述第三网页。[0188]其中,第二缩放因子的计算方法与第一缩放因子的计算方法相同,第三网页的确定方法与第二网页的确定方法相同,在此不再赘述。[0189]同一浏览器应用中不同网页的分辨率可能不同,在同一浏览器应用中用户切换网页的过程中,可能会出现闪屏现象。本技术实施例可以动态检测网页渲染模式,即网页的第一分辨率,并根据第一分辨率和显示设备的物理分辨率重新布局、重绘和重排,以使当切换后的网页与当前网页的分辨率不同,仍可以与显示设备的物理分辨率相适配,在切换网页的过程中均能给用户显示合适视口。[0190]在一些实施例中,当用户按压控制装置100的某一按键后,可显示当前打开的所有应用程序,打开的应用程序中包括至少两个浏览器应用。当接收到用户输入的切换应用程序的指令后,使得焦点从第一浏览器应用控件移动至第二浏览器应用控件,取消显示第一浏览器应用的页面,同时,显示第二浏览器应用的页面。示例性的,当用户按压控制装置100的某一按键后显示如图20的用户界面,图20包括第一浏览器应用控件201、第二浏览器应用控件202、第三应用控件203、应用页面展示区204和焦点205。当前焦点指示第一浏览器应用控件201被选择,应用页面展示区204展示第一浏览器应用控件201对应的页面。当用户按压控制装置100的下键后,焦点205指示第二浏览器应用控件202被选择,此时,加载第二浏览器应用的页面并在应用页面展示区204显示,如图21所示。本技术实施例可以动态检测网页渲染模式,即网页的第一分辨率,并根据第一分辨率和显示设备的物理分辨率重新布局、重绘和重排,以使切换到不同分辨率的浏览器应用时,仍可以与显示设备的物理分辨率相适配,在切换浏览器应用的过程中不会出现闪屏,且能给用户显示合适视口。[0191]本技术的一些实施例提供一种网页显示方法,所述方法适用于显示设备,显示设备包括显示器和控制器,所述控制器,被配置为:响应于用户输入打开浏览器应用的指令,开始加载所述浏览器应用的第一网页;解析下载的所述第一网页,得到文件对象模型树;如果所述文件对象模型树包含元视口标签,根据所述元视口标签确定所述第一网页的第一分辨率;根据所述显示设备的物理分辨率和所述第一分辨率确定第一网页缩放因子;基于所述第一网页缩放因子将所述第一网页中的元素重新布局、重绘和重排,确定第二网页;控制所述显示器显示所述第二网页。本技术的一些实施例可防止出现屏幕闪屏、屏幕一小块区域渲染网页内容或满屏显示部分网页内容的现象,给用户展现合适视口还使得网页展示更加清晰,提升用户体验。[0192]最后应说明的是:以上各实施例仅用以说明本技术的技术方案,而非对其限制;尽管参照前述各实施例对本技术进行了详细的说明,本领域的普通技术人员应当理解:其依然可以对前述各实施例所记载的技术方案进行修改,或者对其中部分或者全部技术特征进行等同替换;而这些修改或者替换,并不使相应技术方案的本质脱离本技术各实施例技术方案的范围。[0193]为了方便解释,已经结合具体的实施方式进行了上述说明。但是,上述示例性的讨论不是意图穷尽或者将实施方式限定到上述公开的具体形式。根据上述的教导,可以得到多种修改和变形。上述实施方式的选择和描述是为了更好的解释原理及实际的应用,从而使得本领域技术人员更好的使用所述实施方式以及适于具体使用考虑的各种不同的变形的实施方式。当前第1页12当前第1页12
当前第1页1 2 
网友询问留言 已有0条留言
  • 还没有人留言评论。精彩留言会获得点赞!
1