PK Creative Spring Festival, I am participating in the “Spring Festival Creative Submission Contest”

1, the old version of Android mobile phone mobile terminal vertical middle problem

During the development, I found that a vertical center effect is good on ios, but on Android, it will be better on the whole. After searching the existing explanation, it will be caused by the following methods

  • Font size larger than 12px is fine
  • If the font size is less than 12px, android will be slightly higher overall. If the font size is less than 12px, Android will be slightly higher overall when the font size is less than 12px. Deliberately set font sizes to even numbers

< span style = “box-sizing: border-box; color: RGB (50, 50, 50); font-size: 13px! Important; word-wrap: inherit! Important; 2. Table layout

.container {
    display: table;
}
.tips {
    background-color: gray;
    font-size: 10px;
    display: table-cell;
    vertical-align: middle;
}
Copy the code

2. Bold Chinese font Settings on the mobile terminal of low-end Android phonesfont-weight:600;invalid

Setting the value is not valid, you need to set it to font weight: bold;

3. Iframe cannot scroll on ios

The main solution is to add a div around the iframe and set the -webkit-overflow-scrolling attribute.

.webview {
  width: 100vw;
  height: 100vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  .webview-iframe{
    height: 100%;
    width: 100%; }}Copy the code

4. Solve the problem that the video label cannot play in some ios WebViews

Refer to the SRC path on video using the source tag

  <video
          loop
          autoPlay
          preload="auto"
          playsInline
          poster={vImg}
          x5-video-player-type="h5-page"
          className="palace-video"
        >
          <source src={vUrl} type="video/mp4" />
        </video>
Copy the code

5. In mobile Terminal Android Chrome, add in the boxoverflow-y:autoThe back type gets bigger

When the page shrinks to a certain width, Google’s Browser on Android decides to resize the text and make it bigger. The reason is that Android Chrome only does font enhancement for elements with dynamic height, and font enhancement is not applied as long as you specify height or maximum height.

Solutions: 1.

body* {max-height:9999999999px;
}
Copy the code

2, set up

<meta name="viewport" content="width=device-width, initial-scale=1">
Copy the code

3,

body{
    -webkit-text-size-adjust: none;
    -moz-text-size-adjust: none;
    -ms-text-size-adjust: none;
}
Copy the code

6, use,gulp-webpConverting an image to WebP format will cause an error on some Liunx systems

The reason is that gulp-Webp depends on the cwebP library, and some liunx lacks the corresponding environment, so the dependency needs to be installed

sudo apt-get install libjpeg-dev libpng-dev libtiff-dev libgif-dev
Copy the code

7. Tried to use it in the projectviteThe boot speed is exceptionally fast, but the packing is really pothole

The packaged file will still have a bunch of ES6 syntax

Package backend JS:Even invite.config.tsConfigure thetarget,legacyIs invalid

import {defineConfig} from 'vite'
const {resolve} = require('path')
import legacy from '@vitejs/plugin-legacy'
import {viteMockServe} from 'vite-plugin-mock';


export default defineConfig({
  build: {
    target: ['es2015'],},plugins: [
    legacy({
      targets: ['ie >= 11'].additionalLegacyPolyfills: ['regenerator-runtime/runtime'].polyfills: ['es.promise.finally'.'es/map'.'es/set'].modernPolyfills: ['es.promise.finally']}),],})Copy the code

Finally, you have to use WebPack for packaging

Eight,<input/> 的inputIn the eventiosTyping Chinese on a native keyboard truncates indirect input

An input box that does not allow special characters, punctuation. Normally we listen for input events:

inputElement.addEventListener('input'.function(event) {
  let regex = /[^1-9a-zA-Z]/g;
  event.target.value = event.target.value.replace(regex, ' ');
  event.returnValue = false
});
Copy the code

On Android, this is fine, but on iOS, when you type in Chinese characters, you type in pinyin in the middle, and every time you type in a letter, it triggers an input event. You type 2 characters, but it actually triggers an input event a dozen times.

Solution: Compositionstart and ComPOSItionEnd CompositionStart events are triggered when the user begins indirect input, and at the end of indirect input, after the user selects a candidate word or clicks the “Selected” button, The comPositionEnd event is raised

var inputLock = false;
function do(inputElement) {
    var regex = /[^1-9a-zA-Z]/g;
    inputElement.value = inputElement.value.replace(regex, ' ');
}

inputElement.addEventListener('compositionstart'.function() {
  inputLock = true;
});


inputElement.addEventListener('compositionend'.function(event) {
  inputLock = false;
  do(event.target);
})


inputElement.addEventListener('input'.function(event) {
  if(! inputLock) {do(event.target);
    event.returnValue = false; }});Copy the code

Add an inputLock variable. If inputLock is set to true and does not trigger the logic in the input event until the user has completed direct input. If inputLock is set to false and the logic in the input event is triggered after the user has completed valid input.

9,Object.assignMethods are not fully browser-supported, especiallyandriodAnd wechat browser

The corresponding polyfill needs to be added

10. Sliding through

It is well known that when a dialog appears in a mobile browser, sliding on the screen triggers the contents below the popup to scroll along.

Solution:

When opening popover:

body.static {
  position: fixed;
  left: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
Copy the code
const scrollTop = document.scrollingElement.scrollTop;
document.body.classList.add('static');
document.body.style.top = ` -${scrollTop}px`;
Copy the code

Close popover:

const top = document.body.style.top;
document.body.classList.remove('static');
window.scrollTo(0, -parseInt(top));
document.body.style.top = ' ';
Copy the code

When opening the popover, set fixed to the body and record the current scroll position. The page will not scroll to the top. Close the popover, cancel the fixed position, and set the scroll bar to the current scroll position.

The last

2021 is over, and 2022 needs to tread more holes