CN107797801A - 一种基于多种移动终端界面的适配方法 - Google Patents

Abstract

本发明公开了一种基于多种移动终端界面的适配方法，通过利用viewport、css、rem和设置字体大小，实现移动应用开发的多移动终端界面适配：控制 viewport 的大小，指定viewport的宽度和高度；将viewport的target‑densitydpi设置为device‑dpi，页面将根据当前屏幕的像素密度进行展示，结合步骤1），则页面将与屏幕相适应；将viewport分成10rem，并计算出1rem在当前浏览器的像素值，把它赋予html标签的font‑size；写CSS代码时，遇到要适配的地方，不再用px，改成用rem JS和Html。本发明实现移动应用开发的多移动终端界面适配，提高了移动应用界面的清晰度，提升了移动应用界面适配效率。

Description

一种基于多种移动终端界面的适配方法

技术领域

本发明涉及在移动互联网环境下移动终端界面适配技术，具体说是针对电力信息微应用页面的一种基于多种移动终端界面的适配方法。

背景技术

物理像素(physical pixel)

一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作***的调度下，每一个设备像素都有自己的颜色值和亮度值。

设备独立像素(density-independent pixel)

设备独立像素(也叫密度无关像素)，可以认为是计算机坐标***中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如: css像素)，然后由相关***转换为物理像素。

所以说，物理像素和设备独立像素之间存在着一定的对应关系，这就是接下来要说的设备像素比。

设备像素比(device pixel ratio )

设备像素比(简称dpr)定义了物理像素和设备独立像素的对应关系，它的值可以按如下的公式的得到：

设备像素比 = 物理像素 / 设备独立像素

在javascript中，可以通过window.devicePixelRatio获取到当前设备的dpr。

在css中,可以通过媒体查询，对不同dpr的设备，做一些样式适配(这里只针对webkit内核的浏览器和webview)。

随着智能手机的不断普及，对移动端应用的开发需求越来越多，面对各种不同屏幕尺寸和不同分辨率的手机，如何快速高效的开发出适配所有手机的HTML5页面成为困扰HTML5开发人员的重大问题。

发明内容

本发明的目的是提供一种基于多种移动终端界面的适配方法，通过利用viewport、css、rem和设置字体大小等屏幕适配方法，实现移动应用开发的多移动终端界面适配，提高了移动应用界面的清晰度，提升了移动应用界面适配效率。

本发明的目的通过以下技术方案实现：

一种基于多种移动终端界面的适配方法，其特征在于：该方法通过利用viewport、css、rem和设置字体大小，实现移动应用开发的多移动终端界面适配，具体如下：

1）控制 viewport 的大小，指定viewport的宽度和高度；

2）为了避免手机浏览器和WebView 根据不同屏幕像素密度对页面进行缩放，将viewport的target-densitydpi设置为device-dpi，页面将根据当前屏幕的像素密度进行展示，结合步骤1），则页面将与屏幕相适应；

3）将viewport分成10rem，并计算出1rem在当前浏览器的像素值，把它赋予html标签的font-size；

4）写CSS代码时，遇到要适配的地方，不再用px，改成用rem JS和Html。

本发明具体要求如下：

1）适配原则

（11）客户端的logo，在各个手机上都清晰地显示；

（12）标题或者底部栏100%的与手机宽度适配；

（13）文字内容如果显示不下的话，自动适配宽度进行折行；

（14）图片根据宽度进行自动缩放，屏幕宽度超过图片本身时，显示图片本身的大小；

（15）适配过程中，界面的元素的宽高最小值符合用户的主观舒适范围值；

（16）不能完全使用分辨率的绝对比例来对界面布局进行缩放；

2） 适配方法

（21）图片资源的缩放

基于当前屏幕的密度，平台自动加载任何未经缩放的限定尺寸和密度的图片；如果图片不匹配，平台会加载默认资源并且在放大或者缩小之后满足当前界面的显示要求；如果没有多套资源，平台会认为默认的资源是中密度的屏幕资源；

