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

Abstract

本申请提供了一种页面适配方法和装置。在浏览器支持修改默认显示方案中虚拟窗口viewport的宽度的情况下，修改浏览器默认显示方案中虚拟窗口viewport的宽度，使其等于待显示页面的宽度，在浏览器不支持修改默认显示方案中虚拟窗口viewport的宽度的情况下，取消浏览器的默认显示方案，根据页面宽度与理想宽度计算缩放参数，根据缩放参数对待显示页面进行缩放，不需要将各种控件元素换算成百分比或rem值并写入CSS文件，开发过程更简便快速。

Description

一种页面适配方法和装置

技术领域

本申请涉及互联网领域，特别是涉及一种页面适配方法和装置。

背景技术

在网页的设计和开发中，如何使页面快速的适配各种设备一直是开发人员研究的课题，这里说的适配，指的是当页面在诸如手机端这类较小的显示区域中进行显示时，需要在网页不出现水平滚动条的同时保证字体等元素的尺寸大小适合阅读。

目前主要使用的技术有两种，一种是计算页面中的各种控件元素占上一层控件元素的百分比，给出最上层控件元素作为参照物，在载入页面时，根据不同的屏幕调整参照物上层控件元素的大小，页面中相关控件元素都会根据参照物做出调整。另一种是给定单位rem，计算页面中的各种控件元素的rem值。给出单位rem作为参照物，在载入页面时，根据不同的屏幕调整参照物单位rem的大小，页面中相关控件元素都会根据参照物做出调整。

这两种方法需要将各种控件元素换算成百分比或rem值并写入CSS文件，开发过程繁琐，耗时较长。

发明内容

为解决上述技术问题，本申请提供了一种页面适配方法和装置，技术方案如下：

一种页面适配方法，所述方法包括：

在浏览器支持修改默认显示方案中虚拟窗口viewport的宽度的情况下，修改浏览器默认显示方案中虚拟窗口viewport的宽度，使其等于待显示页面的宽度，所述默认显示方案中，浏览器将页面放在所述viewport中完全显示且面积最大化，并缩放viewport以使所述viewport在屏幕中完全显示；

在浏览器不支持修改默认显示方案中虚拟窗口viewport的宽度的情况下，取消浏览器的默认显示方案，根据页面宽度与理想宽度计算缩放参数，所述缩放参数使页面缩放后宽度与理想宽度相等，所述理想宽度为移动端逻辑像素的宽度，根据所述缩放参数对待显示页面进行缩放。

一种页面适配装置，所述装置包括：

第一适配模块：用于在浏览器支持修改默认显示方案中虚拟窗口viewport的宽度的情况下，修改浏览器默认显示方案中虚拟窗口viewport的宽度，使其等于待显示页面的宽度，所述默认显示方案中，浏览器将页面放在所述viewport中完全显示且面积最大化，并缩放viewport以使所述viewport在屏幕中完全显示；

第二适配模块：在浏览器不支持修改默认显示方案中虚拟窗口viewport的宽度的情况下，取消浏览器的默认显示方案，根据页面宽度与理想宽度计算缩放参数，所述缩放参数使页面缩放后宽度与理想宽度相等，所述理想宽度为移动端逻辑像素的宽度，根据所述缩放参数对待显示页面进行缩放。

在本申请的页面适配中，先尝试修改浏览器默认显示方案中的虚拟窗口viewport宽度，使其等于待显示页面的宽度，如果浏览器支持修改，适配完成；如果浏览器不支持修改，取消浏览器的默认显示方案，计算页面宽度与理想宽度的比值，根据所述比值对页面进行缩放。使用这种方法只需要尝试修改一次浏览器默认宽度并把各种控件元素直接按照原始大小写入代码，不需要分别计算各个控件元素的百分比或rem值，开发过程更简便快速。

附图说明

为了更清楚地说明本申请实施例或现有技术中的技术方案，下面将对实施例或现有技术描述中所需要使用的附图作简单地介绍，显而易见地，下面描述中的附图仅仅是本申请中记载的一些实施例，对于本领域普通技术人员来讲，还可以根据这些附图获得其他的附图。

图1为本申请实施例页面适配方法的一种流程图；

图2为本申请实施例页面适配方法的另一种流程图；

图3为本申请实施例页面适配方法的另一种流程图；

