屏幕适配显示方法、电子设备及计算机存储介质技术

技术编号:21183854 阅读:27 留言:0更新日期:2019-05-22 14:47
本发明专利技术实施例公开了一种屏幕适配显示方法、电子设备及计算机存储介质,用于调整页面布局以适配屏幕显示。其中方法包括:获取当前屏幕待显示页面的预设布局模板;检测当前屏幕的屏幕长宽比与预设布局模板的标准长宽比是否一致;若屏幕长宽比与标准长宽比不一致,则依据屏幕长宽比、标准长宽比以及预设布局模板所包括的界面元素数量,调整待显示页面的页面布局,以适配当前屏幕进行显示。由此可见,本发明专利技术方案可以通过对页面布局的调整,实现待显示页面在当前屏幕的适配显示,避免页面中出现大量空白或不能完全显示的现象,从而提高页面信息显示的有效性、页面显示的美观性以及不同屏幕规格智能设备所属用户的用户体验。

Screen Adaptation Display Method, Electronic Equipment and Computer Storage Media

The embodiment of the present invention discloses a screen adaptation display method, an electronic device and a computer storage medium for adjusting the page layout to fit the screen display. The methods include: obtaining the preset layout template of the page to be displayed on the current screen; checking whether the length-width ratio of the screen is consistent with the standard aspect ratio of the preset layout template; adjusting the page layout of the page to be displayed according to the length-width ratio of the screen, the standard aspect ratio and the number of interface elements included in the preset layout template, if the length-width ratio of the screen is inconsistent with the standard aspect ratio. Bureau to fit the current screen for display. Thus, the scheme of the invention can realize the adaptive display of the page to be displayed on the current screen by adjusting the layout of the page, avoid a large number of blanks or incomplete display in the page, thereby improving the effectiveness of page information display, the aesthetics of page display and the user experience of the users belonging to the intelligent devices with different screen specifications.

