CN107526592A - 一种页面适配方法和装置 - Google Patents

一种页面适配方法和装置 Download PDF

Info

Publication number
CN107526592A
CN107526592A CN201710725535.9A CN201710725535A CN107526592A CN 107526592 A CN107526592 A CN 107526592A CN 201710725535 A CN201710725535 A CN 201710725535A CN 107526592 A CN107526592 A CN 107526592A
Authority
CN
China
Prior art keywords
zooming parameter
area
content regions
background area
size
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.)
Granted
Application number
CN201710725535.9A
Other languages
English (en)
Other versions
CN107526592B (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.)
Bigo Technology Pte Ltd
Original Assignee
Guangzhou Baiguoyuan Information Technology 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 Guangzhou Baiguoyuan Information Technology Co Ltd filed Critical Guangzhou Baiguoyuan Information Technology Co Ltd
Priority to CN201710725535.9A priority Critical patent/CN107526592B/zh
Publication of CN107526592A publication Critical patent/CN107526592A/zh
Application granted granted Critical
Publication of CN107526592B publication Critical patent/CN107526592B/zh
Active legal-status Critical Current
Anticipated expiration legal-status Critical

Links

Classifications

    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F8/00—Arrangements for software engineering
    • G06F8/30—Creation or generation of source code
    • G06F8/38—Creation or generation of source code for implementing user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06F—ELECTRIC DIGITAL DATA PROCESSING
    • G06F9/00—Arrangements for program control, e.g. control units
    • G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
    • G06F9/44—Arrangements for executing specific programs
    • G06F9/451—Execution arrangements for user interfaces
    • G—PHYSICS
    • G06—COMPUTING; CALCULATING OR COUNTING
    • G06T—IMAGE DATA PROCESSING OR GENERATION, IN GENERAL
    • G06T3/00—Geometric image transformations in the plane of the image
    • G06T3/40—Scaling of whole images or parts thereof, e.g. expanding or contracting

Landscapes

  • Engineering & Computer Science (AREA)
  • Theoretical Computer Science (AREA)
  • Software Systems (AREA)
  • Physics & Mathematics (AREA)
  • General Physics & Mathematics (AREA)
  • General Engineering & Computer Science (AREA)
  • Human Computer Interaction (AREA)
  • User Interface Of Digital Computer (AREA)

Abstract

本申请提供了一种页面适配方法和装置。针对一种全屏显示无滚动条的页面适配需求，在保证内容区在显示区域中完全显示且面积最大化，背景区将显示区域铺满的条件下，计算缩放参数并分别缩放内容区和背景区，从而使页面全屏适配显示区域且不出现滚动条，能在兼顾不同比例屏幕全屏适配的条件下降低设计开发的工作时间。

Description