图4为本申请实施例页面适配装置的一种示意图；

图5为本申请实施例页面适配装置的另一种示意图；

图6为本申请实施例计算机设备的一种结构示意图。

具体实施方式

针对显示区域较小的页面适配，如移动端浏览器，为了方便用户在小屏幕阅读，页面适配要在页面不需要用户手动缩放，不出现水平滚动条的同时保证字体等元素的尺寸大小适合阅读。

有鉴于此，本申请实施例提供了一种页面适配方法，该方法可以包括以下步骤：

在浏览器支持修改默认显示方案中虚拟窗口viewport的宽度的情况下，修改浏览器默认显示方案中虚拟窗口viewport的宽度，使其等于待显示页面的宽度，所述默认显示方案中，浏览器将页面放在所述viewport中完全显示且面积最大化，并缩放viewport以使所述viewport在屏幕中完全显示；

在浏览器不支持修改默认显示方案中虚拟窗口viewport的宽度的情况下，取消浏览器的默认显示方案，根据页面宽度与理想宽度计算缩放参数，所述缩放参数使页面缩放后宽度与理想宽度相等，所述理想宽度为移动端逻辑像素的宽度，根据所述缩放参数对待显示页面进行缩放。

为了使本领域技术人员更好地理解本申请中的技术方案，下面将结合本申请实施例中的附图，对本申请实施例中的技术方案进行详细地描述。

参见附图1，为本申请实施例页面适配方法的一种流程图，其可以包括以下基本步骤：

S101，判断浏览器是否支持修改默认显示方案中虚拟窗口viewport的宽度，如果支持修改，执行步骤S102，如果不支持修改，执行步骤S103；

虚拟窗口viewport：viewport是浏览器为加载进来的页面准备的虚拟窗口，当页面加载进浏览器时。浏览器会把页面放在这个虚拟的"窗口"(viewport)中，这个虚拟的"窗口"(viewport)与浏览器可视区域不一定相等。通常来说viewport大于浏览器可视区域，用户可以通过平移和缩放页面来查看页面的不同部分。

在浏览器默认显示方案中，浏览器将页面放在这个viewport中完全显示且面积最大化，并缩放viewport以使所述viewport在屏幕中完全显示。

S102。修改浏览器默认显示方案中虚拟窗口viewport的宽度，使其等于待显示页面的宽度。

在这种适配方法中，需要注意的是不能出现水平滚动条。因此需要将页面宽度和显示区域宽度调整一致。

将虚拟窗口viewport的宽度修改成待显示页面的宽度，待显示页面刚好在水平方向填满viewport，默认显示方案里viewport将会被缩放以便在屏幕中完全显示。此时，待显示页面将在屏幕中完全展示且不出现水平滚动条。

S103，取消浏览器的默认显示方案，根据页面宽度与理想宽度计算缩放参数，根据缩放参数对待显示页面进行缩放；

默认显示方案里viewport将会被缩放以便在屏幕中完全显示，取消浏览器的默认显示方案后，viewport将不会被缩放。

以手机为例说明理想宽度：越来越多的网站都会为小屏幕设备，如手机进行单独的网页设计，使该网站的手机端网页能让大众获得更好的阅读体验。在此基础上，出现了理想viewport这个概念，理想viewport就是能够完美适配设备的viewport。所谓的完美适配指的是，首先不需要用户缩放页面，或滑动水平滚动条就能正常的查看网页内容，也就是说，手机端网页的宽度与手机屏幕的宽度相同；第二，显示的元素，如字体，图片等大小合适，便于人眼在手机屏幕上的阅读，比如一段14px大小的文字，不会因为在一个高密度像素的屏幕里显示得太小而无法看清，理想的情况是，这段14px的文字无论是在何种密度屏幕，何种分辨率下，显示出来的大小都是差不多的。通常将这种尺寸的viewport称为理想viewport，而本实施例里的理想宽度就是理想viewport的宽度。

不同的设备拥有不同的理想宽度，仍以手机为例，一个分辨率为320x480的手机的理想宽度是320px，而另一个屏幕尺寸相同但分辨率为640x960的手机的理想宽度也是为320px，理想宽度是移动端逻辑像素的宽度，同样的页面，载入分辨率不同而理想宽度相同的设备时，会拥有相同的显示效果。