（22）密度不同的屏幕适配，根据分辨率和坐标自动缩放

如果程序不支持多种密度屏幕，平台会自动缩放绝对像素坐标值和尺寸值，保证屏幕元素能和密度160的屏幕上一样能显示出同样物理尺寸的效果；平台会根据密度的比例来缩放实际尺寸的大小；

（23）屏幕不同的适配，兼容更大的屏幕大小

当前屏幕超过程序所支持屏幕的上限时，定义supports-screens元素，超出显示的基准线时，平台以屏幕大小的比例来缩放整个屏幕；

3）适配规则

（31）向上适配，标准屏向更大、分辨率高，物理尺寸大的屏幕适配

在向更大的屏幕适配时，根据设备分辨率的不同，会分为两种状态：

A．如果两者的屏幕分辨率密度差不多，物理尺寸更大的屏幕；那可以直接在当前尺寸上拉长、拉宽即可，图标、行距保持不变；

B. 如果屏幕密度要大很多，物理尺寸差不多的，则适配点包括：

B1设计多套图标，需要有更大分辨率的图标；

B2使用不同的字体，需要更大的字体来适配大设备分辨率的屏幕；

B3增加行间距；

B4自适应放大内容中的图片；

B5 Tab页签 需要根据屏幕的大小来确认每屏最多显示的数目；

（32）向下适配

在向更小的屏幕适配，集中在如下几点：

（321）考虑一些极限点的改进，需要适配到小屏幕的手机中；

（322）title、bottom栏与小屏幕宽度适配；

（323）考虑到行高的设计适合更小的屏幕高度；

（324）在结构上，考虑在小屏幕中，显示是否合适；

（325）根据屏幕密度的比例来设计屏幕元素，需要更小分辨率的屏幕元素；

（326）使用小的字体，具体的大小需要根据屏幕的大小来设定。

本发明针对移动终端界面适配问题，利用viewport、css、rem和字体大小设置等方式，实现了一整套不同终端的界面适配方案。

本发明通过利用viewport、css、rem和设置字体大小等屏幕适配方法，实现移动应用开发的多移动终端界面适配，提高了移动应用界面的清晰度，提升了移动应用界面适配效率。

具体实施方式

一种基于多种移动终端界面的适配方法，该方法通过利用viewport、css、rem和设置字体大小，实现移动应用开发的多移动终端界面适配，具体如下：

控制 viewport 的大小，指定viewport的宽度和高度，可以是指定的一个值或者特殊的值，如 device-width 为设备的宽度（单位为缩放为 100% 时的 CSS 的像素）。

为了避免手机浏览器和WebView 根据不同屏幕像素密度对页面进行缩放，将viewport的target-densitydpi设置为device-dpi， 页面将根据当前屏幕的像素密度进行展示，则页面将与屏幕相适应。

将viewport分成10rem，并计算出1rem在当前浏览器的像素值，把它赋予html标签的font-size。

写CSS代码时，遇到要适配的地方，比如width，margin，padding等，就不要再用px了，改成用rem JS和Html。

物理尺寸决定了屏幕的实际尺寸，而分辨率可以表示屏幕上可以呈现的像素点数，屏幕密度决定了屏幕的精细程度。相同的屏幕大小，如果分辨率高，则屏幕元素更精细。一个界面元素在屏幕里的实际尺寸却是与屏幕密度相关，屏幕密度较小的屏上，界面元素的实际尺寸就会大些，反之亦然。在进行手机界面布局中，除了元素的像素值外，考虑元素的实际尺寸也非常重要，甚至更为重要。在不同屏幕中，不同的图标点阵或者不同的字体及大小的汉字，在人的主观感知上，会有一个最优的结果值。在设计的过程中，需要根据这个最优值来进行界面的布局及设计。

1．目标的屏幕大小

