CN113778436A - 一种基于h5的页面宽度适配的方法及装置 - Google Patents
一种基于h5的页面宽度适配的方法及装置 Download PDFInfo
- Publication number
- CN113778436A CN113778436A CN202110812336.8A CN202110812336A CN113778436A CN 113778436 A CN113778436 A CN 113778436A CN 202110812336 A CN202110812336 A CN 202110812336A CN 113778436 A CN113778436 A CN 113778436A
- Authority
- CN
- China
- Prior art keywords
- width
- value
- basic
- multiplying power
- page 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.)
- Pending
Links
- 230000006978 adaptation Effects 0.000 title claims abstract description 26
- 238000000034 method Methods 0.000 title claims abstract description 12
- 238000004422 calculation algorithm Methods 0.000 claims abstract description 5
- 238000004590 computer program Methods 0.000 claims description 3
- 230000009286 beneficial effect Effects 0.000 description 1
- 238000004364 calculation method Methods 0.000 description 1
- 238000010586 diagram Methods 0.000 description 1
- 230000000694 effects Effects 0.000 description 1
- 238000001228 spectrum Methods 0.000 description 1
Images
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
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Human Computer Interaction (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Controls And Circuits For Display Device (AREA)
Abstract
本发明提供的一种基于H5的页面宽度适配的方法及装置，设置基础屏幕宽度和基础字体大小；获取当前屏幕宽度值，并根据所述屏幕宽度值和基础屏幕宽度计算得到倍率；根据所述倍率和基础字体大小，计算得到父容器基准值，并对父容器赋值自动进行页面宽度适配，利用rem算法的JS文件实现页面宽度的自动适配，快速准确地实现了不同尺寸屏幕适配。
Description
技术领域
本发明涉及计算机技术领域，特别涉及一种基于H5的页面宽度适配的方法及装置。
背景技术
现有的H5网页开发中经常容易出现页面适配的问题，在开发手机上调试好的页面放到其他手机时，容易产生奇异或是离谱的布局样式问题。此时往往需要针对不同屏幕尺寸进行rem单位基准值大小适配和父容器基准值大小适配，其中rem适配是改变一个元素在不同设备上占据的CSS像素个数。然而对一些没有测试过的或者非主流尺寸设备屏幕进行适配，往往不能很迅速、高质量地完成页面布局适配，因此，需要一种基于H5的页面宽度适配的方法及装置，能够快速准确地实现不同尺寸屏幕适配。
发明内容
(一)要解决的技术问题
为了解决现有技术的上述问题，本发明提供一种基于H5的页面宽度适配的方法及装置，能够快速准确地实现不同尺寸屏幕适配。
(二)技术方案
为了达到上述目的，本发明采用的一种技术方案为：
一种基于H5的页面宽度适配的方法，包括步骤：
S1、设置基础屏幕宽度和基础字体大小；
S2、获取当前屏幕宽度值，并根据所述屏幕宽度值和基础屏幕宽度计算得到倍率；
S3、根据所述倍率和基础字体大小，计算得到父容器基准值，并对父容器赋值自动进行页面宽度适配。
为了达到上述目的，本发明采用的另一种技术方案为：
一种基于H5的页面宽度适配的装置，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，所述处理器执行所述程序时实现以下步骤：
S1、设置基础屏幕宽度和基础字体大小；
S2、获取当前屏幕宽度值，并根据所述屏幕宽度值和基础屏幕宽度计算得到倍率；
S3、根据所述倍率和基础字体大小，计算得到父容器基准值，并对父容器赋值自动进行页面宽度适配。
(三)有益效果
本发明的有益效果在于：设置基础屏幕宽度和基础字体大小；获取当前屏幕宽度值，并根据所述屏幕宽度值和基础屏幕宽度计算得到倍率；根据所述倍率和基础字体大小，计算得到父容器基准值，并对父容器赋值自动进行页面宽度适配，利用rem算法的JS文件实现页面宽度的自动适配，快速准确地实现了不同尺寸屏幕适配。
附图说明
图1为本发明实施例的基于H5的页面宽度适配的方法流程图；
图2为本发明实施例的基于H5的页面宽度适配的装置的整体结构示意图。
【附图标记说明】
1：基于H5的页面宽度适配的装置；
2：存储器；
3：处理器。
具体实施方式
为了更好的解释本发明，以便于理解，下面结合附图，通过具体实施方式，对本发明作详细描述。
实施例一
请参照图1，一种基于H5的页面宽度适配的方法，包括步骤：
S1、设置基础屏幕宽度和基础字体大小；
S2、获取当前屏幕宽度值，并根据所述屏幕宽度值和基础屏幕宽度计算得到倍率；
S3、根据所述倍率和基础字体大小，计算得到父容器基准值，并对父容器赋值自动进行页面宽度适配。
步骤S2具体为：
获取当前屏幕宽度值，并以所述当前屏幕宽度值除以基础屏幕宽度值计算得到倍率。
具体地，通过JS文件获取当前宽度值，并以所述当前屏幕宽度值除以基础屏幕宽度值计算得到倍率；
步骤S3具体为：
将所述倍率除以基础字体大小，计算得到父容器基准值，并对父容器进行赋值后，引入代用rem算法的JS文件实现页面宽度的自动适配。
具体地，步骤S3中JS文件与步骤S2中JS文件相同。
实施例二
请参照图2，一种基于H5的页面宽度适配的装置1，包括存储器2、处理器3及存储在存储器2上并可在处理器3上运行的计算机程序，所述处理器3执行所述程序时实现实施例一中的各个步骤。
以上所述仅为本发明的实施例，并非因此限制本发明的专利范围，凡是利用本发明说明书及附图内容所作的等同变换，或直接或间接运用在相关的技术领域，均同理包括在本发明的专利保护范围内。
Claims (6)
1.一种基于H5的页面宽度适配的方法，其特征在于，包括步骤：
S1、设置基础屏幕宽度和基础字体大小；
S2、获取当前屏幕宽度值，并根据所述屏幕宽度值和基础屏幕宽度计算得到倍率；
S3、根据所述倍率和基础字体大小，计算得到父容器基准值，并对父容器赋值自动进行页面宽度适配。
2.根据权利要求1所述的基于H5的页面宽度适配的方法，其特征在于，步骤S2具体为：
获取当前屏幕宽度值，并以所述当前屏幕宽度值除以基础屏幕宽度值计算得到倍率。
3.根据权利要求1所述的基于H5的页面宽度适配的方法，其特征在于，步骤S3具体为：
将所述倍率除以基础字体大小，计算得到父容器基准值，并对父容器进行赋值后，引入代用rem算法的JS文件实现页面宽度的自动适配。
4.一种基于H5的页面宽度适配的装置，包括存储器、处理器及存储在存储器上并可在处理器上运行的计算机程序，其特征在于，所述处理器执行所述程序时实现以下步骤：
S1、设置基础屏幕宽度和基础字体大小；
S2、获取当前屏幕宽度值，并根据所述屏幕宽度值和基础屏幕宽度计算得到倍率；
S3、根据所述倍率和基础字体大小，计算得到父容器基准值，并对父容器赋值自动进行页面宽度适配。
5.根据权利要求4所述的基于H5的页面宽度适配的装置，其特征在于，步骤S2具体为：
获取当前屏幕宽度值，并以所述当前屏幕宽度值除以基础屏幕宽度值计算得到倍率。
6.根据权利要求4所述的基于H5的页面宽度适配的装置，其特征在于，步骤S3具体为：
将所述倍率除以基础字体大小，计算得到父容器基准值，并对父容器进行赋值后，引入代用rem算法的JS文件实现页面宽度的自动适配。
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110812336.8A CN113778436A (zh) | 2021-07-19 | 2021-07-19 | 一种基于h5的页面宽度适配的方法及装置 |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110812336.8A CN113778436A (zh) | 2021-07-19 | 2021-07-19 | 一种基于h5的页面宽度适配的方法及装置 |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN113778436A true CN113778436A (zh) | 2021-12-10 |
Family
ID=78835954
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110812336.8A Pending CN113778436A (zh) | 2021-07-19 | 2021-07-19 | 一种基于h5的页面宽度适配的方法及装置 |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113778436A (zh) |
Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105224564A (zh) * | 2014-06-25 | 2016-01-06 | 广州市动景计算机科技有限公司 | 一种网页适应屏幕排版方法及装置 |
| CN105282321A (zh) * | 2015-08-28 | 2016-01-27 | 上海健保科技有限公司 | 一种应用软件用户界面与显示设备的适配方法 |
| CN110147230A (zh) * | 2019-04-18 | 2019-08-20 | 浙江数链科技有限公司 | 页面适配方法、装置、设备和存储介质 |
| CN111984351A (zh) * | 2020-08-07 | 2020-11-24 | 中移（杭州）信息技术有限公司 | 页面适配方法、电子设备、计算机可读存储介质 |
-
2021
- 2021-07-19 CN CN202110812336.8A patent/CN113778436A/zh active Pending
Patent Citations (4)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN105224564A (zh) * | 2014-06-25 | 2016-01-06 | 广州市动景计算机科技有限公司 | 一种网页适应屏幕排版方法及装置 |
| CN105282321A (zh) * | 2015-08-28 | 2016-01-27 | 上海健保科技有限公司 | 一种应用软件用户界面与显示设备的适配方法 |
| CN110147230A (zh) * | 2019-04-18 | 2019-08-20 | 浙江数链科技有限公司 | 页面适配方法、装置、设备和存储介质 |
| CN111984351A (zh) * | 2020-08-07 | 2020-11-24 | 中移（杭州）信息技术有限公司 | 页面适配方法、电子设备、计算机可读存储介质 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| CN111984351B (zh) | 页面适配方法、电子设备、计算机可读存储介质 | |
| CN103593196A (zh) | 页面布局自适应方法及装置 | |
| CN107943997B (zh) | 一种基于谷歌浏览器的远程网站取证方法、终端设备及存储介质 | |
| CN109254818B (zh) | 针对浏览器不同分辨率的像素级定位方法和装置 | |
| CN109522208B (zh) | 页面流畅度测试方法及装置、计算机装置及存储介质 | |
| JP2019513268A (ja) | 混合ビュー表示方法及びデバイス | |
| CN104978433A (zh) | 一种网页显示方法及装置 | |
| CN104854559A (zh) | 网页表单元素对齐的方法和装置 | |
| CA3168780A1 (en) | Method and apparatus for browsing table in document, and electronic device and storage medium | |
| CN111199001A (zh) | 一种用于浏览器的资源重载兼容性处理方法及系统 | |
| CN111443974A (zh) | Android设备屏幕适配方法、相关设备及可读存储介质 | |
| CN113486280A (zh) | 页面渲染显示方法、装置、设备、存储介质和程序产品 | |
| CN105373373B (zh) | 一种快速生成图标的方法和装置 | |
| CN106161656B (zh) | 一种界面跳转的方法及装置 | |
| CN113778436A (zh) | 一种基于h5的页面宽度适配的方法及装置 | |
| CN107678636A (zh) | 电子设备的页面展现方法和装置 | |
| CN113778405A (zh) | 一种跨平台app构建方法、装置、系统及介质 | |
| CN103488735A (zh) | 终端浏览器页面刷新显示的方法及终端 | |
| CN109521894A (zh) | 业务执行方法、装置及电子设备 | |
| CN106406842A (zh) | 一种网页上柱状图的显示方法和系统 | |
| CN106919375B (zh) | 一种移动终端设备上的屏幕自适应方法及系统 | |
| CN104793837A (zh) | 图形生成方法及装置 | |
| CN107529095A (zh) | 一种视频拼接方法及装置 | |
| CN106844656A (zh) | 一种页面适配方法及系统 | |
| CN112261227A (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 | ||
| RJ01 | Rejection of invention patent application after publication | ||
| RJ01 | Rejection of invention patent application after publication |
Application publication date: 20211210 |