计算缩放参数的目的是：使页面缩放后宽度与理想宽度相等，根据页面宽度与理想宽度计算缩放参数，根据缩放参数对待显示页面进行缩放

参见附图2，为本申请实施例页面适配方法的另一种流程图，其可以包括以下基本步骤：

S201，尝试修改浏览器默认显示方案中虚拟窗口viewport的宽度，使其等于待显示页面的宽度；

S202。判断浏览器是否支持修改虚拟窗口viewport的宽度，如果浏览器支持修改，适配完成，流程结束；如果不能修改成功，说明浏览器不支持修改此项参数，执行步骤S203；

S203，如果浏览器不支持修改，取消浏览器的默认显示方案，根据页面宽度与理想宽度计算缩放参数；

S204，根据所述缩放参数对待显示页面进行缩放。适配完成。

参见附图3，为本申请页面适配方法的另一种流程图。

S301，尝试修改浏览器默认显示方案中虚拟窗口viewport的宽度，使其等于待显示页面的宽度，与S201所述相同。

S302。判断浏览器是否支持修改虚拟窗口viewport的宽度，如果浏览器支持修改，适配完成，流程结束；如果浏览器不支持修改，执行步骤S303。

S303，如果浏览器不支持修改，取消浏览器的默认显示方案，获取页面宽度a和浏览器的理想宽度b,将a与b的比值确定为缩放参数；

也就是说，缩放参数＝a/b，缩放参数表示了页面需要缩放多少倍才能与理想宽度相等。

需要注意的是，缩放参数的计算方式并不仅限于令缩放参数＝a/b，在实际应用中，会有更多的进一步处理方法，举例说明：a)计算缩放参数＝a/b，并将计算结果按照预设规则向上或向下取整；b)计算缩放参数＝a/b，当缩放参数的值不符合预设条件时，使用预设的修正算法对缩放参数进行修正，直到缩放参数符合预设条件。

S304，将页面宽度乘以缩放参数，对页面宽度进行缩放；

将页面宽度乘以缩放参数，使页面宽度缩放后等于理想宽度。

在实际应用中，可以将网页CSS代码中的initial-scale(页面的初始缩放值),minimum-scale(允许用户的最小缩放值)和maximum-scale(允许用户的最大缩放值)这3个参数的值设置成缩放参数。此时，页面宽度会被缩放成理想宽度且不允许用户手动缩放。

参见附图4，为本申请实施例页面适配装置的一种示意图。包括：第一适配模块401，第二适配模块402。

第一适配模块401：用于在浏览器支持修改默认显示方案中虚拟窗口viewport的宽度的情况下，修改浏览器默认显示方案中虚拟窗口viewport的宽度，使其等于待显示页面的宽度，所述默认显示方案中，浏览器将页面放在所述viewport中完全显示且面积最大化，并缩放viewport以使所述viewport在屏幕中完全显示；

第二适配模块402：在浏览器不支持修改默认显示方案中虚拟窗口viewport的宽度的情况下，取消浏览器的默认显示方案，根据页面宽度与理想宽度计算缩放参数，所述缩放参数使页面缩放后宽度与理想宽度相等，所述理想宽度为移动端逻辑像素的宽度，根据所述缩放参数对待显示页面进行缩放。

在本申请的一种具体实施方式中，第一适配模块401具体用于：尝试修改浏览器默认显示方案中虚拟窗口viewport的宽度，使其等于待显示页面的宽度，所述默认显示方案中，浏览器将页面放在所述viewport中完全显示且面积最大化，并缩放viewport以使所述viewport在屏幕中完全显示，如果浏览器支持修改，适配完成。

在本申请的一种具体实施方式中，第二适配模块402具体用于：在浏览器不支持修改时，取消浏览器的默认显示方案，根据页面宽度与理想宽度计算缩放参数，具体为，获取页面宽度a和浏览器的理想宽度b，将a与b的比值确定为缩放参数，根据所述缩放参数对待显示页面进行缩放。

参见附图5，为本申请实施例页面适配装置的另一种示意图。包括：判断模块501，第一适配模块502，第二适配模块503。

判断模块501：获取浏览器信息，判断所述浏览器是否支持修改默认显示方案中虚拟窗口viewport的宽度；