【技术实现步骤摘要】
屏幕适配显示方法、电子设备及计算机存储介质
本专利技术实施例涉及计算机
,具体涉及一种屏幕适配显示方法、电子设备及计算机存储介质。
技术介绍
随着智能设备配合计算机技术的快速发展,基于不同屏幕规格的智能设备越来越普及于大众。目前,不同屏幕规格的智能设备在现有市场当中的占有率不同。相应的,各类软件例如电子书等,通常会基于主流屏幕规格的智能设备而对用户界面进行设计,得到主流屏幕规格对应页面布局模板,从而以该页面布局模板为标准,在各类智能设备上进行显示。其中,主流屏幕规格的智能设备基于对应页面布局模板可以得到屏幕适配显示。然而,其他屏幕规格的智能设备无法依据主流屏幕规格对应页面布局模板进行适配显示,进而影响页面信息的有效显示,降低页面显示的美观性以及不同屏幕规格智能设备所属用户的用户体验。
技术实现思路
鉴于上述问题,提出了本专利技术实施例以便提供一种克服上述问题或者至少部分地解决上述问题的屏幕适配显示方法、电子设备及计算机存储介质。根据本专利技术的一个方面,提供了一种屏幕适配显示方法,用于调整页面布局以适配屏幕显示,该方法包括:获取当前屏幕待显示页面的预设布局模板;检测所述当前屏幕的屏幕长宽比与所述预设布局模板的标准长宽比是否一致;若所述屏幕长宽比与所述标准长宽比不一致,则依据所述屏幕长宽比、所述标准长宽比以及所述预设布局模板所包括的界面元素数量,调整待显示页面的页面布局,以适配所述当前屏幕进行显示。根据本专利技术的另一方面,提供了一种电子设备,包括:处理器、存储器、通信接口和通信总线,处理器、存储器和通信接口通过通信总线完成相互间的通信;存储器用于存放至少一可执行指令,可执行指令使处理器执行以下操作:获取当前屏幕待显示页面的预设布局模板;检测所述当前屏幕的屏幕长宽比与所述预设布局模板的标准长宽比是否一致;若所述屏幕长宽比与所述标准长宽比不一致,则依据所述屏幕长宽比、所述标准长宽比以及所述预设布局模板所包括的界面元素数量,调整待显示页面的页面布局,以适配所述当前屏幕进行显示。根据本专利技术的又一方面,提供了一种计算机存储介质,存储介质中存储有至少一可执行指令,可执行指令使处理器执行以下操作:获取当前屏幕待显示页面的预设布局模板;检测所述当前屏幕的屏幕长宽比与所述预设布局模板的标准长宽比是否一致;若所述屏幕长宽比与所述标准长宽比不一致,则依据所述屏幕长宽比、所述标准长宽比以及所述预设布局模板所包括的界面元素数量,调整待显示页面的页面布局,以适配所述当前屏幕进行显示。根据本专利技术的屏幕适配显示方法、电子设备及计算机存储介质,在进行页面显示之前,获取待显示页面的预设页面布局模板,通过对当前屏幕的屏幕长宽比与预设布局模板关联适配的标准屏幕长宽比进行比较,在确定不一致时,基于当前屏幕的屏幕长宽比、预设布局模板关联适配的标准长宽比以及预设布局模板所包括的界面元素数量,对待显示页面的页面布局进行调整,以适配当前屏幕进行显示。利用本实施例的屏幕适配显示方法,可以在页面布局模板与当前屏幕不适配的情况下,通过对页面布局的调整,实现了待显示页面在当前屏幕的适配显示,避免了页面中出现大量空白或不能完全显示的现象,从而提高了页面信息显示的有效性、页面显示的美观性以及不同屏幕规格智能设备所属用户的用户体验。上述说明仅是本专利技术实施例技术方案的概述,为了能够更清楚了解本专利技术实施例的技术手段,而可依照说明书的内容予以实施,并且为了让本专利技术实施例的上述和其它目的、特征和优点能够更明显易懂,以下特举本专利技术实施例的具体实施方式。附图说明通过阅读下文优选实施方式的详细描述,各种其他的优点和益处对于本领域普通技术人员将变得清楚明了。附图仅用于示出优选实施方式的目的,而并不认为是对本专利技术的限制。而且在整个附图中,用相同的参考符号表示相同的部件。在附图中:图1示出了本专利技术实施例一提供的一种屏幕适配显示方法的流程图;图2示出了本专利技术实施例一提供的页面布局调整的示例图;图3示出了本专利技术实施例二提供的一种屏幕适配显示方法的流程图;图4示出了本专利技术实施例二提供的页面布局调整的另一示例图;图5示出了本专利技术实施例二提供的页面布局调整的另一示例图;图6示出了本专利技术实施例二提供的页面布局调整的另一示例图;图7示出了本专利技术实施例二提供的页面布局调整的另一示例图;图8示出了本专利技术实施例三提供的一种屏幕适配显示方法的流程图;图9示出了本专利技术实施例五提供的一种电子设备的结构示意图。具体实施方式下面将参照附图更详细地描述本公开的示例性实施例。虽然附图中显示了本公开的示例性实施例,然而应当理解,可以以各种形式实现本公开而不应被这里阐述的实施例所限制。相反,提供这些实施例是为了能够更透彻地理解本公开,并且能够将本公开的范围完整的传达给本领域的技术人员。实施例一图1示出了本专利技术实施例一提供的一种屏幕适配显示方法的流程图,用于调整页面布局以适配屏幕显示。如图1所示,该方法包括以下步骤:步骤S101,获取当前屏幕待显示页面的预设布局模板。在本专利技术具体实施例中,当前屏幕是指用户所持电子设备进行页面显示的屏幕。通过对电子设备的系统接口,可以获得当前屏幕的属性信息。其中,当前屏幕的属性信息可以包括屏幕分辨率以及屏幕比例等长宽比信息。本实施例中,待显示页面是指电子设备屏幕当前即将显示但并未显示出来的页面。待显示页面可以为应用程序所关联的任何显示页面,页面中可以包括各种形式的界面元素。相应的,预设布局模板是指应用程序后台开发人员预先设计的页面布局模板。预设布局模板以预先指定的屏幕分辨率为基准,例如当下主流的分辨率,在预设布局模板中,预先设计了页面中各界面元素所显示的具体内容、界面元素的显示位置以及各界面元素之间的间隔等布局设计。从而电子设备可以通过调用预设布局模板,按照预设布局模板中规定的页面布局进行关联页面的显示。具体的,在当前屏幕即将显示待显示页面时,电子设备可以从服务端获取待显示页面的预设布局模板。或者,预设布局模板可以在应用程序的安装时,预先保存在电子设备的本地存储中,从而电子设备可以从本地存储中获取待显示页面的预设布局模板。步骤S102,检测当前屏幕的屏幕长宽比与预设布局模板的标准长宽比是否一致。在本专利技术具体实施例中,长宽比是指屏幕宽度和高度之间的比例,还可以称为纵横比或屏幕比例,通常由屏幕的较长长度与较短长度之间的比值来表示,可以根据屏幕物理分辨率计算得到。长屏是指屏幕的纵向长度明显超过横向长度的屏幕,宽屏是指屏幕的横向长度明显超过纵向长度的屏幕。不同屏幕在长宽比相同的情况下,其分辨率不一定相同。例如,根据现有电子设备所采用的屏幕,屏幕长宽比可以包括16:9或19:9等,相应的,屏幕分辨率分可以为1080×1920或1080×2280,但不限于此。其中针对1080×1920分辨率,表示屏幕水平方向含有像素数量为1080个,竖直方向含有像素数量为1920个。本实施例中,以屏幕或画面正常显示为基准,确定纵向长度与横向长度的比值来表示长宽比。相应的,当前屏幕的屏幕长宽比是指当前屏幕正常显示时,例如竖屏或横屏,屏幕的纵向长度与横向长度的比值。由于预设布局模板适配于指定的屏幕长宽比或屏幕分辨率,例如当前主流的屏幕,因此将预设布局模板所适配的屏幕长宽比称为标准长宽比,将预设布局模板所适配的屏幕分辨率称为本文档来自技高网...