屏幕大小由宽度和高度两个因素决定，但是在布局手机客户端的过程中，最关心的是宽度值。宽度确定后，高度可以由滚动或者翻页来显示所有内容；文字可以在适当的位置折行；标题栏可以伸缩适配屏幕宽度等等。但并不是不考虑高度，图标、文字、特殊的组件不仅需要考虑宽度，也需要考虑整个屏幕的布局是否与之适配。由于不可能对所有的客户端进行单独的开发，因此，需要对手机屏幕的大小的归类。同时，在设计中也不会真的只考虑屏幕大小一个因素，屏幕大小和操作***、手机类型等还是存在很大的相关性的。

2．适配原则

1 客户端的logo，在各个手机上都应该清晰地显示；

2 标题或者底部栏必须100%的与手机宽度适配；

3 文字内容如果显示不下的话，可以自动适配宽度进行折行；

4 图片可以根据宽度进行自动缩放，屏幕宽度超过图片本身时，显示图片本身的大小；

5 适配过程中，界面的元素的宽高最小值应该符合用户的主观舒适范围值；

6 不能完全使用分辨率的绝对比例来对界面布局进行缩放；

3．适配方法

1） 图片资源的缩放

基于当前屏幕的密度，平台自动加载任何未经缩放的限定尺寸和密度的图片。如果图片不匹配，平台会加载默认资源并且在放大或者缩小之后可以满足当前界面的显示要求。如果没有多套资源，平台会认为默认的资源是中密度的屏幕资源（160dpi）。例如，当前为高密度屏幕，平台会加载高密度资源（如图片），如果没有，平台会将中密度资源缩放至高密度。

2） 根据分辨率和坐标自动缩放（密度不同的屏幕适配）

如果程序不支持多种密度屏幕，平台会自动缩放绝对像素坐标值和尺寸值等，这样就能保证屏幕元素能和密度160的屏幕上一样能显示出同样物理尺寸的效果。平台会根据密度的比例来缩放实际尺寸的大小。

3） 兼容更大的屏幕大小（屏幕不同的适配）

当前屏幕超过程序所支持屏幕的上限时，定义supports-screens元素，这样超出显示的基准线时，平台会以屏幕大小的比例来缩放整个屏幕。

由上信息可知，当前的Android手机主要集中在标准屏的中密度和高密度两个型号上。因此在设计中，主要是设计其中的一种为主，再去适配另一个型号即可。对于在一个档次上的手机，都会根据上述的三个原则，***自动去适配。在进行Android手机设计时，如果只准备一套资源时，应该以高密度的版本为主，这样去适配中密度时，效果更好。

4 适配规则

1）向上适配（标准屏向更大【分辨率高，物理尺寸大】的屏幕适配）

在向更大的屏幕适配时，根据设备分辨率的不同，会分为两种状态。

A．如果两者的屏幕分辨率密度（dip）差不多，物理尺寸更大的屏幕。那可以直接在当前尺寸上拉长、拉宽即可，图标、行距都可以保持不变。

B. 如果屏幕密度要大很多，物理尺寸差不多的。则适配点包括：

设计多套图标，需要有更大分辨率的图标；

使用不同的字体，需要更大的字体来适配大设备分辨率的屏幕；

增加行间距；

自适应放大内容中的图片；

Tab页签 需要根据屏幕的大小来确认每屏最多显示的数目；

考虑一些复杂界面，增大界面中的一些元素的分辨率，会导致许多东西需要重新设计。这种情况需要重新设计该界面。

2）向下适配

在向更小的屏幕适配，这种情况较少，那会集中在如下几点：

考虑一些极限点的改进，需要适配到小屏幕的手机中，如标题的最大字数等。

title、bottom栏与小屏幕宽度适配。

考虑到行高（行信息展示）的设计是否适合更小的屏幕高度。

在结构上，需要考虑在小屏幕中，显示是否合适。

根据屏幕密度的比例来设计屏幕元素，需要更小分辨率的屏幕元素

使用小的字体，具体的大小需要根据屏幕的大小来设定。

不同的应用，在设计的过程中，对于选择不同的屏幕有不同的选择，如普通list多的应用，竖屏更合适；显示图片更多的界面，或者想更好的展示全景的应用，横屏更合适。