第一适配模块502：用于在浏览器支持修改默认显示方案中虚拟窗口viewport的宽度的情况下，修改浏览器默认显示方案中虚拟窗口viewport的宽度，使其等于待显示页面的宽度，所述默认显示方案中，浏览器将页面放在所述viewport中完全显示且面积最大化，并缩放viewport以使所述viewport在屏幕中完全显示；

第二适配模块503：在浏览器不支持修改默认显示方案中虚拟窗口viewport的宽度的情况下，取消浏览器的默认显示方案，根据页面宽度与理想宽度计算缩放参数，所述缩放参数使页面缩放后宽度与理想宽度相等，所述理想宽度为移动端逻辑像素的宽度，根据所述缩放参数对待显示页面进行缩放。

本申请实施例还提供一种计算机设备，其至少包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其中，处理器执行所述程序时实现前述的页面适配方法。该方法包括：

尝试修改浏览器默认显示方案中虚拟窗口viewport的宽度，使其等于待显示页面的宽度，所述默认显示方案中，浏览器将页面放在所述viewport中完全显示且面积最大化，并缩放viewport以使所述viewport在屏幕中完全显示；

如果浏览器支持修改，适配完成；

如果浏览器不支持修改，取消浏览器的默认显示方案，根据页面宽度与理想宽度计算缩放参数，所述缩放参数使页面缩放后宽度与理想宽度相等，所述理想宽度为移动端逻辑像素的宽度；

根据所述缩放参数对待显示页面进行缩放。

附图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，但是在具体实施过程中，该设备还可以包括实现正常运行所必需的其他组件。此外，本领域的技术人员可以理解的是，上述设备中也可以仅包含实现本申请实施例方案所必需的组件，而不必包含图中所示的全部组件。

本申请实施例还提供一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现前述的页面适配方法。该方法包括：

尝试修改浏览器默认显示方案中虚拟窗口viewport的宽度，使其等于待显示页面的宽度，所述默认显示方案中，浏览器将页面放在所述viewport中完全显示且面积最大化，并缩放viewport以使所述viewport在屏幕中完全显示；

如果浏览器支持修改，适配完成；

如果浏览器不支持修改，取消浏览器的默认显示方案，根据页面宽度与理想宽度计算缩放参数，所述缩放参数使页面缩放后宽度与理想宽度相等，所述理想宽度为移动端逻辑像素的宽度；

根据所述缩放参数对待显示页面进行缩放。

计算机可读介质包括永久性和非永久性、可移动和非可移动媒体可以由任何方法或技术来实现信息存储。信息可以是计算机可读指令、数据结构、程序的模块或其他数据。

计算机的存储介质的例子包括，但不限于相变内存(PRAM)、静态随机存取存储器(SRAM)、动态随机存取存储器(DRAM)、其他类型的随机存取存储器(RAM)、只读存储器(ROM)、电可擦除可编程只读存储器(EEPROM)、快闪记忆体或其他内存技术、只读光盘只读存储器(CD-ROM)、数字多功能光盘(DVD)或其他光学存储、磁盒式磁带，磁带磁盘存储或其他磁性存储设备或任何其他非传输介质，可用于存储可以被计算设备访问的信息。按照本文中的界定，计算机可读介质不包括暂存电脑可读媒体(transitory media)，如调制的数据信号和载波。

本申请中的各个实施例均采用递进的方式描述，各个实施例之间相同相似的部分互相参见即可，每个实施例重点说明的都是与其他实施例的不同之处。尤其，对于装置实施例而言，由于其基本相似于方法实施例，所以描述得比较简单，相关之处参见方法实施例的部分说明即可。以上所描述的装置实施例仅仅是示意性的，其中所述作为分离部件说明的模块可以是或者也可以不是物理上分开的，作为模块显示的部件可以是或者也可以不是物理单元，即可以位于一个地方，或者也可以分布到多个网络单元上。可以根据实际的需要选择其中的部分或者全部模块来实现本实施例方案的目的。本领域普通技术人员在不付出创造性劳动的情况下，即可以理解并实施。

以上所述仅为本申请的较佳实施例而已，并不用以限制本申请，凡在本申请的精神和原则之内，所做的任何修改、等同替换、改进等，均应包含在本申请保护的范围之内。

Claims (11)

1.一种页面适配方法，其特征在于，所述方法包括：

