date

1. New Date("2020-05-23 12:00:35").getTime(); New Date("2020/05/23 12:00:35").getTime(); In Chrome, the date display format is 2016/05/3008:00. In Safari, the date display format is 2016-05-3t08:00. When using JQuery, the code is as follows: $(" # timeDate '). Val (" the 2016-05-30 T08:30 "), an error code: $(" # timeDate '). Val (" 2016/05/30 08:30 ")Copy the code

iframe

1. Ali HD scheme is used in the REM layout project of mobile terminal. The third party pulls up our H5 page in the iframe framework, and the page effect displays the enlarged state. Set the rootValue field of postCSS-pxtorem plug-in to 37.5 in webPack configuration (set the value by proportion using 375 Iphone6 canvas)Copy the code
// Ali hd solution source code as follows:

'use strict';
/ * * *@param {Boolean} [normal = false] - Page compression is enabled by default to make the page hd; *@param {Number} [baseFontSize = 100] - baseFontSize, default 100px; *@param {Number} [FontScale = 1] - Some businesses want to enlarge font size by a certain percentage; * /

export default init = (normal, baseFontSize, fontscale) = > {
  const _baseFontSize = baseFontSize || 100;
  const _fontscale = fontscale || 1;

  const doc = win.document;
  const ua = navigator.userAgent;
  const matches = ua.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i);
  const UCversion = ua.match(/U3\/((\d+|\.) {5,})/i);
  const isUCHd = UCversion && parseInt(UCversion[1].split('. ').join(' '), 10) > =80;
  const isIos = navigator.appVersion.match(/(iphone|ipad|ipod)/gi);
  let dpr = win.devicePixelRatio || 1;
  if(! isIos && ! (matches && matches[1] > 534) && !isUCHd) {
    // if it is not iOS, Android4.3 or higher, or UC kernel, then hd will not be executed. DPR will be set to 1.
    dpr = 1;
  }
  const scale = normal ? 1 : 1 / dpr;

  let metaEl = doc.querySelector('meta[name="viewport"]');
  if(! metaEl) { metaEl = doc.createElement('meta');
    metaEl.setAttribute('name'.'viewport');
    doc.head.appendChild(metaEl);
  }
  metaEl.setAttribute('content'.`width=device-width,user-scalable=no,initial-scale=${scale},maximum-scale=${scale},minimum-scale=${scale}`);
  doc.documentElement.style.fontSize = normal ? '50px' : `${_baseFontSize / 2 * dpr * _fontscale}px`;
};
Copy the code

Overflow: The scroll and auto Settings are invalid and the list cannot scroll

1. Ali-react-table is used in the page to freeze N columns on the left and dynamically fill in the data. Android phones can normally slide to view the data, while IOS phones can normally slide left and right, but cannot scroll up and down.Copy the code
<div ref={cusTableRef} style={{height: `${height}px`.overflow: 'auto'.width: 500.height: 300}} ><BaseTable dataSource={dataSource} columns={columns} estimatedRowHeight={50} />
</div>
Copy the code
2. Add CSS to webkit-overflow-scrolling: touch for scrollingCopy the code
  • Great god post: (a) segmentfault.com/a/119000001…
  • Great god post (2) : segmentfault.com/a/119000001…