一种页面适配方法和装置制造方法及图纸

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

A page adaptation method and device

The present application provides a page adaptation method and device. Support in the browser to modify the default virtual window scheme viewport width, modify the default browser to display the virtual window scheme of viewport width, which is equal to the width of the page to be displayed in the browser does not support, modify the default virtual window scheme in port viewport width, cancel the browser's default display scheme. Calculate the zoom parameters according to page width and the ideal width according to the zoom parameters display page to zoom, does not need to be converted into a variety of control elements or percentage of REM value and write the CSS file, the development process is simple and fast.

【技术实现步骤摘要】
一种页面适配方法和装置
本申请涉及互联网领域，特别是涉及一种页面适配方法和装置。
技术介绍
在网页的设计和开发中，如何使页面快速的适配各种设备一直是开发人员研究的课题，这里说的适配，指的是当页面在诸如手机端这类较小的显示区域中进行显示时，需要在网页不出现水平滚动条的同时保证字体等元素的尺寸大小适合阅读。目前主要使用的技术有两种，一种是计算页面中的各种控件元素占上一层控件元素的百分比，给出最上层控件元素作为参照物，在载入页面时，根据不同的屏幕调整参照物上层控件元素的大小，页面中相关控件元素都会根据参照物做出调整。另一种是给定单位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的宽度。不同的设备拥有不同的理想宽度，仍以手机为例，一个分辨率为本文档来自技高网...

【技术保护点】
一种页面适配方法，其特征在于，所述方法包括：在浏览器支持修改默认显示方案中虚拟窗口viewport的宽度的情况下，修改浏览器默认显示方案中虚拟窗口viewport的宽度，使其等于待显示页面的宽度，所述默认显示方案中，浏览器将页面放在所述viewport中完全显示且面积最大化，并缩放viewport以使所述viewport在屏幕中完全显示；在浏览器不支持修改默认显示方案中虚拟窗口viewport的宽度的情况下，取消浏览器的默认显示方案，根据页面宽度与理想宽度计算缩放参数，所述缩放参数使页面缩放后宽度与理想宽度相等，所述理想宽度为移动端逻辑像素的宽度，根据所述缩放参数对待显示页面进行缩放。

【技术特征摘要】
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在...

【专利技术属性】
技术研发人员：饶建兵，
申请(专利权)人：广州市百果园信息技术有限公司，
类型：发明
国别省市：广东,44