在浏览器支持修改默认显示方案中虚拟窗口viewport的宽度的情况下，修改浏览器默认显示方案中虚拟窗口viewport的宽度，使其等于待显示页面的宽度，所述默认显示方案中，浏览器将页面放在所述viewport中完全显示且面积最大化，并缩放viewport以使所述viewport在屏幕中完全显示；

在浏览器不支持修改默认显示方案中虚拟窗口viewport的宽度的情况下，取消浏览器的默认显示方案，根据页面宽度与理想宽度计算缩放参数，所述缩放参数使页面缩放后宽度与理想宽度相等，所述理想宽度为移动端逻辑像素的宽度，根据所述缩放参数对待显示页面进行缩放。

2.根据权利要求1所述的方法，其特征在于，所述页面适配方法，包括：

尝试修改浏览器默认显示方案中虚拟窗口viewport的宽度，使其等于待显示页面的宽度；

如果浏览器支持修改，适配完成；

如果浏览器不支持修改，取消浏览器的默认显示方案，根据页面宽度与理想宽度计算缩放参数，根据所述缩放参数对待显示页面进行缩放。

3.根据权利要求1所述的方法，其特征在于，所述页面适配方法，还包括：

获取浏览器信息，判断所述浏览器是否支持修改默认显示方案中虚拟窗口viewport的宽度。

4.根据权利要求1所述的方法，其特征在于，所述根据页面宽度与理想宽度计算缩放参数，包括：

获取页面宽度a和浏览器的理想宽度b，将a与b的比值确定为缩放参数。

5.根据权利要求1所述的方法，其特征在于，所述根据缩放参数对页面宽度进行缩放，包括：

将页面宽度乘以缩放参数，对页面宽度进行缩放。

6.一种页面适配装置，其特征在于，所述装置包括：

第一适配模块：用于在浏览器支持修改默认显示方案中虚拟窗口viewport的宽度的情况下，修改浏览器默认显示方案中虚拟窗口viewport的宽度，使其等于待显示页面的宽度，所述默认显示方案中，浏览器将页面放在所述viewport中完全显示且面积最大化，并缩放viewport以使所述viewport在屏幕中完全显示；

第二适配模块：用于在浏览器不支持修改默认显示方案中虚拟窗口viewport的宽度的情况下，取消浏览器的默认显示方案，根据页面宽度与理想宽度计算缩放参数，所述缩放参数使页面缩放后宽度与理想宽度相等，所述理想宽度为移动端逻辑像素的宽度，根据所述缩放参数对待显示页面进行缩放。

7.根据权利要求6所述的装置，其特征在于，所述页面适配装置，具体用于：

尝试修改浏览器默认显示方案中虚拟窗口viewport的宽度，使其等于待显示页面的宽度；

如果浏览器支持修改，适配完成；

如果浏览器不支持修改，取消浏览器的默认显示方案，根据页面宽度与理想宽度计算缩放参数，根据所述缩放参数对待显示页面进行缩放。

8.根据权利要求6所述的装置，其特征在于，所述页面适配装置，还包括：

判断模块：用于获取浏览器信息，判断所述浏览器是否支持修改默认显示方案中虚拟窗口viewport的宽度。

9.根据权利要求6所述的装置，其特征在于，所述第二适配模块，具体用于：

获取页面宽度a和浏览器的理想宽度b，将a与b的比值确定为缩放参数。

10.根据权利要求9所述的装置，其特征在于，所述第二适配模块，具体用于：

将页面宽度乘以缩放参数，对页面宽度进行缩放。

11.一种计算机可读存储介质，其上存储有计算机程序，该程序被处理器执行时实现前述的页面适配方法，其特征在于，所述方法包括：

在浏览器支持修改默认显示方案中虚拟窗口viewport的宽度的情况下，修改浏览器默认显示方案中虚拟窗口viewport的宽度，使其等于待显示页面的宽度，所述默认显示方案中，浏览器将页面放在所述viewport中完全显示且面积最大化，并缩放viewport以使所述viewport在屏幕中完全显示；

在浏览器不支持修改默认显示方案中虚拟窗口viewport的宽度的情况下，取消浏览器的默认显示方案，根据页面宽度与理想宽度计算缩放参数，所述缩放参数使页面缩放后宽度与理想宽度相等，所述理想宽度为移动端逻辑像素的宽度，根据所述缩放参数对待显示页面进行缩放。