当前位置：网站首页>Best practices for H5 page adaptation and wechat default font size

Best practices for H5 page adaptation and wechat default font size

2022-06-24 16:55:00 【CS Xiaoyao Sword Fairy】

H5 Best practices for page adaptation and wechat default font size

Write By CS Xiaoyao sword immortal

My home page : csxiaoyao.com

GitHub: github.com/csxiaoyaojianxian

Email: [email protected] QQ: 1724338257

1. css Units in

1.1 Based on pixels px

Most commonly used Absolute units , Calculated in precise pixels

1.2 Based on font size em / rem

  • em yes Relative units , The benchmark is the font size of the parent node , If you define font-size It is calculated by itself , It is not recommended to use
  • rem yes Relative units ,css3 New addition , According to the root node <html> As a benchmark , The settings root node provided below 62.5% Is not recommended , See the introduction in Section II for specific practice 
/*  The root node font size is set to  62.5%, namely  10px  It is convenient to calculate , Otherwise, the default font size of the browser will be used  16px  Benchmarking  */
/* 10 ÷ 16 × 100% = 62.5% */
/*  but  chrome  The minimum font size is  12px, So the fonts in the browser are  >= 1.2rem */
html { font-size: 62.5%; }
body { font-size: 1.4rem; } /* 1.4 × 10px = 14px */

1.3 Based on windows vw / vh / vmin / vmax

  • vw / vh namely viewpoint width / height, according to window Calculated as a percentage of width and height , and css Medium % The calculation is based on the width and height of the parent element
  • vmin / vmax Take the smaller of the window width and height / Calculate the percentage of the large value 
/*  Elements are always visible on the screen  */
.box {
    width: 100vmin;
    height: 100vmin;
}
/*  Elements are always on the whole screen  */
.box {
    width: 100vmax;
    height: 100vmax;
}

1.4 other % / vm / pc / pt / ch / ex ...

  • % percentage , Generally relative to the parent element , But for the position: absolute; Is relative to the parent element that is located , about position: fixed; The element of is relative to the visual window , And when the parent element does not specify a height , Setting the percentage of child elements has no effect , The height is directly the actual height of the child element
  • vm css3 New unit , The percentage of the one that is smaller relative to the width and height of the window , Poor compatibility

The following units are hardly used ：

  • in "
  • cm centimeter
  • mm mm
  • pt point, about 1/72 "
  • pc pica, about 6pt,1/6 "
  • ch ...
  • ex ...

...

2. Use rem Perform mobile terminal page adaptation

The simplest way to adapt the mobile terminal is through js Dynamic computing viewport Zoom value of , But too rough , Will cause the page picture text distortion blur . at present , Mobile terminal pages generally use rem or vw / vh Development will be more convenient , Let's say rem For example ：

For the sake of calculation , Appointment ：100px = 1rem, If the designer gives a sheet with a width of 750px The design of , Then you can set html The font size of is Device width / Design width * 100 individual px Pixels , With iPhone 6/7/8 Width 375px For example , be html Font size is 50px, That is, when the width is 375 px On the device ,1rem = 50px. For developers , One width is 50px Of div, You can easily divide by 100, Calculate the corresponding rem by 0.5rem, There is no need to adapt to different models ,0.5rem Conversion to iPhone 6/7/8 by 25px, And put 750px A wide device corresponds to 50px.

On the whole , Use rem The following four steps are required for adaptation ：

  • First use according to the size of the design px Finish page
  • Set up meta, Control viewport width , Press 1:1 Scale the page 
<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1">
  • Dynamic setting html Of font-size
var clientWidth = document.documentElement.clientWidth
document.documentElement.style.fontSize = 100 * clientWidth / 750 + 'px'

It is recommended to set listening , It can still display normally when the page size changes 

if (!document.addEventListener || !window.addEventListener) return
document.addEventListener('DOMContentLoaded', setScale, false)
window.addEventListener('orientationchange' in win ? 'orientationchange' : 'resize', setScale, false)
window.addEventListener('load', setScale, false)
  • The page elements will be px Value divided by 100 Convert to rem

3. Horizontal page rem adapter

The second part above is through dynamic setting html Of font-size The page has been scaled with the design draft , This is the page width 100% Full width of equipment , But a lot of times , We hope that some horizontal pages can reach the height of the device , The left and right parts are left blank , There are two ways to achieve ：

  • html Of font-size Set according to the page height , It is assumed that the height of horizontal plate design draft is 375px
var clientHeight = document.documentElement.clientHeight
document.documentElement.style.fontSize = 100 * clientHeight / 375 + 'px'
  • Limit the maximum width of a horizontal page , Suppose the maximum width is 670px when , The left and right white spaces are appropriate 