一种页面适配方法和装置
技术领域
本申请涉及互联网领域，特别是涉及一种页面适配方法和装置。
背景技术
在网页的设计和开发中，如何使页面快速的适配各种设备一直是开发人员研究的课题，这里说的适配，指的是适配页面使其在不同显示区域中都能在铺满显示区域的情况下保持页面内容完整，且不出现滚动条。
现有技术是：为了处理不同大小的显示区域带来的页面显示差异，通过查询区分不同的显示区域尺寸，再根据查询到的尺寸分别提供不同的显示方案，显示方案中需要给出图片控件等各种页面元素的尺寸样式。举例说明：如果判断显示区域尺寸在1025-1440px之间，使用显示方案1，如果判断显示区域尺寸在1441-1900px之间，使用显示方案2….以此类推。这种方法需要预先给出多种显示方案并全部写入CSS文件，在页面载入时根据查询到的显示区域尺寸选择一种方案使用。这种方法在页面设计，代码开发，后期维护上都繁琐且耗时较长。
发明内容
为解决上述技术问题，本申请提供了一种页面适配方法和装置，技术方案如下：
一种页面适配方法，用于适配页面使其在不同显示区域中都能全屏显示且无滚动条，所述页面包含背景区和内容区，所述方法包括：
确定显示区域的尺寸与待显示页面的内容区尺寸、背景区尺寸，所述待显示页面的内容区和背景区位于不同的图层；
根据所述显示区域的尺寸与内容区的尺寸，计算内容区相对于显示区域的第一缩放参数，所述第一缩放参数使内容区缩放后在显示区域中完全显示且面积最大化；
根据所述显示区域的尺寸与背景区的尺寸，计算背景区相对于显示区域的第二缩放参数，所述第二缩放参数使背景区缩放后将显示区域铺满；
利用js脚本判断用于加载页面的浏览器是否为IE内核；
如果浏览器为IE内核，将第一缩放参数和第二缩放参数赋值给IE内核支持的第一元素缩放属性，以使内容区根据第一缩放参数进行等比例缩放，背景区根据第二缩放参数进行等比例缩放；
如果浏览器为非IE内核，将第一缩放参数和第二缩放参数赋值给非IE内核支持的第二元素缩放属性，以使内容区根据第一缩放参数进行等比例缩放，背景区根据第二缩放参数进行等比例缩放。
一种页面适配装置，用于适配页面使其在不同显示区域中都能全屏显示且无滚动条，所述页面包含背景区和内容区，所述装置包括：
尺寸确定模块：用于确定显示区域的尺寸与待显示页面的内容区尺寸、背景区尺寸，所述待显示页面的内容区和背景区位于不同的图层；
第一参数计算模块：用于根据所述显示区域的尺寸与内容区的尺寸，计算内容区相对于显示区域的第一缩放参数，所述第一缩放参数使内容区缩放后在显示区域中完全显示且面积最大化；
第二参数计算模块：用于根据所述显示区域的尺寸与背景区的尺寸，计算背景区相对于显示区域的第二缩放参数，所述第二缩放参数使背景区缩放后将显示区域铺满；
内核信息判断模块：用于利用js脚本判断用于加载页面的浏览器是否为IE内核；
缩放模块：用于当浏览器为IE内核时，将第一缩放参数和第二缩放参数赋值给IE内核支持的第一元素缩放属性，以使内容区根据第一缩放参数进行等比例缩放，背景区根据第二缩放参数进行等比例缩放；
当浏览器为非IE内核时，将第一缩放参数和第二缩放参数赋值给非IE内核支持的第二元素缩放属性，以使内容区根据第一缩放参数进行等比例缩放，背景区根据第二缩放参数进行等比例缩放。
本申请针对不同大小的显示区域带来的页面显示差异问题提出了一种页面适配方法，先记录显示区域的尺寸与页面内容区，背景区的尺寸，在保证内容区在显示区域中完全显示且面积最大化，背景区且将显示区域铺满的条件下，计算缩放参数并分别缩放内容区和背景区，从而使页面全屏适配显示区域。使用这种方法无需设计师规划何种尺寸页面显示方案如何变化，也不需要开发人员为不同显示方案撰写大量代码，能在兼顾不同比例屏幕全屏适配的条件下降低设计开发的工作时间。
附图说明
为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请中记载的一些实施例，对于本领域普通技术人员来讲，还可以根据这些附图获得其他的附图。
图1为为本申请实施例页面适配方法的一种流程图；
图2为为本申请实施例页面适配方法的另一种流程图；
图3为本申请页面内容区适配显示区域的一种示意图；
图4为本申请页面背景区适配显示区域的一种示意图；
图5为本申请实施例页面适配装置的另一种示意图；
图6为本申请实施例一种计算机设备的结构示意图。
具体实施方式
随着技术的发展和网页UI风格的更新换代，对网页UI的需求也在不断变化，出现了大量这样的网页UI需求：H5风格页面，该页面需要全屏铺满显示区域而不出现滚动条。这种需求的页面通常用于各种网络推广，展览屏显示或用于制作邀请函，贺卡等。页面适配必须处理不同大小的显示区域带来的UI差异。
为了使本领域技术人员更好地理解本申请中的技术方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行详细地描述。
参见附图1，为本申请实施例页面适配方法的一种流程图，其可以包括以下基本步骤：
S101，确定显示区域的尺寸与待显示页面的内容区尺寸、背景区尺寸；
页面需要使用网页加载器也就是浏览器来加载出来，这里的浏览器，指的不只是IE，谷歌等浏览器，还包括微信，微博等软件内置的可用来浏览网页的浏览器。
显示区域指的是浏览器内可用来显示页面内容的窗口，去掉浏览器头部工具，侧边栏，滚动条等，留下的单纯用来显示页面的部分就是显示区域。
在本实施例中，页面被分为了内容区和背景区两部分。内容区通常包括文字，图片，按钮等，是这个页面希望展示给用户的“内容”部分，而背景区通常以图片的形式衬托内容区，以形成较好的视觉效果。内容区图层与背景区图层不同，内容区通常在背景区之上，可以将背景区覆盖。
S102，根据所述显示区域的尺寸与内容区的尺寸，计算内容区相对于显示区域的第一缩放参数；
内容区的缩放原则是：内容区在显示区域中完全显示且面积最大化。
需要注意的是，这里的缩放，指的是等比例缩放，缩放后内容区宽高比维持原样不能变形。
参见附图3，为内容区适配显示区域的示意图。
S103，根据所述显示区域的尺寸与背景区的尺寸，计算背景区相对于显示区域的第二缩放参数；
背景区的缩放原则是：背景区缩放后将显示区域铺满。
背景区起到的作用是在内容区下方进行衬托，使网页整体获得一个比较好的视觉效果，背景区需要将整个显示区域中铺满，不留“空白”。
需要注意的是，这里的缩放，指的也是等比例缩放，缩放后背景区宽高比维持原样不能变形。
参见附图4，为背景区适配显示区域的示意图。
如果背景区的宽高比例和显示区域的宽高比例完全相同，背景区缩放后可以刚好铺满显示区域。但如果背景区的宽高比例和显示区域的宽高比例不相同，为了保证背景区不变形，背景区缩放后高度或宽度将超出显示区域，此时需要对背景区作出裁剪。
假设背景区缩放后宽度超出显示区域，通常情况下，使背景区在显示区域居中显示，将背景区超出显示区域的左，右两部分，分别裁剪掉同样大小。或使背景区在显示区域不居中显示，将背景区超出显示区域的左，右两部分，分别裁剪掉不同大小。
在实际应用中，也可以使背景区与显示区域左侧对齐，裁剪背景区超出显示区域的右侧部分。或背景区与显示区域右侧对齐，裁剪背景区超出显示区域的左侧部分。
S104，利用js脚本判断用于加载页面的浏览器是否为IE内核，如果是IE内核，执行步骤S105，如果不是IE内核，执行步骤S106；
在本步骤中，需要判断浏览器的内核信息，确定浏览器是IE内核还是非IE内核。不同内核的浏览器需要应用不同的方法处理渲染比例。也就是说，IE内核的浏览器和非IE内核的浏览器，缩放页面的方法不一致，需要根据内核信息的不同，使用对应的适配命令去进行页面的适配。
在实际应用中，通常在网页的js脚本中添加命令行，用其检测浏览器是否支持ie内核的某个独有属性，如果支持这个属性，确定为ie内核,如果不支持属性A，确定为非ie内核。
S105，将第一缩放参数和第二缩放参数赋值给IE内核支持的第一元素缩放属性，以使内容区根据第一缩放参数进行等比例缩放，背景区根据第二缩放参数进行等比例缩放；
获得第一缩放参数和第二缩放参数后，分别缩放内容区和背景区。并将内容区和背景区放在显示区域中的适当位置。其中，内容区图层在背景区之上，可以将背景区覆盖。
其中，IE内核与非IE内核对网页属性的支持不同，如果是IE内核，通常将计算出的缩放值赋给缩放属性zoom，如果是非IE内核，通常将计算出的缩放值赋给缩放属性scale。
S106，将第一缩放参数和第二缩放参数赋值给非IE内核支持的第二元素缩放属性，以使内容区根据第一缩放参数进行等比例缩放，背景区根据第二缩放参数进行等比例缩放。
参见附图2，为本申请实施例页面适配方法的另一种流程图。
S201，确定显示区域的尺寸与待显示页面的内容区尺寸、背景区尺寸。与S102所述相同。
S202，分别计算a1和b1，并将a1和b1中的最小值确定为第一缩放参数，然后执行步骤S204；
a1＝内容区高度/显示区域高度
b1＝内容区高度/显示区域高度；
内容区的缩放原则是：内容区在显示区域中完全显示且面积最大化。
需要注意的是，这里的缩放，指的是等比例缩放，缩放后内容区宽高比维持原样不能变形。
参见附图3，为内容区适配不同尺寸的显示区域的示意图。
以附图3为例说明；
内容区的尺寸为2000*1000，当显示区域尺寸为2500*1000时，
a1＝显示区域高度/内容区高度＝2500/2000＝1.25；
b1＝显示区域宽度/内容区宽度＝1000/1000＝1。
a1和b1中的最小值为1，此时，第一缩放参数为1。
内容区的尺寸为2000*1000，当显示区域尺寸为1500*1000时，
a1＝显示区域高度/内容区高度＝1500/2000＝0.75；
b1＝显示区域宽度/内容区宽度＝1000/1000＝1。
a1和b1中的最小值为0.75，此时，第一缩放参数为0.75。
S203，分别计算a2和b2，并将a2和b2中的最大值确定为第二缩放参数，然后执行步骤S205；
a2＝显示区域高度/内容区高度；
b2＝显示区域宽度/内容区宽度。
背景区的缩放原则是：背景区缩放后将显示区域铺满。
背景区起到的作用是在内容区下方进行衬托，使网页整体获得一个比较好的视觉效果，背景区需要将整个显示区域中铺满，不留“空白”。
需要注意的是，这里的缩放，指的也是等比例缩放，缩放后背景区宽高比维持原样不能变形。
参见附图4，为背景区适配不同尺寸的显示区域的示意图。
以附图4为例说明；
背景区的尺寸为2000*1000，当显示区域尺寸为2500*1000时，
a2＝显示区域高度/背景区高度＝2500/2000＝1.25；
b2＝显示区域宽度/背景区宽度＝1000/1000＝1。
a1和b1中的最大值为1.25，此时，第二缩放参数为1.25。
背景区的尺寸为2000*1000，当显示区域尺寸为1500*1000时，
a2＝显示区域高度/背景区高度＝1500/2000＝0.75；
b2＝显示区域宽度/背景区宽度＝1000/1000＝1。
a2和b2中的最大值为1，此时，第二缩放参数为1。
S204，利用js脚本判断用于加载页面的浏览器是否为IE内核，如果是IE内核，执行步骤S205，如果不是IE内核，执行步骤S206；
S205，将第一缩放参数和第二缩放参数赋值给IE内核支持的第一元素缩放属性，以使内容区根据第一缩放参数进行等比例缩放，背景区根据第二缩放参数进行等比例缩放；
其中，将内容区的高度和宽度都乘以第一缩放参数，对内容区进行缩放；
接步骤S202，以附图3为例说明：
内容区的尺寸为2000*1000，当显示区域尺寸为2500*1000时，获得第一缩放参数为1。将内容区的宽度和高度2000*1000分别乘以第一缩放参数1，获得缩放后的内容区宽度2000*1000，可以看出，第一缩放参数使内容区在显示区域中完全显示且面积最大化。
内容区的尺寸为2000*1000，当显示区域尺寸为1500*1000时，获得第一缩放参数为0.75。将内容区的宽度和高度2000*1000分别乘以第一缩放参数0.75，获得缩放后的内容区宽度1500*750，可以看出，第一缩放参数使内容区在显示区域中完全显示且面积最大化。
需要注意的是，附图3中内容区分别在显示区域中向左和向上对齐。但在实际应用中并不限于附图3中的对齐方式，内容区可以根据实际情况，适配在显示区域的任何部分。
其中，将背景区的高度和宽度都乘以第二缩放参数，对背景区进行缩放；
接步骤S203，以附图4为例说明；
背景区的尺寸为2000*1000，当显示区域尺寸为2500*1000时，获得第二缩放参数为1.25。将背景区的宽度和高度2000*1000分别乘以第二缩放参数1.25，获得缩放后的背景区宽度2500*1250，可以看出，第二缩放参数可以使背景区将显示区域完全铺满。
背景区的尺寸为2000*1000，当显示区域尺寸为1500*1000时，获得第二缩放参数为1。将背景区的宽度和高度2000*1000分别乘以第二缩放参数1，获得缩放后的背景区宽度2000*1000，可以看出，第二缩放参数可以使背景区将显示区域完全铺满。
需要注意的是，背景区的适配原则是铺满显示区域而不是完全展示，如附图4所示，在完成对背景区的缩放后，背景区有可能在显示区域中显示不全。在实际应用中，背景区对于显示区域并不限于附图4中的对齐方式，背景区可以根据实际情况，适配在显示区域的任何部分。
S206，将第一缩放参数和第二缩放参数赋值给非IE内核支持的第二元素缩放属性，以使内容区根据第一缩放参数进行等比例缩放，背景区根据第二缩放参数进行等比例缩放。
参见附图5，为本申请实施例页面适配装置的一种示意图。包括：尺寸确定模块501，第一参数计算模块502，第二参数计算模块503，内核信息判断模块504，缩放模块505。
尺寸确定模块501：用于确定显示区域的尺寸与待显示页面的内容区尺寸、背景区尺寸，所述待显示页面的内容区和背景区位于不同的图层；
第一参数计算模块502：用于根据所述显示区域的尺寸与内容区的尺寸，计算内容区相对于显示区域的第一缩放参数，所述第一缩放参数使内容区缩放后在显示区域中完全显示且面积最大化；
第二参数计算模块503：用于根据所述显示区域的尺寸与背景区的尺寸，计算背景区相对于显示区域的第二缩放参数，所述第二缩放参数使背景区缩放后将显示区域铺满；
内核信息判断模块504：用于利用js脚本判断用于加载页面的浏览器是否为IE内核；
第一缩放模块505：用于当浏览器为IE内核时，将第一缩放参数和第二缩放参数赋值给IE内核支持的第一元素缩放属性，以使内容区根据第一缩放参数进行等比例缩放，背景区根据第二缩放参数进行等比例缩放；
当浏览器为非IE内核时，将第一缩放参数和第二缩放参数赋值给非IE内核支持的第二元素缩放属性，以使内容区根据第一缩放参数进行等比例缩放，背景区根据第二缩放参数进行等比例缩放。
附图6示出了本申请实施例所提供的一种更为具体的计算设备硬件结构示意图，该设备可以包括：处理器1010、存储器1020、输入/输出接口1030、通信接口1040和总线1050。其中处理器1010、存储器1020、输入/输出接口1030和通信接口1040通过总线1050实现彼此之间在设备内部的通信连接。
处理器1010可以采用通用的CPU(Central Processing Unit，中央处理器)、微处理器、应用专用集成电路(Application Specific Integrated Circuit，ASIC)、或者一个或多个集成电路等方式实现，用于执行相关程序，以实现本申请实施例所提供的技术方案。
存储器1020可以采用ROM(Read Only Memory，只读存储器)、RAM(Random AccessMemory，随机存取存储器)、静态存储设备，动态存储设备等形式实现。存储器1020可以存储操作系统和其他应用程序，在通过软件或者固件来实现本申请实施例所提供的技术方案时，相关的程序代码保存在存储器1020中，并由处理器1010来调用执行。
输入/输出接口1030用于连接输入/输出模块，以实现信息输入及输出。输入输出/模块可以作为组件配置在设备中(图中未示出)，也可以外接于设备以提供相应功能。其中输入设备可以包括键盘、鼠标、触摸屏、麦克风、各类传感器等，输出设备可以包括显示器、扬声器、振动器、指示灯等。
通信接口1040用于连接通信模块(图中未示出)，以实现本设备与其他设备的通信交互。其中通信模块可以通过有线方式(例如USB、网线等)实现通信，也可以通过无线方式(例如移动网络、WIFI、蓝牙等)实现通信。
总线1050包括一通路，在设备的各个组件(例如处理器1010、存储器1020、输入/输出接口1030和通信接口1040)之间传输信息。
需要说明的是，尽管上述设备仅示出了处理器1010、存储器1020、输入/输出接口1030、通信接口1040以及总线1050，但是在具体实施过程中，该设备还可以包括实现正常运行所必需的其他组件。此外，本领域的技术人员可以理解的是，上述设备中也可以仅包含实现本申请实施例方案所必需的组件，而不必包含图中所示的全部组件。
本申请实施例还提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现前述的页面适配方法。该方法包括：
确定显示区域的尺寸与待显示页面的内容区尺寸、背景区尺寸，所述待显示页面的内容区和背景区位于不同的图层；
根据所述显示区域的尺寸与内容区的尺寸，计算内容区相对于显示区域的第一缩放参数，所述第一缩放参数使内容区缩放后在显示区域中完全显示且面积最大化；
根据所述显示区域的尺寸与背景区的尺寸，计算背景区相对于显示区域的第二缩放参数，所述第二缩放参数使背景区缩放后将显示区域铺满；
使用选定的适配命令，根据第一缩放参数对内容区进行等比例缩放，根据第二缩放参数对背景区进行等比例缩放。
计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。
本申请中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置实施例而言，由于其基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。
以上所述仅为本申请的较佳实施例而已，并不用以限制本申请，凡在本申请的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本申请保护的范围之内。

