CN107861711B - 页面适配方法及装置 - Google Patents

页面适配方法及装置 Download PDF

Info

Publication number
CN107861711B
CN107861711B CN201610841358.6A CN201610841358A CN107861711B CN 107861711 B CN107861711 B CN 107861711B CN 201610841358 A CN201610841358 A CN 201610841358A CN 107861711 B CN107861711 B CN 107861711B
Authority
CN
China
Prior art keywords
screen
mobile terminal
terminal
height
width
Prior art date
Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
Active
Application number
CN201610841358.6A
Other languages
English (en)
Other versions
CN107861711A (zh
Inventor
刘希呈
Current Assignee (The listed assignees may be inaccurate. Google has not performed a legal analysis and makes no representation or warranty as to the accuracy of the list.)
Tencent Technology Shenzhen Co Ltd
Original Assignee
Tencent Technology Shenzhen Co Ltd
Priority date (The priority date is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the date listed.)
Filing date
Publication date
Application filed by Tencent Technology Shenzhen Co Ltd filed Critical Tencent Technology Shenzhen Co Ltd
Priority to CN201610841358.6A priority Critical patent/CN107861711B/zh
Publication of CN107861711A publication Critical patent/CN107861711A/zh
Application granted granted Critical
Publication of CN107861711B publication Critical patent/CN107861711B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Images

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/20—Software design
    • G06F8/22—Procedural
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
    • G06F16/90—Details of database functions independent of the retrieved data types
    • G06F16/95—Retrieval from the web
    • G06F16/957—Browsing optimisation, e.g. caching or content distillation
    • G06F16/9577—Optimising the visualization of content, e.g. distillation of HTML documents

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • General Engineering & Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • Databases & Information Systems (AREA)
  • Data Mining & Analysis (AREA)
  • User Interface Of Digital Computer (AREA)
  • Information Transfer Between Computers (AREA)

Abstract

本申请实施例公开了一种页面适配方法和装置。该方法包括：移动终端接收服务器发送的与预先选择的终端的屏幕参数对应的web页面数据，所述web页面数据包含展示层数据和响应层数据；所述移动终端根据所述展示层数据以及所述移动终端的屏幕参数，创建与所述移动终端的屏幕参数对应的展示层；所述展示层包括：与所述移动终端的屏幕参数对应的包含第一页面元素的图片，及位于图片上的第二页面元素；移动终端根据所述响应层数据以及所述移动终端的屏幕参数，在所述展示层之上创建与所述移动终端屏幕参数对应的响应层；所述响应层用于处理所述第二页面元素与用户之间的交互；所述移动终端根据所述展示层和响应层得到待展示的web页面，并展示该web页面。

Description

页面适配方法及装置
技术领域
本发明涉及移动互联网技术领域，特别涉及一种页面适配方法及装置。
背景技术
随着移动互联网技术的发展，人们越来越多的使用手机等移动终端来浏览各类网页。由于移动终端设备的多样性，不同的移动终端设备有着不同的屏幕尺寸和分辨率。
因此，在开发网页的时候需要使网页能够适配不同的移动终端屏幕尺寸，从而使得网页在不同尺寸的移动终端屏幕上显示的效果看起来跟网页设计师的设计稿一样。也就是说，当一个网页在不同尺寸的移动终端屏幕上显示时，页面元素间的间距、留白、以及图片大小等等会随着变化，在比例上跟设计稿尽量一致。
在一种基于移动终端特征值匹配的适配方案中，可以预先定义几种适配方案。例如，可以针对移动终端屏幕不同的宽高比定义几种适配方案：
如果移动终端宽高比大于1.5，则行间距设置为1，页面元素A与B之间的间距缩小为a；
如果移动终端的宽高比大于2，则行间距设置为1.2，页面元素B与C之间的间距缩小为b；
如果移动终端的宽高比大于2.5，则行间距设置为1.5，页面元素C与D之间的间距缩小为c。
移动终端可以根据自身的屏幕尺寸选择其中一种适配方案进行适配。
发明内容
本申请一些实施例提供了一种页面适配方法及装置，以降低网页开发时进行网页适配的复杂度。
本申请实施例提供的页面适配方法包括，
移动终端接收服务器发送的与预先选择的终端的屏幕参数对应的web页面数据，所述web页面数据包含展示层数据和响应层数据；
所述移动终端根据所述展示层数据以及所述移动终端的屏幕参数，创建与所述移动终端的屏幕参数对应的展示层；所述展示层包括：与所述移动终端的屏幕参数对应的包含第一页面元素的图片、及位于所述图片之上的第二页面元素；
所述移动终端根据所述响应层数据以及所述移动终端的屏幕参数，在所述展示层之上创建与所述移动终端屏幕参数对应的响应层；所述响应层用于处理所述第二页面元素与用户之间的交互；
所述移动终端根据所述展示层和响应层得到待展示的web页面，并展示所述web页面。
本申请实施例提供的移动终端包括：
接收模块，用于接收服务器发送的与预先选择的终端的屏幕参数对应的web页面数据，所述web页面数据包含展示层数据和响应层数据；
第一处理模块，用于根据所述展示层数据以及所述移动终端的屏幕参数，创建与所述移动终端的屏幕参数对应的展示层；所述展示层包括：与所述移动终端的屏幕参数对应的包含第一页面元素的图片、及位于所述图片之上的第二页面元素；
第二处理模块，用于根据所述响应层数据以及所述移动终端的屏幕参数，在所述展示层之上创建与所述移动终端屏幕参数对应的响应层；所述响应层用于处理所述第二页面元素与用户之间的交互；
展示模块，用于根据所述展示层和响应层得到待展示的web页面，并展示所述web页面。
在本申请实施例提供的适配方案中，通过将待展示的web页面分离为展示层和叠加于所述展示层之上的响应层来实现，可以使适配中各种复杂的布局工作通过在展示层制作图片来完成，响应层只负责与用户的交互操作，降低了网页开发过程中进行页面适配的复杂度。
附图说明
图1为为本申请一些实施例中的操作环境100的示意图。
图2为本申请一些实施例中一种页面适配方法的流程图。
图3为本申请一些实施例中针对样机开发的展示层和响应层的示意图。
图4为本申请一些实施例中一种页面适配方法的流程图。
图5为本申请一些实施例中针对移动终端的不同屏幕类型的设计稿图片的示意图。
图6为本申请一些实施例中在预先选择的终端的屏幕和当前移动终端的屏幕中建立的坐标系的示意图。
图7为本申请一些实施例中另一种页面适配方法的流程图。
图8为本申请一些实施例中一种移动终端的结构示意图。
图9为本申请一些实施例中另一种移动终端的结构示意图。
图10为本申请一些实施例中一种服务器的结构示意图。
具体实施方式
为使本申请的技术方案及优点更加清楚明白，以下参照附图并举实施例，对本申请进一步详细说明。
本申请一些实施例提供了一种页面适配方法，移动终端接收服务器发送的与预先选择的终端的屏幕参数对应的web页面数据，所述与预先选择的终端的屏幕参数对应的web页面数据包含展示层数据和响应层数据。移动终端分别根据所述展示层数据和所述响应层数据创建与自身的屏幕参数对应的展示层和响应层，然后根据所创建的展示层和响应层得到完整的web页面，并将所述web页面展示给用户。通过将待展示的web页面分离为展示层和叠加于所述展示层之上的响应层来实现，可以使适配中各种复杂的布局工作通过在展示层制作图片来完成，响应层只负责与用户的交互操作，降低了网页开发过程中进行页面适配的复杂度。
在本申请实施例中，将所述预先选择的终端称为样机。网页开发工程师首先针对样机进行网页开发。移动终端在收到根据样机开发的网页数据之后，根据自身的屏幕参数进行适配工作。通常，可以选择比较流行的移动终端作为样机。
图1为本申请一些实施例中的操作环境100的示意图。如图1所示，服务器112通过一个或者多个网络106，向多个用户各自的终端设备(例如终端设备104a-c)提供与样机的屏幕参数对应的web页面数据，使得各个终端设备104a-c可以从服务器112获取所述与样机的屏幕参数对应的web页面数据，根据所述web页面数据得到与自身屏幕参数匹配的web页面，并向用户展示所述匹配自身屏幕参数的web页面。
在一些实施例中，每个用户通过在用户设备104上执行的应用(例如微信应用108a，浏览器应用108b-c)连接至服务器112，并从服务器112获取所述与样机的屏幕参数对应的web页面数据。
服务器112维护用于保存所述与样机的屏幕参数对应的web页面数据的数据库114。所述与样机的屏幕参数对应的web页面数据包含展示层数据和响应层数据。
用户设备104a-c可以在获取到服务器112发送的所述与样机的屏幕参数对应的web页面数据之后，根据所述展示层数据以及所述用户设备104a-c的屏幕参数，创建与所述自身的屏幕参数对应的展示层，所述展示层包括：包含待展示的web页面中的第一页面元素的图片、以及位于所述图片之上的第二页面元素；根据所述响应层数据以及所述用户设备104a-c的屏幕参数，在所述展示层之上创建与所述移动终端屏幕参数对应的响应层，所述响应层用于处理所述第二页面元素与用户之间的交互；根据所创建的展示层和响应层得到完整的web页面并展示给用户。
用户设备104的示例包括但不限于智能手机、掌上型计算机、可穿戴计算设备、个人数字助理(PDA)、平板计算机、或任意两个或更多的这些数据处理设备或其他数据处理设备的组合。
在一些实施例中，网络106可以包括局域网(LAN)和广域网(WAN)诸如互联网。可以使用任意公知的网络协议来实现一个或多个网络106，包括各种有线或无线协议。
在一些实施例中，所述服务器112可以在一个或多个独立的数据处理装置或分布式计算机网络上实现。
通过将web网页分成展示层和叠加于展示层之上的响应层，可以将需要展示给用户的页面元素制作为一张包含这些页面元素的图片，这样，展示层的复杂布局都可以由web页面设计师通过制作图片来完成，避免了通过代码来实现这些页面元素的复杂布局，从而降低了实现页面适配的复杂度。
图2为本申请一些实施例中一种移动终端的页面适配方法的流程图。如图2所示，该方法包括以下步骤：
步骤201，移动终端接收服务器发送的与预先选择的终端的屏幕参数对应的web页面数据，所述web页面数据包含展示层数据和响应层数据。
步骤202，所述移动终端根据所述展示层数据以及所述移动终端的屏幕参数，创建与所述移动终端的屏幕参数对应的展示层，所述展示层包含以下内容：与所述移动终端的屏幕参数对应的包含第一页面元素的图片、及位于所述图片之上的第二页面元素。
步骤203，所述移动终端根据所述响应层数据以及所述移动终端的屏幕参数，在所述展示层之上创建与所述移动终端屏幕参数对应的响应层，所述响应层用于处理所述第二页面元素与用户之间的交互。
步骤204，所述移动终端根据步骤202中创建的展示层和步骤203中创建的响应层，得到与所述移动终端的屏幕参数匹配的web页面，并展示所述web页面。
在一些实施例中，所述预先选择的终端的屏幕参数包括：预先选择的终端的屏幕宽度和高度；
所述移动终端的屏幕参数包括：所述移动终端的屏幕宽度和高度；或者所述移动终端的屏幕中用于展示所述web页面的视窗的宽度和高度。
在一些实施例中，所述移动终端根据所述展示层数据以及所述移动终端的屏幕参数，创建与所述移动终端的屏幕参数对应的展示层包括：
所述移动终端解析所述展示层数据，得到与所述预先选择的终端的屏幕参数对应的包含第一页面元素的图片，以及第二页面元素信息；所述第二页面元素信息包括：所述第二页面元素在所述预先选择的终端的屏幕中的高度和宽度、以及所述第二页面元素的中心点在所述预先选择的终端的屏幕中的位置；
所述移动终端等比例调整所述与所述预先选择的终端的屏幕参数对应的图片的高度和宽度，得到与所述移动终端的屏幕参数对应的所述图片；
根据所述第二页面元素在所述预先选择的终端的屏幕中的高度和宽度，确定所述第二页面元素在所述移动终端的屏幕中的高度和宽度；
根据所述第二页面元素的中心点在所述预先选择的终端的屏幕中的位置和预定义的算法，确定所述第二页面元素的中心点在所述移动终端的屏幕中的位置；
根据所确定的位置、高度和宽度，将所述第二页面元素置于与所述移动终端的屏幕参数对应的图片之上，得到与所述移动终端的屏幕参数对应的展示层。
在一些实施例中，所述根据所述第二页面元素在所述预先选择的终端的屏幕中的高度和宽度，确定所述第二页面元素在所述移动终端的屏幕中的高度和宽度包括：
根据所述预先选择的终端的屏幕和所述移动终端的屏幕的宽度之比或者高度之比确定缩放比例；
根据所述缩放比例，对所述第二页面元素在所述预先选择的终端的屏幕中的宽度和高度进行等比例缩放，得到所述第二页面元素在所述移动终端的屏幕中的高度和宽度。
在一些实施例中，所述响应层上包括与所述第二页面元素对应的区域，用于处理所述第二页面元素与用户之间的交互；
所述移动终端根据所述响应层数据以及所述移动终端的屏幕参数，在所述展示层之上创建与所述移动终端的屏幕参数对应的响应层包括：
所述移动终端解析所述响应层数据，得到区域信息；所述区域信息包括所述区域在预先选择的终端的屏幕中的高度和宽度、以及所述区域的中心点在所述预先选择的终端的屏幕中的位置；
根据所述移动终端的屏幕参数，在所述展示层之上创建透明的响应层；
根据所述区域在预先选择的终端的屏幕中的高度和宽度，确定所述区域在所述移动终端的屏幕中的高度和宽度；
根据所述区域的中心点在所述预先选择的终端的屏幕中的位置和所述预定义的算法，确定所述区域的中心点在所述移动终端的屏幕上的位置；
根据所确定的位置、高度和宽度，将所述区域置于所述响应层之上，得到所述与移动终端的屏幕参数对应的响应层。
在一些实施例中，所述根据所述区域在所述预先选择的终端的屏幕中的高度和宽度，确定所述区域在所述移动终端的屏幕上的高度和宽度包括：
根据所述预先选择的终端的屏幕和所述移动终端的屏幕的宽度之比或者高度之比确定缩放比例；
根据所述缩放比例，对所述区域在所述预先选择的终端的屏幕中的宽度和高度进行等比例缩放，得到所述区域在所述移动终端的屏幕中的高度和宽度。
在一些实施例中，所述中心点在所述预先选择的终端的屏幕中的位置包括：所述中心点在所述预先选择的屏幕中的横坐标和纵坐标；所述中心点在所述移动终端的屏幕中的位置包括：所述中心点在所述移动终端的屏幕中的横坐标和纵坐标；
所述预定义的算法包括：
在预先选择的终端的屏幕中，建立以所述预先选择终端的屏幕左上角为坐标原点、向右为X轴、向下为Y轴的第一坐标系；
在所述移动终端的屏幕中，建立以所述移动终端的屏幕左上角为坐标原点、向右为X轴、向下为Y轴的第二坐标系；
根据以下公式计算所述中心点在所述第二坐标系中的横坐标：x2＝x1×Mx2/Mx1；
其中，x2表示所述中心点在所述第二坐标系中的横坐标；x1表示所述中心点在所述第一坐标系中的横坐标；Mx1表示所述预先选择的终端的屏幕中一个参照点在所述第一坐标系中的横坐标；Mx2表示所述参照点在所述第二坐标系中的横坐标；
根据以下公式计算所述中心点在所述第二坐标系中的纵坐标：y2＝(y1×W1/2-H1×x1/2+My1×x1)/W1；
其中，y2表示所述中心点在所述第二坐标系中的纵坐标；y1表示所述中心点在所述第一坐标系中的纵坐标；W1表示所述预先选择的终端的屏幕宽度；H1表示所述预先选择的终端的屏幕高度；My1表示所述参照点在所述第一坐标系中的纵坐标。
在一些实施例中，所述预定义的算法包括：
在所述预先选择的终端的屏幕中，建立以所述预先选择的终端的屏幕左上角为坐标原点、向右为X轴、向下为Y轴的第一坐标系；
在所述移动终端的屏幕中，建立以所述移动终端的屏幕左上角为坐标原点、向右为X轴、向下为Y轴的第二坐标系；
根据以下公式计算所述中心点在所述第二坐标系中的纵坐标：y2＝y1×My2/My1；
其中，y2表示所述中心点在所述第二坐标系中的纵坐标；y1表示所述中心点在所述第一坐标系中的纵坐标；My1表示一个参照点在所述第一坐标系中的纵坐标；My2表示所述参照点在所述第二坐标系中的纵坐标；
根据以下公式计算所述中心点在所述第二坐标系中的横坐标：x2＝(x1×H1/2-W1×y1/2+Mx1×y1)/H1；
其中，x2表示所述中心点在所述第二坐标系中的横坐标；x1表示所述中心点在所述第一坐标系中的横坐标；H1表示所述预先选择的终端的屏幕高度；W1表示所述预先选择的终端的屏幕宽度；Mx1表示所述参照点在所述第一坐标系中的横坐标。
在一些实施例中，所述参照点为所述预先选择的终端的屏幕右下角的像素点。
在本申请实施例中，通过将web网页分成展示层和叠加于展示层之上的响应层，可以将需要展示给用户的页面元素制作为一张包含这些页面元素的图片，这样，展示层的复杂布局都可以由web页面设计师通过制作图片来完成，避免了通过代码来实现这些页面元素的复杂布局，从而降低了实现页面适配的复杂度。
此外，本申请一些实施例中，在展示层和响应层分别应用了基于覆盖(cover)方式的适配方法，而不需要在网页开发时预先设置多种不同的适配方案，从而可以灵活的针对各种不同尺寸的移动终端屏幕进行精确的适配。因此，进一步降低了网页开发过程中进行页面适配的复杂度。同时，本申请实施例的基于cover方式的适配方法可以根据当前移动终端自身的屏幕尺寸进行适配操作。而现有的特征值匹配方法中，对于一个尺寸范围内的多种移动终端，例如，对于屏幕宽高比大于1.5小于2的所有移动终端，都使用相同的适配方案。因此，相比于特征值匹配的适配方法，本申请实施例中基于cover方式的页面适配方法提高了页面适配的准确度。
以下结合图3和图4对本申请实施例中提供的页面适配方法进行说明。图3为本申请实施例中提供的针对样机开发的展示层和响应层的示意图。图4为本申请实施例提供的一种页面适配方法的流程图。
在一些实施例中，所述移动终端的整个屏幕都用于显示所述web页面，此时所述移动终端的屏幕参数为所述移动终端的屏幕的高度和宽度。
在一些实施例中，所述移动终端的屏幕除了显示所述web页面，还在屏幕的最上方显示状态栏(例如剩余电量、网络连接状态等等)，和/或在屏幕最下方显示虚拟按键栏(例如返回键，home键等等)。此时，所述移动终端的屏幕参数为所述移动终端的屏幕中用于显示所述web页面的部分的高度和宽度，即所述移动终端的屏幕参数为用于显示所述web页面的视窗的高度和宽度。
在本申请实施例中，为了便于说明，假设移动终端的整个屏幕都用于显示web页面，即移动终端的屏幕参数为屏幕的高度和宽度。
如图3所示，假设样机为iPhone 6，对应的屏幕参数为1334*750，即屏幕高度为1334像素、屏幕宽度为750像素。当前移动终端的屏幕参数为1920*1080。需要注意的是，在实际的网页开发过程中，也可以使用其他类型的终端作为样机，本申请对使用何种终端作为样机不做限定。
图3中301和302为根据样机的屏幕参数得到的展示层和响应层的示意图。如图3所示，展示层301中的第一页面元素不需要与用户交互，可以通过图片来展示，第二页面元素由于需要与用户交互，可以在展示层中展示其外观，在响应层中设置相应的区域来处理与之相关的事件。图3中303为匹配当前移动终端的屏幕参数的展示层和响应层组成的web页面的示意图。
参见图4，本申请实施例中提供的页面适配方法包括以下步骤：
步骤401，服务器接收移动终端的web页面访问请求，并向移动终端返回与样机的屏幕参数对应的web页面数据，其中所述web页面数据包含展示层数据以及响应层数据。
在一些实施例中，上述展示层数据和响应层数据分别用于由移动终端创建与所述移动终端的屏幕参数对应的展示层和响应层。在所述服务器侧，在网页开发过程中，可以将展示层和响应层作为叠加显示的容器来实现，从而实现响应层叠加于展示层之上的效果。例如，可以通过HTML<div>标签分别来实现叠加的展示层和响应层。
在一些实施例中，所述展示层数据向用户展示的页面元素包括：待展示的web页面中的文字、图像、视频、音频、动画、按钮、文字输入框等。
待展示的web页面可以包含静态的且不需要与用户进行交互的页面元素，例如不带有可点击区域的文字、图像等。对于这些静态的不需要与用户进行交互的页面元素，可以由网页设计师制作一张包含这些页面元素的图片(即设计稿)，从而通过所述图片将这些页面元素展示给用户。
对于待展示的web页面中包含的动态的且不需要与用户进行交互的页面元素，例如位置和/或形状变化的页面元素，可以由网页设计师制作多张图片，所述页面元素在所述多张图片上位置和/或形状不同，从而体现出其位置和/或形状的变化。此时，所述展示层可以通过连续的展示所述多张图片来实现所述页面元素的动态效果。
除了上述不与用户交互的页面元素之外，上述待展示的web页面还可以进一步包含需要与用户进行交互的页面元素，例如带有可点击区域的文字、图像、按钮、文本输入框等等。对于这些页面元素，可以通过HTML标签将这些页面元素放置于上述图片之上。
下面，对针对样机设计的展示层中包含页面元素的图片的制作过程进行说明。
在一些实施例中，针对不同屏幕类型的样机，所述图片的尺寸设置也是不同的。通常，可以针对较流行的样机设计所述图片的尺寸。例如，所述图片的宽度对应所述样机的屏幕宽度，所述图片的高度设置为远大于所述样机的屏幕高度；或者，所述图片的高度对应所述样机的屏幕高度，所述图片的宽度设置为远大于所述样机的屏幕宽度。
屏幕高度大于宽度的移动终端(例如图5所示的移动终端510)通常为手机。在一些实施例中，假设以iPhone 6作为样机对所述图片尺寸的设置说明，其中iPhone 6的屏幕尺寸为1334*750，即高度为1334像素，宽度为750像素。对于屏幕高度大于宽度的移动终端，所述图片的宽度是根据样机的屏幕宽度确定的，因此所述图片的宽度＝750。所述图片的高度可以设置为对于各种类型的移动终端来说足够高，即远大于各种移动终端的高度，例如可以设置为3000。需要展示的各种网页元素居中放置在所述图片上，形成核心内容区，见图5中501所示。所述核心内容区的高度由iPhone 6的屏幕高度确定，例如核心内容区的高度为1334。这里，假设iPhone 6的整个屏幕用于显示web页面。对于屏幕上下两侧包含状态栏和虚拟按键栏的情况，需要根据所述状态栏和虚拟按键栏的高度对所述核心内容区的高度进行调整，即核心内容区的高度＝屏幕高度-状态栏高度和/或虚拟按键栏高度。
在核心内容区的上下两侧，对于不同屏幕类型的移动终端，屏幕中有可能会显示出部分浮动内容区(见图5中502所示)。对于不同屏幕类型的移动终端，所显示的浮动内容区的大小是不同的。
对于屏幕高度小于宽度的样机(例如图5所示的移动终端520)，可以根据预先设定的样机的屏幕的高度来确定所述展示层的图片的高度，然后将所述展示层的图片的宽度设置为足够宽。此时，对于不同屏幕尺寸的移动终端，在对所述图片进行缩放时，核心内容区的左右两边可能出现不同大小的浮动内容区502。
本申请实施例中，针对上述两种比较常见的情况进行了说明。在实际应用中，还可能存在选取的样机的屏幕高度等于宽度的情况。此时，可以根据上述两种情况中任意一种进行图片的设计。
步骤402，移动终端接收所述与预先设置的样机屏幕参数对应的web页面数据，解析所述展示层数据，在移动终端的视窗中创建与所述移动终端的屏幕参数对应的展示层。
在一些实施例中，所述移动终端通过解析所述展示层数据，可以得到所述针对样机设计的图片、以及置于所述图片之上的页面元素的信息。所述页面元素信息可以包括：所述页面元素在所述样机屏幕中的高度和宽度、以及所述页面元素的中心点在所述样机屏幕中的位置，例如横坐标和纵坐标。
为了创建所述展示层，所述移动终端创建一个充满整个屏幕的容器，将所述解析得到的图片作为所述容器的背景。可以通过设置该容器的背景属性来实现展示层中图片的缩放。在一些实施例中，为了使图片能够布满整个屏幕，可以通过background-size：cover将容器的背景属性设置为cover，即等比例调整图片的宽度和高度，使图片完全覆盖窗口。在本实施例中，假设当前移动终端的屏幕尺寸为1920*1080。因此，为了适应当前移动终端的屏幕参数，图片的宽度调整为1080。对图片的高度进行与宽度等比例的缩放，并将所述图片设置为居中显示。
对于展示层中其他需要展示的各种页面元素(即与用户交互的页面元素)，需要根据当前移动终端的屏幕参数重新布局，即计算其在当前移动终端的屏幕中的位置和大小(例如高度和宽度)。以下对于高度大于宽度和宽度大于高度的移动终端，分别描述对页面元素重新布局的方法。
(1)对于屏幕高度大于宽度的移动终端
首先，如图6所示，建立以当前移动终端屏幕左上角为原点，向右为X轴，向下为Y轴的直角坐标系620，分别计算展示层中每一个页面元素的位置。
在一些实施例中，对于高度大于宽度的移动终端，可以对各个页面元素的x坐标进行等比例缩放，即可以根据以下公式(1)计算每一页面元素的中心点的横坐标。
x2＝x1×Mx2/Mx1 (1)
其中，x2表示某个页面元素的中心点在当前坐标系620中的横坐标，x1表示该页面元素的中心点在样机坐标系610中的横坐标，Mx2表示某个参照点M在当前坐标系620中的横坐标，Mx1为该参照点在样机坐标系610中的横坐标。
在一些实施例中，所述参照点M可以设置为屏幕右下角的点，即在样机坐标系610中，所述参照点M的坐标为(750,1334)，即Mx1＝750。对应的，在当前坐标系620下，所述参照点M的坐标为(1080,1920)，即Mx2＝1080。
对于各个页面元素的中心点在当前坐标系620中的纵坐标，可以根据以下公式(2)进行计算：
y2＝(y1×W1/2-H1×x1/2+My1×x1)/W1 (2)
其中，W1为样机的屏幕宽度，H1为样机的屏幕高度，My1为上述参照点M在样机坐标系610中的纵坐标，y1为页面元素的中心点在样机坐标系610中的纵坐标，y2为该页面元素的中心点在当前坐标系620中的纵坐标。
在一些实施例中，当所述参照点M为屏幕右下角的像素点时，My1＝H1＝1334。
针对每一页面元素，除了确定了中心点的坐标之外，还需要确定该页面元素的宽度和高度(对于圆形的页面元素来说，需要确定半径)。所述宽度和高度可以根据屏幕宽度的缩放比例计算。例如，样机屏幕宽度是750，当前移动终端的屏幕宽度为1080，缩放比例为1080:750，则在适配之后页面元素的高度＝该页面元素在样机中的高度*(1080:750)，适配之后的页面元素的宽度＝该页面元素在样机中的宽度*(1080:750)。
在确定了每个页面元素的中心点位置、宽度和高度(或者半径)之后，就可以确定该页面元素在当前移动终端的坐标系620中的位置和大小。
以上公式(1)和公式(2)适用于任何屏幕高度大于宽度的移动终端，因此本申请实施例提供的上述方法可以适用于各种机型。而且，适配操作是根据当前移动终端的屏幕尺寸进行的，提高了适配的精确度。此外，本申请实施例提供的上述方法不需要针对不同尺寸屏幕的移动终端设置不同的适配方法，降低了适配的复杂度。
(2)针对屏幕宽度大于高度的移动终端
类似于第(1)中情况，首先建立以当前移动终端屏幕左上角为原点，向右为X轴，向下为Y轴的直角坐标系，分别计算展示层中每一个页面元素的位置。
此时，由于屏幕的宽度大于高度，可以对各个页面元素的Y坐标进行等比例缩放，如下公式(3)所示：
y2＝y1×My2/My1 (3)
对于各个页面元素的中心点的横坐标，可以根据以下公式(4)进行计算：
x2＝(x1×H1/2-W1×y1/2+Mx1×y1)/H1 (4)
在确定了每个页面元素的中心点位置、宽度和高度(或者半径)之后，就可以确定该页面元素在当前移动终端的坐标系中的位置。
同样的，以上公式(3)和公式(4)适用于任何屏幕宽度大于高度的移动终端，因此本申请实施例提供的上述方法可以适用于各种机型。而且本申请实施例提供的上述方法不需要针对不同尺寸屏幕的移动终端设置不同的适配方法，降低了适配的复杂度。
步骤403，移动终端解析所述响应层数据，在所述展示层上创建与所述移动终端的屏幕参数对应的响应层。
在一些实施例中，所述响应层上包括与步骤402中需要与用户交互的页面元素对应的区域，用于处理所述页面元素与用户之间的交互。
所述响应层中每个区域的位置和形状与所述展示层中相应的页面元素的位置和形状相同。例如，对于展示层中展示的按钮，在响应层中相同的位置上包含一个与所述按钮的形状相同的区域，用于处理按钮相关的事件，例如点击事件等。
所述移动终端解析所述响应层数据，得到区域信息；所述区域信息包括所述区域在样机屏幕中的高度和宽度、以及所述区域的中心点在所述样机屏幕中的位置；根据所述移动终端的屏幕参数，在所述展示层之上创建透明的响应层；根据所述区域在样机屏幕中的高度和宽度，确定所述区域在所述移动终端的屏幕中的高度和宽度；根据所述区域的中心点在所述样机屏幕中的位置，确定所述区域的中心点在所述移动终端的屏幕上的位置；根据所确定的位置、高度和宽度，将所述区域置于所述响应层之上，得到所述与移动终端的屏幕参数对应的响应层。
在一些实施例中，所述响应层中各个区域在当前移动终端的屏幕中的位置的确定方法与步骤402中各个页面元素的位置的确定方法类似。
具体的，针对高度大于宽度的移动终端，可以根据上述公式(1)和(2)确定各个区域的中心点的坐标。
针对宽度大于高度的移动终端，可以根据上述公式(3)和(4)确定各个区域的中心点的坐标。
同样的，对于各个区域的高度和宽度(或者半径)的计算方法，也与步骤402中相同，在此不再赘述。
步骤404，移动终端根据步骤402中创建的展示层和步骤403中创建的响应层得到完整的web页面，并展示所述web页面。
在本申请实施例中，通过将web页面分离成展示层和响应层，可以由网页设计师直接制作一张带有各种页面元素的图片，从而将动画、图像等复杂的布局操作转嫁给网页设计师。开发工程师只需要完成响应层中与用户交互的区域的适配即可，大大减少了工作量。
在一些实施例中，所述响应层也可以作为一个容器，其上还可以进一步继续进行任意方式的移动端web页面开发及适配。
在上述实施例中，展示层和响应层的适配采用了基于cover的方式。在实际应用中，也可以采用其他方式对展示层和响应层进行适配，例如等比拉伸方式。本申请对具体采用何种适配方法不做限定。
图7为本申请一些实施例中提供的另一种页面适配方法的流程图。如图7所示，所示方法包括以下步骤。
步骤701，服务器接收移动终端的web页面访问请求。
步骤702，根据所述web页面访问请求，所述服务器向所述移动终端返回与预先选择的终端的屏幕参数对应的web页面数据，所述web页面数据包括展示层数据和响应层数据；
所述展示层数据，使得所述移动终端根据所述展示层数据以及所述移动终端的屏幕参数，创建与所述移动终端的屏幕参数对应的展示层；所述展示层包括：与所述移动终端的屏幕参数对应的包含第一页面元素的图片、及位于所述图片之上的第二页面元素；
所述响应层数据，使得所述移动终端根据所述响应层数据以及所述移动终端的屏幕参数，在所述展示层之上创建与所述移动终端屏幕参数对应的响应层；所述响应层用于处理所述第二页面元素与用户之间的交互；
其中，所述移动终端通过所述展示层和所述响应层得到待展示的web页面，并展示所述web页面。
在一些实施例中，所述服务器发送给移动终端的展示层数据中可以包含与预先选择的终端的屏幕参数对应的包含第一页面元素的图片，以及第二页面元素相关信息。
在本实施例中，所述服务器和移动终端的各种具体操作可以参见图2和图4所示的方法，在此不再赘述。
图8是本申请一些实施例中移动终端的示意图。该移动终端可以是图1示出的用户设备104a-c。
如图8所示，移动终端800包括一个或者多个处理器(CPU)802、网络接口804、存储器806、用户接口810，以及用于互联这些组件的通信总线808。
在一些实施例中，所述网络接口804可以通过一个或者多个网络连接至用于提供web页面服务的服务器。
用户接口810包括一个或多个输出设备812，其包括一个或多个扬声器和/或一个或多个可视化显示器。用户接口810也包括一个或多个输入设备814，其包括诸如，键盘，鼠标，声音命令输入单元或扩音器，触屏显示器，触敏输入板，姿势捕获摄像机或其他输入按钮或控件等。
存储器806可以是高速随机存取存储器，诸如DRAM、SRAM、DDRRAM、或其他随机存取固态存储设备；或者非易失性存储器，诸如一个或多个磁盘存储设备、光盘存储设备、闪存设备，或其他非易失性固态存储设备。
存储器806包括：
操作系统816，包括用于处理各种基本系统服务和用于执行硬件相关任务的程序；
Web页面展示应用818，用于接收服务器发送的与预先选择的终端的屏幕参数对应的web页面数据，所述web页面数据包含展示层数据和响应层数据；根据所述展示层数据以及所述移动终端的屏幕参数，创建与所述移动终端的屏幕参数对应的展示层；所述展示层包含：与所述移动终端的屏幕参数对应的包含第一页面元素的图片、及位于所述图片之上的第二页面元素；根据所述响应层数据以及所述移动终端的屏幕参数，在所述展示层之上创建与所述移动终端屏幕参数对应的响应层；所述响应层用于处理所述第二页面元素与用户之间的交互；根据所述展示层和响应层得到待展示的web页面，并展示所述web页面。
所述web页面展示应用718的具体功能实现可以参见前面的方法实施例，在此不再赘述。
图9为本申请一些实施例中另一种移动终端的结构示意图。如图9所示，该移动终端900包括：
接收模块901，用于接收服务器发送的与预先选择的终端的屏幕参数对应的web页面数据，所述web页面数据包含展示层数据和响应层数据；
第一处理模块902，用于根据所述展示层数据以及所述移动终端的屏幕参数，创建与所述移动终端的屏幕参数对应的展示层；所述展示层包含：与所述移动终端的屏幕参数对应的包含第一页面元素的图片、及位于所述图片之上的第二页面元素；
第二处理模块903，用于根据所述响应层数据以及所述移动终端的屏幕参数，在所述展示层之上创建与所述移动终端屏幕参数对应的响应层；所述响应层用于处理所述第二页面元素与用户之间的交互；
展示模块904，用于根据所述展示层和响应层得到待展示的web页面，并展示所述web页面。
在一些实施例中，所述预先选择的终端的屏幕参数包括：预先选择的终端的屏幕宽度和高度；
所述移动终端的屏幕参数包括：所述移动终端的屏幕的宽度和高度；或者所述移动终端的屏幕中用于展示所述web页面的视窗的宽度和高度。
在一些实施例中，所述第一处理模块902进一步用于，
解析所述展示层数据，得到与所述预先选择的终端的屏幕参数对应的包含第一页面元素的图片，以及第二页面元素信息；所述第二页面元素信息包括：所述第二页面元素在所述预先选择的终端的屏幕中的高度和宽度、以及所述第二页面元素的中心点在所述预先选择的终端的屏幕中的位置；
等比例调整所述与所述预先选择的终端的屏幕参数对应的图片的高度和宽度，得到与所述移动终端的屏幕参数对应的所述图片；
根据所述第二页面元素在所述预先选择的终端的屏幕中的高度和宽度，确定所述第二页面元素在所述移动终端的屏幕中的高度和宽度；
根据所述第二页面元素的中心点在所述预先选择的终端的屏幕中的位置和预定义的算法，确定所述第二页面元素的中心点在所述移动终端的屏幕中的位置；
根据所确定的位置、高度和宽度，将所述第二页面元素置于与所述移动终端的屏幕参数对应的图片之上，得到与所述移动终端的屏幕参数对应的展示层。
在一些实施例中，所述第一处理模块902进一步用于，
根据所述预先选择的终端的屏幕和所述移动终端的屏幕的宽度之比或者高度之比确定缩放比例；
根据所述缩放比例，对所述第二页面元素在所述预先选择的终端的屏幕中的宽度和高度进行等比例缩放，得到所述第二页面元素在所述移动终端的屏幕中的高度和宽度。
在一些实施例中，所述响应层上包括与所述第二页面元素对应的区域，用于处理所述第二页面元素与用户之间的交互；所述第二处理模块903进一步用于，
解析所述响应层数据，得到区域信息；所述区域信息包括所述区域在预先选择的终端的屏幕中的高度和宽度、以及所述区域的中心点在所述预先选择的终端的屏幕中的位置；
根据所述移动终端的屏幕参数，在所述展示层之上创建透明的响应层；
根据所述区域在预先选择的终端的屏幕中的高度和宽度，确定所述区域在所述移动终端的屏幕中的高度和宽度；
根据所述区域的中心点在所述预先选择的终端的屏幕中的位置和所述预定义的算法，确定所述区域的中心点在所述移动终端的屏幕上的位置；
根据所确定的位置、高度和宽度，将所述区域置于所述响应层之上，得到所述与移动终端的屏幕参数对应的响应层。
在一些实施例中，所述第二处理模块903进一步用于，
根据所述预先选择的终端的屏幕和所述移动终端的屏幕的宽度之比或者高度之比确定缩放比例；
根据所述缩放比例，对所述区域在所述预先选择的终端的屏幕中的宽度和高度进行等比例缩放，得到所述区域在所述移动终端的屏幕中的高度和宽度。
在一些实施例中，所述中心点在所述预先选择的终端的屏幕中的位置包括：所述中心点在所述预先选择的屏幕中的横坐标和纵坐标；所述中心点在所述移动终端的屏幕中的位置包括：所述中心点在所述移动终端的屏幕中的横坐标和纵坐标；所述预定义的算法包括：
在预先设置的样机的屏幕中，建立以所述样机的屏幕左上角为坐标原点、向右为X轴、向下为Y轴的第一坐标系；
在所述移动终端的屏幕中，建立以所述移动终端的屏幕左上角为坐标原点、向右为X轴、向下为Y轴的第二坐标系；
根据以下公式计算所述中心点在所述第二坐标系中的横坐标：x2＝x1×Mx2/Mx1；
其中，x2表示所述中心点在所述第二坐标系中的横坐标；x1表示所述中心点在所述第一坐标系中的横坐标；Mx1表示所述样机的屏幕中一个参照点在所述第一坐标系中的横坐标；Mx2表示所述参照点在所述第二坐标系中的横坐标；
根据以下公式计算所述中心点在所述第二坐标系中的纵坐标：y2＝(y1×W1/2-H1×x1/2+My1×x1)/W1；
其中，y2表示所述中心点在所述第二坐标系中的纵坐标；y1表示所述中心点在所述第一坐标系中的纵坐标；W1表示所述样机的屏幕宽度；H1表示所述样机的屏幕高度；My1表示所述参照点在所述第一坐标系中的纵坐标。
在一些实施例中，所述预定义的算法包括：
在所述样机的屏幕中，建立以所述样机的屏幕左上角为坐标原点、向右为X轴、向下为Y轴的第一坐标系；
在所述移动终端的屏幕中，建立以所述移动终端的屏幕左上角为坐标原点、向右为X轴、向下为Y轴的第二坐标系；
根据以下公式计算所述中心点在所述第二坐标系中的纵坐标：y2＝y1×My2/My1；
其中，y2表示所述中心点在所述第二坐标系中的纵坐标；y1表示所述中心点在所述第一坐标系中的纵坐标；My1表示一个参照点在所述第一坐标系中的纵坐标；My2表示所述参照点在所述第二坐标系中的纵坐标；
根据以下公式计算所述中心点在所述第二坐标系中的横坐标：x2＝(x1×H1/2-W1×y1/2+Mx1×y1)/H1；
其中，x2表示所述中心点在所述第二坐标系中的横坐标；x1表示所述中心点在所述第一坐标系中的横坐标；H1表示所述样机的屏幕高度；W1表示所述样机的屏幕宽度；Mx1表示所述参照点在所述第一坐标系中的横坐标。
在一些实施例中，所述参照点为所述样机的屏幕右下角的像素点。
图10为本申请一些实施例中提供的一种服务器的结构示意图。如图10所示，所述服务器1000包括：存储模块1001、接收模块1002和发送模块1003；其中，
所述存储模块1001用于存储web页面数据，所述web页面数据包含展示层数据和响应层数据；
所述接收模块1002用于，接收移动终端的web页面访问请求；
所述发送模块1003用于，根据所述web页面访问请求，从所述存储模块1001中获取与所述web页面访问请求对应的web页面数据，将所述web页面数据发送给所述移动终端；其中，
所述展示层数据，使得所述移动终端根据所述展示层数据以及所述移动终端的屏幕参数，创建与所述移动终端的屏幕参数对应的展示层；所述展示层包括：与所述移动终端的屏幕参数对应的包含第一页面元素的图片、及位于所述图片之上的第二页面元素；
所述响应层数据，使得所述移动终端根据所述响应层数据以及所述移动终端的屏幕参数，在所述展示层之上创建与所述移动终端屏幕参数对应的响应层；所述响应层用于处理所述第二页面元素与用户之间的交互；
其中，所述移动终端通过所述展示层和所述响应层得到待展示的web页面，并展示所述web页面。
在一些实施例中，所述的模块可以是存储在存储器中的指令模块。当所述指令模块由处理器执行时，所述服务器实现上述的功能。所述存储器可以是高速随机存取存储器，诸如DRAM、SRAM、DDR RAM、或其他随机存取固态存储设备；或者非易失性存储器，诸如一个或多个磁盘存储设备、光盘存储设备、闪存设备，或其他非易失性固态存储设备。
在本申请实施例提供的方案中，通过将web页面分成展示层和叠加于展示层之上的响应层，可以将需要展示给用户的页面元素制作为一张包含这些页面元素的图片，这样，展示层的复杂布局都可以由web页面设计师通过制作图片来完成，避免了通过代码来实现这些页面元素的复杂布局，从而降低了实现页面适配的复杂度。
以上所述仅为本申请的较佳实施例而已，并非用于限定本申请的保护范围。凡在本申请的精神和原则之内，所作的任何修改、等同替换以及改进等，均应包含在本申请的保护范围之内。

Claims (20)

1.一种页面适配方法，其特征在于，包括：
移动终端接收服务器发送的与预先选择的终端的屏幕参数对应的web页面数据，所述web页面数据包含展示层数据和响应层数据；
所述移动终端根据所述展示层数据以及所述移动终端的屏幕参数，创建与所述移动终端的屏幕参数对应的展示层；所述展示层包括：与所述移动终端的屏幕参数对应的包含第一页面元素的图片，及位于所述图片之上的第二页面元素；
所述移动终端根据所述响应层数据以及所述移动终端的屏幕参数，在所述展示层之上创建与所述移动终端屏幕参数对应的响应层；所述响应层用于处理所述第二页面元素与用户之间的交互；
所述移动终端根据所述展示层和响应层得到待展示的web页面，并展示所述web页面。
2.根据权利要求1所述的方法，其特征在于，所述预先选择的终端的屏幕参数包括：预先选择的终端的屏幕宽度和高度；
所述移动终端的屏幕参数包括：所述移动终端的屏幕宽度和高度；或者所述移动终端的屏幕中用于展示所述web页面的视窗的宽度和高度。
3.根据权利要求1所述的方法，其特征在于，所述移动终端根据所述展示层数据以及所述移动终端的屏幕参数，创建与所述移动终端的屏幕参数对应的展示层包括：
所述移动终端解析所述展示层数据，得到与所述预先选择的终端的屏幕参数对应的包含第一页面元素的图片，以及第二页面元素信息；所述第二页面元素信息包括：所述第二页面元素在所述预先选择的终端的屏幕中的高度和宽度、以及所述第二页面元素的中心点在所述预先选择的终端的屏幕中的位置；
所述移动终端等比例调整与所述预先选择的终端的屏幕参数对应的图片的高度和宽度，得到与所述移动终端的屏幕参数对应的所述图片；
根据所述第二页面元素在所述预先选择的终端的屏幕中的高度和宽度，确定所述第二页面元素在所述移动终端的屏幕中的高度和宽度；
根据所述第二页面元素的中心点在所述预先选择的终端的屏幕中的位置和预定义的算法，确定所述第二页面元素的中心点在所述移动终端的屏幕中的位置；
根据所确定的位置、高度和宽度，将所述第二页面元素置于与所述移动终端的屏幕参数对应的图片之上，得到与所述移动终端的屏幕参数对应的展示层。
4.根据权利要求3所述的方法，其特征在于，所述根据所述第二页面元素在所述预先选择的终端的屏幕中的高度和宽度，确定所述第二页面元素在所述移动终端的屏幕中的高度和宽度包括：
根据所述预先选择的终端的屏幕和所述移动终端的屏幕的宽度之比或者高度之比确定缩放比例；
根据所述缩放比例，对所述第二页面元素在所述预先选择的终端的屏幕中的宽度和高度进行等比例缩放，得到所述第二页面元素在所述移动终端的屏幕中的高度和宽度。
5.根据权利要求3所述的方法，其特征在于，所述响应层上包括与所述第二页面元素对应的区域，用于处理所述第二页面元素与用户之间的交互；
所述移动终端根据所述响应层数据以及所述移动终端的屏幕参数，在所述展示层之上创建与所述移动终端的屏幕参数对应的响应层包括：
所述移动终端解析所述响应层数据，得到区域信息；所述区域信息包括所述区域在预先选择的终端的屏幕中的高度和宽度、以及所述区域的中心点在所述预先选择的终端的屏幕中的位置；
根据所述移动终端的屏幕参数，在所述展示层之上创建透明的响应层；
根据所述区域在预先选择的终端的屏幕中的高度和宽度，确定所述区域在所述移动终端的屏幕中的高度和宽度；
根据所述区域的中心点在所述预先选择的终端的屏幕中的位置和所述预定义的算法，确定所述区域的中心点在所述移动终端的屏幕上的位置；
根据所确定的位置、高度和宽度，将所述区域置于所述响应层之上，得到所述与移动终端的屏幕参数对应的响应层。
6.根据权利要求5所述的方法，其特征在于，所述根据所述区域在所述预先选择的终端的屏幕中的高度和宽度，确定所述区域在所述移动终端的屏幕上的高度和宽度包括：
根据所述预先选择的终端的屏幕和所述移动终端的屏幕的宽度之比或者高度之比确定缩放比例；
根据所述缩放比例，对所述区域在所述预先选择的终端的屏幕中的宽度和高度进行等比例缩放，得到所述区域在所述移动终端的屏幕中的高度和宽度。
7.根据权利要求3或5所述的方法，其特征在于，所述中心点在所述预先选择的终端的屏幕中的位置包括：所述中心点在所述预先选择的屏幕中的横坐标和纵坐标；所述中心点在所述移动终端的屏幕中的位置包括：所述中心点在所述移动终端的屏幕中的横坐标和纵坐标；
所述预定义的算法包括：
在预先选择的终端的屏幕中，建立以所述预先选择终端的屏幕左上角为坐标原点、向右为X轴、向下为Y轴的第一坐标系；
在所述移动终端的屏幕中，建立以所述移动终端的屏幕左上角为坐标原点、向右为X轴、向下为Y轴的第二坐标系；
根据以下公式计算所述中心点在所述第二坐标系中的横坐标：x2＝x1×Mx2/Mx1；
其中，x2表示所述中心点在所述第二坐标系中的横坐标；x1表示所述中心点在所述第一坐标系中的横坐标；Mx1表示所述预先选择的终端的屏幕中一个参照点在所述第一坐标系中的横坐标；Mx2表示所述参照点在所述第二坐标系中的横坐标；
根据以下公式计算所述中心点在所述第二坐标系中的纵坐标：y2＝(y1×W1/2-H1×x1/2+My1×x1)/W1；
其中，y2表示所述中心点在所述第二坐标系中的纵坐标；y1表示所述中心点在所述第一坐标系中的纵坐标；W1表示所述预先选择的终端的屏幕宽度；H1表示所述预先选择的终端的屏幕高度；My1表示所述参照点在所述第一坐标系中的纵坐标。
8.根据权利要求7所述的方法，其特征在于，所述参照点为所述预先选择的终端的屏幕右下角的像素点。
9.根据权利要求3或5所述的方法，其特征在于，所述中心点在所述预先选择的终端的屏幕中的位置包括：所述中心点在所述预先选择的屏幕中的横坐标和纵坐标；所述中心点在所述移动终端的屏幕中的位置包括：所述中心点在所述移动终端的屏幕中的横坐标和纵坐标；
所述预定义的算法包括：
在所述预先选择的终端的屏幕中，建立以所述预先选择的终端的屏幕左上角为坐标原点、向右为X轴、向下为Y轴的第一坐标系；
在所述移动终端的屏幕中，建立以所述移动终端的屏幕左上角为坐标原点、向右为X轴、向下为Y轴的第二坐标系；
根据以下公式计算所述中心点在所述第二坐标系中的纵坐标：y2＝y1×My2/My1；
其中，y2表示所述中心点在所述第二坐标系中的纵坐标；y1表示所述中心点在所述第一坐标系中的纵坐标；My1表示一个参照点在所述第一坐标系中的纵坐标；My2表示所述参照点在所述第二坐标系中的纵坐标；
根据以下公式计算所述中心点在所述第二坐标系中的横坐标：x2＝(x1×H1/2-W1×y1/2+Mx1×y1)/H1；
其中，x2表示所述中心点在所述第二坐标系中的横坐标；x1表示所述中心点在所述第一坐标系中的横坐标；H1表示所述预先选择的终端的屏幕高度；W1表示所述预先选择的终端的屏幕宽度；Mx1表示所述参照点在所述第一坐标系中的横坐标。
10.根据权利要求9所述的方法，其特征在于，所述参照点为所述预先选择的终端的屏幕右下角的像素点。
11.一种移动终端，其特征在于，包括：
接收模块，用于接收服务器发送的与预先选择的终端的屏幕参数对应的web页面数据，所述web页面数据包含展示层数据和响应层数据；
第一处理模块，用于根据所述展示层数据以及所述移动终端的屏幕参数，创建与所述移动终端的屏幕参数对应的展示层；所述展示层包括：与所述预先选择的终端的屏幕参数对应的包含第一页面元素的图片，及位于所述图片之上的第二页面元素；
第二处理模块，用于根据所述响应层数据以及所述移动终端的屏幕参数，在所述展示层之上创建与所述移动终端屏幕参数对应的响应层；所述响应层用于处理所述第二页面元素与用户之间的交互；
展示模块，用于根据所述展示层和响应层得到待展示的web页面，并展示所述web页面。
12.根据权利要求11所述的移动终端，其特征在于，所述预先选择的终端的屏幕参数包括：预先选择的终端的屏幕宽度和高度；
所述移动终端的屏幕参数包括：所述移动终端的屏幕的宽度和高度；或者所述移动终端的屏幕中用于展示所述web页面的视窗的宽度和高度。
13.根据权利要求11所述的移动终端，其特征在于，所述第一处理模块进一步用于，
解析所述展示层数据，得到与所述预先选择的终端的屏幕参数对应的包含第一页面元素的图片，以及第二页面元素信息；所述第二页面元素信息包括：所述第二页面元素在所述预先选择的终端的屏幕中的高度和宽度、以及所述第二页面元素的中心点在所述预先选择的终端的屏幕中的位置；
等比例调整所述与所述预先选择的终端的屏幕参数对应的图片的高度和宽度，得到与所述移动终端的屏幕参数对应的所述图片；
根据所述第二页面元素在所述预先选择的终端的屏幕中的高度和宽度，确定所述第二页面元素在所述移动终端的屏幕中的高度和宽度；
根据所述第二页面元素的中心点在所述预先选择的终端的屏幕中的位置和预定义的算法，确定所述第二页面元素的中心点在所述移动终端的屏幕中的位置；
根据所确定的位置、高度和宽度，将所述第二页面元素置于与所述移动终端的屏幕参数对应的图片之上，得到与所述移动终端的屏幕参数对应的展示层。
14.根据权利要求13所述的移动终端，其特征在于，所述第一处理模块进一步用于，
根据所述预先选择的终端的屏幕和所述移动终端的屏幕的宽度之比或者高度之比确定缩放比例；
根据所述缩放比例，对所述第二页面元素在所述预先选择的终端的屏幕中的宽度和高度进行等比例缩放，得到所述第二页面元素在所述移动终端的屏幕中的高度和宽度。
15.根据权利要求13所述的移动终端，其特征在于，所述响应层上包括与所述第二页面元素对应的区域，用于处理所述第二页面元素与用户之间的交互；
所述第二处理模块进一步用于，
解析所述响应层数据，得到区域信息；所述区域信息包括所述区域在预先选择的终端的屏幕中的高度和宽度、以及所述区域的中心点在所述预先选择的终端的屏幕中的位置；
根据所述移动终端的屏幕参数，在所述展示层之上创建透明的响应层；
根据所述区域在预先选择的终端的屏幕中的高度和宽度，确定所述区域在所述移动终端的屏幕中的高度和宽度；
根据所述区域的中心点在所述预先选择的终端的屏幕中的位置和所述预定义的算法，确定所述区域的中心点在所述移动终端的屏幕上的位置；
根据所确定的位置、高度和宽度，将所述区域置于所述响应层之上，得到所述与移动终端的屏幕参数对应的响应层。
16.根据权利要求15所述的移动终端，其特征在于，所述第二处理模块进一步用于，
根据所述预先选择的终端的屏幕和所述移动终端的屏幕的宽度之比或者高度之比确定缩放比例；
根据所述缩放比例，对所述区域在所述预先选择的终端的屏幕中的宽度和高度进行等比例缩放，得到所述区域在所述移动终端的屏幕中的高度和宽度。
17.根据权利要求13或15所述的移动终端，其特征在于，所述中心点在所述预先选择的终端的屏幕中的位置包括：所述中心点在所述预先选择的屏幕中的横坐标和纵坐标；所述中心点在所述移动终端的屏幕中的位置包括：所述中心点在所述移动终端的屏幕中的横坐标和纵坐标；
所述预定义的算法包括：
在预先选择的终端的屏幕中，建立以所述预先选择的终端的屏幕左上角为坐标原点、向右为X轴、向下为Y轴的第一坐标系；
在所述移动终端的屏幕中，建立以所述移动终端的屏幕左上角为坐标原点、向右为X轴、向下为Y轴的第二坐标系；
根据以下公式计算所述中心点在所述第二坐标系中的横坐标：x2＝x1×Mx2/Mx1；
其中，x2表示所述中心点在所述第二坐标系中的横坐标；x1表示所述中心点在所述第一坐标系中的横坐标；Mx1表示所述预先选择的终端的屏幕中一个参照点在所述第一坐标系中的横坐标；Mx2表示所述参照点在所述第二坐标系中的横坐标；
根据以下公式计算所述中心点在所述第二坐标系中的纵坐标：y2＝(y1×W1/2-H1×x1/2+My1×x1)/W1；
其中，y2表示所述中心点在所述第二坐标系中的纵坐标；y1表示所述中心点在所述第一坐标系中的纵坐标；W1表示所述预先选择的终端的屏幕宽度；H1表示所述预先选择的终端的屏幕高度；My1表示所述参照点在所述第一坐标系中的纵坐标。
18.根据权利要求17所述的移动终端，其特征在于，所述参照点为所述预先选择的终端的屏幕右下角的像素点。
19.根据权利要求13或15所述的移动终端，其特征在于，所述中心点在所述预先选择的终端的屏幕中的位置包括：所述中心点在所述预先选择的屏幕中的横坐标和纵坐标；所述中心点在所述移动终端的屏幕中的位置包括：所述中心点在所述移动终端的屏幕中的横坐标和纵坐标；
所述预定义的算法包括：
在所述预先选择的终端的屏幕中，建立以所述预先选择的终端的屏幕左上角为坐标原点、向右为X轴、向下为Y轴的第一坐标系；
在所述移动终端的屏幕中，建立以所述移动终端的屏幕左上角为坐标原点、向右为X轴、向下为Y轴的第二坐标系；
根据以下公式计算所述中心点在所述第二坐标系中的纵坐标：y2＝y1×My2/My1；
其中，y2表示所述中心点在所述第二坐标系中的纵坐标；y1表示所述中心点在所述第一坐标系中的纵坐标；My1表示一个参照点在所述第一坐标系中的纵坐标；My2表示所述参照点在所述第二坐标系中的纵坐标；
根据以下公式计算所述中心点在所述第二坐标系中的横坐标：x2＝(x1×H1/2-W1×y1/2+Mx1×y1)/H1；
其中，x2表示所述中心点在所述第二坐标系中的横坐标；x1表示所述中心点在所述第一坐标系中的横坐标；H1表示所述预先选择的终端的屏幕高度；W1表示所述预先选择的终端的屏幕宽度；Mx1表示所述参照点在所述第一坐标系中的横坐标。
20.根据权利要求19所述的移动终端，其特征在于，所述参照点为所述预先选择的终端的屏幕右下角的像素点。
CN201610841358.6A 2016-09-22 2016-09-22 页面适配方法及装置 Active CN107861711B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201610841358.6A CN107861711B (zh) 2016-09-22 2016-09-22 页面适配方法及装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201610841358.6A CN107861711B (zh) 2016-09-22 2016-09-22 页面适配方法及装置

Publications (2)

Publication Number Publication Date
CN107861711A CN107861711A (zh) 2018-03-30
CN107861711B true CN107861711B (zh) 2020-03-17

Family

ID=61698828

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201610841358.6A Active CN107861711B (zh) 2016-09-22 2016-09-22 页面适配方法及装置

Country Status (1)

Country Link
CN (1) CN107861711B (zh)

Families Citing this family (4)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN109460494A (zh) * 2018-09-18 2019-03-12 广州神马移动信息科技有限公司 一种问答页面的展示方法、装置和设备/终端/服务器
CN110314376A (zh) * 2019-06-04 2019-10-11 福建天晴数码有限公司 背景图片及背景光效的适配方法及计算机可读存储介质
CN112035204A (zh) * 2020-08-28 2020-12-04 重庆可兰达科技有限公司 一种用于安卓系统的壁纸自定义方法、系统、终端及介质
CN113990355A (zh) * 2021-09-18 2022-01-28 赛因芯微(北京)电子科技有限公司 音频节目元数据和产生方法、电子设备及存储介质

Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101908076A (zh) * 2010-08-24 2010-12-08 北京世纪高通科技有限公司 页面布局自适应方法及装置
CN102890632A (zh) * 2012-09-18 2013-01-23 深圳市融创天下科技股份有限公司 一种屏幕自适应方法、系统和终端设备
CN103593196A (zh) * 2013-11-25 2014-02-19 深信服网络科技（深圳）有限公司 页面布局自适应方法及装置

Family Cites Families (1)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
US8181107B2 (en) * 2006-12-08 2012-05-15 Bytemobile, Inc. Content adaptation

Patent Citations (3)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN101908076A (zh) * 2010-08-24 2010-12-08 北京世纪高通科技有限公司 页面布局自适应方法及装置
CN102890632A (zh) * 2012-09-18 2013-01-23 深圳市融创天下科技股份有限公司 一种屏幕自适应方法、系统和终端设备
CN103593196A (zh) * 2013-11-25 2014-02-19 深信服网络科技（深圳）有限公司 页面布局自适应方法及装置

Also Published As

Publication number Publication date
CN107861711A (zh) 2018-03-30

Similar Documents

Publication Publication Date Title
CN107861711B (zh) 页面适配方法及装置
CN103634632B (zh) 图片信息的处理方法、装置及系统
US20180061128A1 (en) Digital Content Rendering Coordination in Augmented Reality
US10049490B2 (en) Generating virtual shadows for displayable elements
JP5992934B2 (ja) 三次元ビューイングの方法
US11551392B2 (en) Graphic drawing method and apparatus, device, and storage medium
US20160335740A1 (en) Zoomable web-based wall with natural user interface
US9443494B1 (en) Generating bounding boxes for labels
Lam et al. M2a: A framework for visualizing information from mobile web to mobile augmented reality
CN113126862B (zh) 截屏方法、装置、电子设备以及可读存储介质
WO2017092430A1 (zh) 基于虚拟现实应用的用户界面控件实现方法和装置
KR20200142065A (ko) 글로벌 특수 효과의 전환 방법, 전환 장치, 단말 설비 및 저장 매체
WO2023071861A1 (zh) 数据可视化展示方法、装置、计算机设备和存储介质
CN111432264A (zh) 基于媒体信息流的内容展示方法、装置、设备及存储介质
CN108932413A (zh) 一种数字签名生成方法、装置及存储介质
EP3561762A1 (en) Projection image construction method and device
JP2024504053A (ja) 二次元コード表示方法、装置、デバイス及び媒体
KR102237520B1 (ko) 효율적인 데이터 관리를 위한 가상 전시 공간 제공 방법
CN105045587A (zh) 一种图片展示方法及装置
KR102237519B1 (ko) 2.5 차원화를 이용한 가상 전시 공간 제공 방법
CN107391148B (zh) 视图元素保存方法、装置、电子设备及计算机存储介质
CN113946250A (zh) 文件夹显示方法、装置及电子设备
US10248292B2 (en) Electronic picture book which sequentially changes in response to scroll operation
CN110990106B (zh) 数据展示方法、装置、计算机设备及存储介质
AU2015264474A1 (en) Systems and methods for programming behavior of a website to respond to capabilities of different devices

Legal Events

Date Code Title Description
PB01 Publication
PB01 Publication
SE01 Entry into force of request for substantive examination
SE01 Entry into force of request for substantive examination
GR01 Patent grant
GR01 Patent grant