【技术保护点】
1.一种屏幕适配显示方法,用于调整页面布局以适配屏幕显示,其中,所述方法包括:获取当前屏幕待显示页面的预设布局模板;检测所述当前屏幕的屏幕长宽比与所述预设布局模板的标准长宽比是否一致;若所述屏幕长宽比与所述标准长宽比不一致,则依据所述屏幕长宽比、所述标准长宽比以及所述预设布局模板所包括的界面元素数量,调整待显示页面的页面布局,以适配所述当前屏幕进行显示。

【技术特征摘要】
1.一种屏幕适配显示方法,用于调整页面布局以适配屏幕显示,其中,所述方法包括:获取当前屏幕待显示页面的预设布局模板;检测所述当前屏幕的屏幕长宽比与所述预设布局模板的标准长宽比是否一致;若所述屏幕长宽比与所述标准长宽比不一致,则依据所述屏幕长宽比、所述标准长宽比以及所述预设布局模板所包括的界面元素数量,调整待显示页面的页面布局,以适配所述当前屏幕进行显示。2.根据权利要求1所述的方法,其中,所述依据所述屏幕长宽比、所述标准长宽比以及所述预设布局模板所包括的界面元素数量,调整待显示页面的页面布局,包括:基于所述预设布局模板关联的标准分辨率的横向分辨率,确定所述当前屏幕的屏幕分辨率相对于所述标准分辨率的纵向分辨率差值;依据所述预设布局模板以及所述界面元素数量,确定待显示页面中各界面元素之间的纵向间隔数量;依据所述纵向分辨率差值以及所述纵向间隔数量,调整所述待显示页面的页面布局。3.根据权利要求2所述的方法,其中,所述基于所述预设布局模板关联的标准分辨率的横向分辨率,确定所述当前屏幕的屏幕分辨率相对于所述标准分辨率的纵向分辨率差值,包括:依据所述当前屏幕的屏幕分辨率以及所述标准分辨率,确定当前屏幕的横向分辨率与标准分辨率的横向分辨率之间的横向缩放比例;依据所述横向缩放比例,确定当前屏幕缩放后的纵向分辨率;依据所述当前屏幕缩放后的纵向分辨率,以及标准分辨率的纵向分辨率,确定纵向分辨率差值。4.根据权利要求3所述的方法,其中,所述依据所述纵向分辨率差值以及所述纵向间隔数量,调整所述待显示页面的页面布局,包括:按照所述横向缩放比例对所述预设布局模板进行缩放处理,确定初始页面布局模板,以适配当前屏幕的横向显示;依据所述纵向分辨率差值以及所述纵向间隔数量,调整所述初始页面布局模板中各界面元素之间纵向间隔的间隔距离,确定当前页面布局模板,以适配所述当前屏幕的纵向显示。5.根据权利要求4所述的方法,其中,所述依据所述纵向分辨率差值以及所述纵向间隔数量,调整所述初始页面布局模板中各界面元素之间纵向间隔的间隔距离,确定当前页面布局模板,包括:依据所述纵向分辨率差值以及所述纵向间隔数量,确定平均调整距离;依据所述纵向分辨率差值,若所述当前屏幕缩放后的纵向分辨率大于所述标准分辨率的纵向分辨率,则将所述各界面元素之间纵向间隔的间隔距离调整延长所述平均调整距离,确定当前页面布局模板;或者若所述当前屏幕缩放后的纵向分辨率小于所述标准分辨率的纵向分辨率,则将所述各界面元素之间纵向间隔的间隔距离调整缩减所述平均调整距离...

【专利技术属性】
技术研发人员:汪亚磊
申请(专利权)人:掌阅科技股份有限公司
类型:发明
国别省市:北京,11

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1