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

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

An adaptive method based on a variety of mobile terminal interfaces

【技术实现步骤摘要】
一种基于多种移动终端界面的适配方法
本专利技术涉及在移动互联网环境下移动终端界面适配技术，具体说是针对电力信息微应用页面的一种基于多种移动终端界面的适配方法。
技术介绍
物理像素(physicalpixel)一个物理像素是显示器(手机屏幕)上最小的物理显示单元，在操作系统的调度下，每一个设备像素都有自己的颜色值和亮度值。设备独立像素(density-independentpixel)设备独立像素(也叫密度无关像素)，可以认为是计算机坐标系统中得一个点，这个点代表一个可以由程序使用的虚拟像素(比如:css像素)，然后由相关系统转换为物理像素。所以说，物理像素和设备独立像素之间存在着一定的对应关系，这就是接下来要说的设备像素比。设备像素比(devicepixelratio)设备像素比(简称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，改成用remJS和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自适应放大内容中的图片；B5Tab页签需要根据屏幕的大小来确认每屏最多显示的数目；（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了，改成用remJS和Html。物理尺寸决定了屏幕的实际尺寸，而分辨率可以表示屏幕上可以呈现的像素点数，屏幕密度决定了屏幕的精细程度。相同的屏幕大小，如果分辨率高，则屏幕元素更精细。一个界面元素在屏幕里的实际尺寸却是与屏幕密度相关，屏幕密度较小的屏上，界面元素的实际尺寸就会大些，反之亦然。在进行手机界面布局中，除了元素的像素值外，考虑元素的实际尺寸也非常重要，甚至更为重要。在不同屏幕中，不同的图标点阵或者不同的字体及大小的汉字，在人的主观感知上，会有一个最优的结果值。在设计的过程中，需要根据这个最优值来进行界面的布局及设计。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。

【技术特征摘要】
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，改成用remJS和Html。2.根据权利要求1所述的基于多种移动终端界面的适配方法，其特征在于：该方法具体要求如下：1）适配原则（11）客户端的logo，在各个手机上都清晰地显示；（12）标题或者底部栏100%的与手机宽度适配；（13）文字内容如果显示不下的话，自动适配宽度进行折行；（14）图片根据宽度进行自动缩放，屏幕宽度超过图片本身时，显示图片本身的大小；（15）适配过程中，界面的元素的宽高最小值符合用户的主观舒适范围值；（16）不能完全使用分辨率的绝对比例来对界面布局进行缩放；适配方法（21）图片资源的缩放基于当前屏幕的密度，平台自动加载任何未经缩放的限定尺寸和密度的图片；如果图片不匹配，平台会加载默认资源并且在放大或者缩小之后满足当前界面的显示要求；如果没有多套资源，平台会认为默认的...

【专利技术属性】
技术研发人员：蔡璟，潘留兴，杜文辉，王昕宇，
申请(专利权)人：江苏电力信息技术有限公司，国网江苏省电力公司，
类型：发明
国别省市：江苏,32