Claims (11)

1.一种页面适配方法，用于适配页面使其在不同显示区域中都能全屏显示且无滚动条，所述页面包含背景区和内容区，其特征在于，所述方法包括：
确定显示区域的尺寸与待显示页面的内容区尺寸、背景区尺寸，所述待显示页面的内容区和背景区位于不同的图层；
根据所述显示区域的尺寸与内容区的尺寸，计算内容区相对于显示区域的第一缩放参数，所述第一缩放参数使内容区缩放后在显示区域中完全显示且面积最大化；
根据所述显示区域的尺寸与背景区的尺寸，计算背景区相对于显示区域的第二缩放参数，所述第二缩放参数使背景区缩放后将显示区域铺满；
利用js脚本判断用于加载页面的浏览器是否为IE内核；
如果浏览器为IE内核，将第一缩放参数和第二缩放参数赋值给IE内核支持的第一元素缩放属性，以使内容区根据第一缩放参数进行等比例缩放，背景区根据第二缩放参数进行等比例缩放；
如果浏览器为非IE内核，将第一缩放参数和第二缩放参数赋值给非IE内核支持的第二元素缩放属性，以使内容区根据第一缩放参数进行等比例缩放，背景区根据第二缩放参数进行等比例缩放。
2.根据权利要求1所述的方法，其特征在于，所述计算内容区相对于显示区域的第一缩放参数，包括：
分别计算a1和b1，并将a1和b1中的最小值确定为第一缩放参数，其中：
a1＝显示区域高度/内容区高度，
b1＝显示区域宽度/内容区宽度。
3.根据权利要求2所述的方法，其特征在于，所述内容区根据第一缩放参数进行等比例缩放，包括：
将内容区的高度和宽度都乘以第一缩放参数，对内容区进行缩放。
4.根据权利要求1所述的方法，其特征在于，所述计算背景区相对于显示区域的第二缩放参数，包括：
分别计算a2和b2，并将a2和b2中的最大值确定为第二缩放参数，其中：
a2＝显示区域高度/内容区高度，
b2＝显示区域宽度/内容区宽度。
5.根据权利要求4所述的方法，其特征在于，所述背景区根据第二缩放参数进行等比例缩放，包括：
将背景区的高度和宽度都乘以第二缩放参数，对背景区进行缩放。
6.一种页面适配装置，用于适配页面使其在不同显示区域中都能全屏显示且无滚动条，所述页面包含背景区和内容区，其特征在于，所述装置包括：
尺寸确定模块：用于确定显示区域的尺寸与待显示页面的内容区尺寸、背景区尺寸，所述待显示页面的内容区和背景区位于不同的图层；
第一参数计算模块：用于根据所述显示区域的尺寸与内容区的尺寸，计算内容区相对于显示区域的第一缩放参数，所述第一缩放参数使内容区缩放后在显示区域中完全显示且面积最大化；
第二参数计算模块：用于根据所述显示区域的尺寸与背景区的尺寸，计算背景区相对于显示区域的第二缩放参数，所述第二缩放参数使背景区缩放后将显示区域铺满；
内核信息判断模块：用于利用js脚本判断用于加载页面的浏览器是否为IE内核；
缩放模块：用于当浏览器为IE内核时，将第一缩放参数和第二缩放参数赋值给IE内核支持的第一元素缩放属性，以使内容区根据第一缩放参数进行等比例缩放，背景区根据第二缩放参数进行等比例缩放；
当浏览器为非IE内核时，将第一缩放参数和第二缩放参数赋值给非IE内核支持的第二元素缩放属性，以使内容区根据第一缩放参数进行等比例缩放，背景区根据第二缩放参数进行等比例缩放。
7.根据权利要求6所述的装置，其特征在于，所述第一参数计算模块，具体用于：
分别计算a1和b1，并将a1和b1中的最小值确定为第一缩放参数，其中：
a1＝显示区域高度/内容区高度，
b1＝显示区域宽度/内容区宽度。
8.根据权利要求7所述的装置，其特征在于，所述缩放模块，具体用于：
将内容区的高度和宽度都乘以第一缩放参数，对内容区进行缩放。
9.根据权利要求6所述的装置，其特征在于，所述第二参数计算模块，具体用于：
分别计算a2和b2，并将a2和b2中的最大值确定为第二缩放参数，其中：
a2＝显示区域高度/内容区高度，
b2＝显示区域宽度/内容区宽度。
10.根据权利要求9所述的装置，其特征在于，所述缩放模块，具体用于：
将背景区的高度和宽度都乘以第二缩放参数，对背景区进行缩放。
11.一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现前述的页面适配方法，其特征在于，所述方法包括：
确定显示区域的尺寸与待显示页面的内容区尺寸、背景区尺寸，所述待显示页面的内容区和背景区位于不同的图层；
根据所述显示区域的尺寸与内容区的尺寸，计算内容区相对于显示区域的第一缩放参数，所述第一缩放参数使内容区缩放后在显示区域中完全显示且面积最大化；
根据所述显示区域的尺寸与背景区的尺寸，计算背景区相对于显示区域的第二缩放参数，所述第二缩放参数使背景区缩放后将显示区域铺满；
利用js脚本判断用于加载页面的浏览器是否为IE内核；
如果浏览器为IE内核，将第一缩放参数和第二缩放参数赋值给IE内核支持的第一元素缩放属性，以使内容区根据第一缩放参数进行等比例缩放，背景区根据第二缩放参数进行等比例缩放；
如果浏览器为非IE内核，将第一缩放参数和第二缩放参数赋值给非IE内核支持的第二元素缩放属性，以使内容区根据第一缩放参数进行等比例缩放，背景区根据第二缩放参数进行等比例缩放。
CN201710725535.9A 2017-08-22 2017-08-22 一种页面适配方法和装置 Active CN107526592B (zh)