不必遵循，对任何的应用都可以自动进行横屏竖屏的切换。如果觉得没有必要横屏或者竖屏的应用，就可以不切换。

由于用户在使用手机的过程中，经常会无意中调整位置，从而导致手机误认为是要进行横竖屏的转化，从而更容易导致操作上的失误，引起用户的反感。

横竖屏的切换时，允许用户对于同一个界面有不同的展示方式。例如不一定在竖屏时时list方式显示，在横屏时也和竖屏保持一致，这时横屏可以有更好的适应横屏的展示方式，使用户更好的操作。

Claims (2)

1.一种基于多种移动终端界面的适配方法，其特征在于：该方法通过利用viewport、css、rem和设置字体大小，实现移动应用开发的多移动终端界面适配，具体如下：

1）控制 viewport 的大小，指定viewport的宽度和高度；

2）为了避免手机浏览器和WebView 根据不同屏幕像素密度对页面进行缩放，将viewport的target-densitydpi设置为device-dpi，页面将根据当前屏幕的像素密度进行展示，结合步骤1），则页面将与屏幕相适应；

3）将viewport分成10rem，并计算出1rem在当前浏览器的像素值，把它赋予html标签的font-size；

4）写CSS代码时，遇到要适配的地方，不再用px，改成用rem JS和Html。

2.根据权利要求1所述的基于多种移动终端界面的适配方法，其特征在于：该方法具体要求如下：

1）适配原则

（11）客户端的logo，在各个手机上都清晰地显示；

（12）标题或者底部栏100%的与手机宽度适配；

（13）文字内容如果显示不下的话，自动适配宽度进行折行；

（14）图片根据宽度进行自动缩放，屏幕宽度超过图片本身时，显示图片本身的大小；

（15）适配过程中，界面的元素的宽高最小值符合用户的主观舒适范围值；

（16）不能完全使用分辨率的绝对比例来对界面布局进行缩放；

适配方法

（21）图片资源的缩放

基于当前屏幕的密度，平台自动加载任何未经缩放的限定尺寸和密度的图片；如果图片不匹配，平台会加载默认资源并且在放大或者缩小之后满足当前界面的显示要求；如果没有多套资源，平台会认为默认的资源是中密度的屏幕资源；

（22）密度不同的屏幕适配，根据分辨率和坐标自动缩放

如果程序不支持多种密度屏幕，平台会自动缩放绝对像素坐标值和尺寸值，保证屏幕元素能和密度160的屏幕上一样能显示出同样物理尺寸的效果；平台会根据密度的比例来缩放实际尺寸的大小；

（23）屏幕不同的适配，兼容更大的屏幕大小

当前屏幕超过程序所支持屏幕的上限时，定义supports-screens元素，超出显示的基准线时，平台以屏幕大小的比例来缩放整个屏幕；

3）适配规则

（31）向上适配，标准屏向更大、分辨率高，物理尺寸大的屏幕适配

在向更大的屏幕适配时，根据设备分辨率的不同，会分为两种状态：

A．如果两者的屏幕分辨率密度差不多，物理尺寸更大的屏幕；那可以直接在当前尺寸上拉长、拉宽即可，图标、行距保持不变；

B. 如果屏幕密度要大很多，物理尺寸差不多的，则适配点包括：

B1设计多套图标，需要有更大分辨率的图标；

B2使用不同的字体，需要更大的字体来适配大设备分辨率的屏幕；

B3增加行间距；

B4自适应放大内容中的图片；

B5 Tab页签 需要根据屏幕的大小来确认每屏最多显示的数目；

（32）向下适配

在向更小的屏幕适配，集中在如下几点：

（321）考虑一些极限点的改进，需要适配到小屏幕的手机中；

（322）title、bottom栏与小屏幕宽度适配；

（323）考虑到行高的设计适合更小的屏幕高度；

（324）在结构上，考虑在小屏幕中，显示是否合适；

（325）根据屏幕密度的比例来设计屏幕元素，需要更小分辨率的屏幕元素；

（326）使用小的字体，具体的大小需要根据屏幕的大小来设定。