CN105718594A - 智能终端界面自适应显示方法 - Google Patents

Abstract

本发明涉及界面自适应显示技术，目的是为了解决现有智能终端显示内容时，所显示的内容无法根据终端的屏幕尺寸进行自动调整的问题。本发明提供一种智能终端界面自适应显示方法，包括如下步骤：获取智能终端显示屏的参数信息，所述智能终端显示屏的参数信息至少包括显示屏的尺寸及物理分辨率；接收用户通过智能终端发送的应用请求信息后，根据所述智能终端显示屏的尺寸对待显示信息的宽度进行处理，并根据显示屏的物理分辨率对待显示的信息进行分辨率匹配；将处理后的待显示信息推送到智能终端进行显示。本发明适用于智能终端界面自适应显示。

Description

智能终端界面自适应显示方法

技术领域

本发明涉及界面自适应显示技术，特别涉及一种智能终端界面自适应显示方法。

背景技术

html超文本标记语言目前已经能够进行智能终端的界面自适应，“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言的结构包括“头”部分(英语：Head)、和“主体”部分(英语：Body)，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。随着智能机的不断普及，人们越来越习惯通过智能移动终端随时随地的享受互联网带来的便捷。为了应对由此引发的设备多样性问题，我们对不同智能终端，根据终端的屏幕尺寸智能显示，以提高用户的体验度。

发明内容

本发明的目的是为了解决现有智能终端显示内容时，所显示的内容无法根据终端的屏幕尺寸进行自动调整的问题。

为达到上述目的，本发明提供一种智能终端界面自适应显示方法，其特征在于，包括如下步骤：

获取智能终端显示屏的参数信息，所述智能终端显示屏的参数信息至少包括显示屏的尺寸及物理分辨率；

接收用户通过智能终端发送的应用请求信息后，根据所述智能终端显示屏的尺寸对待显示信息的宽度进行处理，并根据显示屏的物理分辨率对待显示的信息进行分辨率匹配；

将处理后的待显示信息推送到智能终端进行显示。

具体地，对所述待显示信息的宽度进行处理后，待显示信息界面的宽度等于智能终端显示屏的宽度。

具体地，对待显示信息进行分辨率处理后，所述待显示信息的分辨率与显示屏的分辨率相同。

具体地，当待显示的信息为网页时，所述网页的布局及网页中的元素的宽度采用相对宽度布局的方式。

具体地，当待显示信息中包括文字时，所述文字使用相对大小的方式显示。

具体地，若显示屏的宽度太小，无法显示两个以上的元素时，顺序在后的元素自动滚动到顺序在前的元素的下方。

本发明的有益效果是：本发明通过对智能终端待显示信息进行匹配处理后再由智能终端对信息进行显示，实现了显示内容与终端屏幕尺寸相适应的问题，提高了用户使用智能终端的体验。

具体实施方式

以下对本发明的技术方案作进一步详细描述。

本发明针对现有智能终端显示内容时，所显示的内容无法根据终端的屏幕尺寸进行自动调整的问题，提供一种智能终端界面自适应显示方法，其特征在于，包括如下步骤：获取智能终端显示屏的参数信息，所述智能终端显示屏的参数信息至少包括显示屏的尺寸及物理分辨率；接收用户通过智能终端发送的应用请求信息后，根据所述智能终端显示屏的尺寸对待显示信息的宽度进行处理，并根据显示屏的物理分辨率对待显示的信息进行分辨率匹配；将处理后的待显示信息推送到智能终端进行显示。

以下对本发明方法的具体实现进行详细说明。

为了达到终端界面的自动适应，我们做了以下操作：

1)动态配置页面内容：通过管理平台动态配置移动终端显示页面的具体信息，做到运营部门对页面内容的实时掌控。

2)允许网页宽度自动调整：实现网页宽度默认等于屏幕宽度。

3)不使用绝对宽度：由于网页会根据屏幕宽度调整布局，所以我们不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。

4)相对大小的字体:我们在字体上也没有使用传统网页中使用的绝对大小(px)，而是使用了相对大小(em)。

5)流动布局:区块布局上，我们将各个区块设置为浮动的，而不是固定不变的。

6)图片的自适应:除了布局和文本，为了达到界面的自动适应我们还实现了图片的自动缩放。

为实现网页宽度默认等于屏幕宽度，在网页代码的头部，加入一行viewport元标签：<metaname＝”viewport”content＝”width＝device-width,initial-scale＝1″/>viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度(width＝device-width)，原始缩放比例(initial-scale＝1)为1.0，即网页初始大小占屏幕面积的100％。

由于网页会根据屏幕宽度调整布局，所以我们不能使用绝对宽度的布局，也不能使用具有绝对宽度的元素。具体说，CSS代码不能指定像素宽度：width:xxxpx，只能指定百分比宽度：width:xx％；或者width:auto。

我们在字体上也没有使用传统网页中使用的绝对大小(px)，而是使用了相对大小(em)。body{font:normal100％Helvetica,Arial,sans-serif；}

上面的代码指定，字体大小是页面默认大小的100％，即16像素。

h1{font-size:1.5em；}

然后，h1的大小是默认大小的1.5倍，即24像素(24/16＝1.5)。

区块布局上，我们将各个区块设置为浮动的，而不是固定不变的。

.main{float:right；width:70％；}

.leftBar{float:left；width:25％；}

float的好处是，如果宽度太小，放不下两个元素，后面的元素会自动滚动到前面元素的下方，不会在水平方向overflow(溢出)，避免了水平滚动条的出现。

img{max-width:100％；}让图片根据自身宽度等比例缩放。

Claims (6)

1.智能终端界面自适应显示方法，其特征在于，包括如下步骤：

获取智能终端显示屏的参数信息，所述智能终端显示屏的参数信息至少包括显示屏的尺寸及物理分辨率；

接收用户通过智能终端发送的应用请求信息后，根据所述智能终端显示屏的尺寸对待显示信息的宽度进行处理，并根据显示屏的物理分辨率对待显示的信息进行分辨率匹配；

将处理后的待显示信息推送到智能终端进行显示。

2.如权利要求1所述的智能终端界面自适应显示方法，其特征在于，对所述待显示信息的宽度进行处理后，待显示信息界面的宽度等于智能终端显示屏的宽度。

3.如权利要求1或2所述的智能终端界面自适应显示方法，其特征在于，对待显示信息进行分辨率处理后，所述待显示信息的分辨率与显示屏的分辨率相同。

4.如权利要求3所述的智能终端界面自适应显示方法，其特征在于，当待显示的信息为网页时，所述网页的布局及网页中的元素的宽度采用相对宽度布局的方式。

5.如权利要求3所述的智能终端界面自适应显示方法，其特征在于，当待显示信息中包括文字时，所述文字使用相对大小的方式显示。

6.如权利要求4或5所述的智能终端界面自适应显示方法，其特征在于，若显示屏的宽度太小，无法显示两个以上的元素时，顺序在后的元素自动滚动到顺序在前的元素的下方。