var maxWidth = 670
var calWidth = Math.min(document.documentElement.clientWidth, maxWidth)
document.documentElement.style.fontSize = 100 * calWidth / 750 + 'px'

4. Solve wechat and other third parties App Default font size of

WeChat, etc. App Default font size can be set in , If the user changes the default text size , It will cause trouble for the above adaptation , The solution is to get App The original zoom of , And then calculate on this basis font-size, The implementation is as follows ：

//  establish 1rem Invisible elements of width , Used to calculate the original zoom 
var scaleDom = (function () {
  var scaleDom = document.createElement('div')
  scaleDom.style.cssText = 'width:1rem;height:0;overflow:hidden;position:absolute;z-index:-2;visibility:hidden;'
  document.body.appendChild(scaleDom)
  return scaleDom
})()

//  Calculation used fontSize The zoom ( Such as WeChat ) The original zoom under 
function getOriginScale () {
  var htmlFontSize = Number(String(document.querySelector('html').style.fontSize || 16).replace('px', ''))
  var instanceWidth = Number(String(window.getComputedStyle ? window.getComputedStyle(scaleDom).width : scaleDom.offsetWidth).replace('px', ''))
  var scale = (htmlFontSize && instanceWidth) ? htmlFontSize / instanceWidth : 1
  return scale
}

//  Set up  html  Used for processing  rem  Of  font-size
function setScale () {
  var scale = getOriginScale()
  var clientWidth = document.documentElement.clientWidth
  if (!clientWidth) return
  window.uimakerScale = clientWidth / designWidth * scale
  document.documentElement.style.fontSize = 100 * window.uimakerScale + 'px'
}

5. Best practices

For the above adaptation scheme , This article provides a set of html The adaptation code used in the production environment of the self-service system is used as a best practice .

First of all html The code needs to configure the window parameters ：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
  ...
</head>
<body data-page-type="{{jsonData.pageType}}" data-design-width="{{jsonData.width}}" data-max-width="{{jsonData.maxWidth}}">
  ...
</body>
</html>

Execute the following self executing function in the initialization code , The adaptation can be completed .

;(function (doc, win) {
  //  The page data 
  var pageType = parseInt(doc.body.getAttribute('data-page-type')) || 0 //  Page orientation  0 vertical 1 cross 
  var designWidth = parseInt(doc.body.getAttribute('data-design-width')) || 750 //  Design width 
  var maxWidth = parseInt(doc.body.getAttribute('data-max-width')) || designWidth //  Maximum page fit width 

  //  establish 1rem Invisible elements of width , Used to calculate the original zoom 
  var scaleDom = (function () {
    var scaleDom = doc.createElement('div')
    scaleDom.style.cssText = 'width:1rem;height:0;overflow:hidden;position:absolute;z-index:-2;visibility:hidden;'
    doc.body.appendChild(scaleDom)
    return scaleDom
  })()

  //  Calculation used fontSize The zoom ( Such as WeChat ) The original zoom under 
  function getOriginScale () {
    var htmlFontSize = Number(String(doc.querySelector('html').style.fontSize || 16).replace('px', ''))
    var instanceWidth = Number(String(win.getComputedStyle ? win.getComputedStyle(scaleDom).width : scaleDom.offsetWidth).replace('px', ''))
    var scale = (htmlFontSize && instanceWidth) ? htmlFontSize / instanceWidth : 1
    return scale
  }

  //  Set up  html  Used for processing  rem  Of  font-size  and   Page zoom twice 
  function setScale () {
    var scale = getOriginScale()
    var clientWidth = doc.documentElement.clientWidth
    var clientHeight = doc.documentElement.clientHeight
    if (!clientWidth || !clientHeight) return
    var calWidth = maxWidth > 0 ? Math.min(clientWidth, maxWidth) : clientWidth
    win.uimakerScale = calWidth / designWidth * scale
    doc.documentElement.style.fontSize = 100 * win.uimakerScale + 'px'
  }

  setScale()
  setTimeout(() => { setScale() }, 300)

  if (!doc.addEventListener || !win.addEventListener) return
  doc.addEventListener('DOMContentLoaded', setScale, false)
  win.addEventListener('orientationchange' in win ? 'orientationchange' : 'resize', setScale, false)
  win.addEventListener('load', setScale, false)
})(document, window)

6. summary

The adaptation of mobile terminals is a commonplace , There are also many mature third-party libraries in the market , But more or less additional configuration is required , The scheme of this paper is summarized from the practice of a self-help Web page generation project , If there are better plans and suggestions, please contact me .

sign
原网站

版权声明
本文为[CS Xiaoyao Sword Fairy]所创，转载请带上原文链接，感谢
https://yzsam.com/2021/04/20210404235444180Z.html

边栏推荐

猜你喜欢

随机推荐