Priority Applications (1)

Application Number Priority Date Filing Date Title
CN201710725535.9A CN107526592B (zh) 2017-08-22 2017-08-22 一种页面适配方法和装置

Applications Claiming Priority (1)

Application Number Priority Date Filing Date Title
CN201710725535.9A CN107526592B (zh) 2017-08-22 2017-08-22 一种页面适配方法和装置

Publications (2)

Publication Number Publication Date
CN107526592A true CN107526592A (zh) 2017-12-29
CN107526592B CN107526592B (zh) 2021-08-24

Family

ID=60681889

Family Applications (1)

Application Number Title Priority Date Filing Date
CN201710725535.9A Active CN107526592B (zh) 2017-08-22 2017-08-22 一种页面适配方法和装置

Country Status (1)

Country Link
CN (1) CN107526592B (zh)

Cited By (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108647348A (zh) * 2018-05-15 2018-10-12 平安普惠企业管理有限公司 文本展示方法、装置、设备及存储介质
CN109254813A (zh) * 2018-08-20 2019-01-22 中国平安人寿保险股份有限公司 屏幕适配方法、装置、计算机设备及存储介质
CN109308155A (zh) * 2018-08-21 2019-02-05 中国平安人寿保险股份有限公司 调整页面的方法、装置、计算机设备及存储介质
CN110968385A (zh) * 2018-09-30 2020-04-07 北京国双科技有限公司 比例显示方法和装置
CN111258582A (zh) * 2020-02-10 2020-06-09 北京字节跳动网络技术有限公司 一种窗口渲染方法、装置、计算机设备及存储介质
CN112784526A (zh) * 2020-06-05 2021-05-11 珠海金山办公软件有限公司 一种文档页面调整方法及装置

Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105511725A (zh) * 2015-12-09 2016-04-20 网易（杭州）网络有限公司 界面中控件的显示方法及装置
CN105589883A (zh) * 2014-10-24 2016-05-18 阿里巴巴集团控股有限公司 网页的页面元素的显示方法和装置
CN105917369A (zh) * 2014-01-14 2016-08-31 指尖翻动公司 修改广告大小调整以用于在数字杂志中呈现
CN106021353A (zh) * 2016-05-09 2016-10-12 Tcl集团股份有限公司 一种网页的显示适配方法及系统
CN106204439A (zh) * 2016-06-28 2016-12-07 乐视控股（北京）有限公司 图片自适应处理的方法和系统
CN106844656A (zh) * 2017-01-23 2017-06-13 北京深思数盾科技股份有限公司 一种页面适配方法及系统

Patent Citations (6)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN105917369A (zh) * 2014-01-14 2016-08-31 指尖翻动公司 修改广告大小调整以用于在数字杂志中呈现
CN105589883A (zh) * 2014-10-24 2016-05-18 阿里巴巴集团控股有限公司 网页的页面元素的显示方法和装置
CN105511725A (zh) * 2015-12-09 2016-04-20 网易（杭州）网络有限公司 界面中控件的显示方法及装置
CN106021353A (zh) * 2016-05-09 2016-10-12 Tcl集团股份有限公司 一种网页的显示适配方法及系统
CN106204439A (zh) * 2016-06-28 2016-12-07 乐视控股（北京）有限公司 图片自适应处理的方法和系统
CN106844656A (zh) * 2017-01-23 2017-06-13 北京深思数盾科技股份有限公司 一种页面适配方法及系统

Cited By (8)

* Cited by examiner, † Cited by third party
Publication number Priority date Publication date Assignee Title
CN108647348A (zh) * 2018-05-15 2018-10-12 平安普惠企业管理有限公司 文本展示方法、装置、设备及存储介质
CN109254813A (zh) * 2018-08-20 2019-01-22 中国平安人寿保险股份有限公司 屏幕适配方法、装置、计算机设备及存储介质
CN109254813B (zh) * 2018-08-20 2024-07-30 中国平安人寿保险股份有限公司 屏幕适配方法、装置、计算机设备及存储介质
CN109308155A (zh) * 2018-08-21 2019-02-05 中国平安人寿保险股份有限公司 调整页面的方法、装置、计算机设备及存储介质
CN110968385A (zh) * 2018-09-30 2020-04-07 北京国双科技有限公司 比例显示方法和装置
CN111258582A (zh) * 2020-02-10 2020-06-09 北京字节跳动网络技术有限公司 一种窗口渲染方法、装置、计算机设备及存储介质
CN111258582B (zh) * 2020-02-10 2023-09-05 北京字节跳动网络技术有限公司 一种窗口渲染方法、装置、计算机设备及存储介质
CN112784526A (zh) * 2020-06-05 2021-05-11 珠海金山办公软件有限公司 一种文档页面调整方法及装置

Also Published As

Publication number Publication date
CN107526592B (zh) 2021-08-24

Similar Documents

Publication Publication Date Title
CN107526592A (zh) 一种页面适配方法和装置
US10467668B2 (en) Techniques for providing electronic endcap items
EP3435225B1 (en) Mixed view display method and device
US9952838B2 (en) Methods, systems, and computer readable media for generating a visual overlay
CN109324796B (zh) 界面布局方法及装置
CN107704242A (zh) 一种竖向显示屏的横向使用方法和电子设备
CN112068911B (zh) 电子表单的生成方法、装置、系统、设备以及介质
CN111461801A (zh) 一种页面生成方法及其装置
CN106202513A (zh) 浏览器的浏览主站推荐方法和装置
CN105608152A (zh) 一种网页资源异步加载的方法及装置
CN103020127B (zh) 用于图片的呈现方法和装置
CN111782106A (zh) 用于展示页面菜单栏的方法、装置、电子设备和可读介质
CN107450809B (zh) 页面交互方法、装置以及电子终端
US9424256B2 (en) Method and apparatus for performing type-aware change tracking in a document
EP2608003A1 (en) Method and device for movement of image object
CN106681972A (zh) 表格显示方法及装置
CN114546553B (zh) 一种信息显示的方法、装置、设备及介质
US11194880B2 (en) Detecting selection of disabled inner links within nested content
CN111275426B (zh) 一种支付、订单处理方法和装置
CN107688636A (zh) 一种页面适配方法和装置
CN114168027B (zh) 信息显示方法、装置及设备
CN112395827A (zh) 一种树状结构图的绘制方法以及移动终端
CN112306838A (zh) 页面布局兼容性测试方法、装置、设备及可读存储介质
CN107832028A (zh) 多屏显示系统及方法
CN113434214B (zh) 一种页面中的组件显示方法及装置

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
TR01 Transfer of patent right
TR01 Transfer of patent right

Effective date of registration: 20220601

Address after: 31a, 15 / F, building 30, maple mall, bangrang Road, Brazil, Singapore

Patentee after: Baiguoyuan Technology (Singapore) Co.,Ltd.

Address before: 511442 room 2705, 27 / F, building B-1, Wanda Plaza North, Wanbo business district, 79 Wanbo 2nd Road, Nancun Town, Panyu District, Guangzhou City, Guangdong Province

Patentee before: GUANGZHOU BAIGUOYUAN INFORMATION TECHNOLOGY Co.,Ltd.