移动端开发

[foxlele2014]

移动端开发记录。

[foxlele2014]

1.px转rem

//高清方案，px转为rem
!function (e) { function t(a) { if (i[a]) return i[a].exports; var n = i[a] = { exports: {}, id: a, loaded: !1 }; return e[a].call(n.exports, n, n.exports, t), n.loaded = !0, n.exports } var i = {}; return t.m = e, t.c = i, t.p = "", t(0) }([function (e, t) { "use strict"; Object.defineProperty(t, "__esModule", { value: !0 }); var i = window; t["default"] = i.flex = function (e, t) { var a = e || 100, n = t || 1, r = i.document, o = navigator.userAgent, d = o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i), l = o.match(/U3\/((\d+|\.){5,})/i), c = l && parseInt(l[1].split(".").join(""), 10) >= 80, p = navigator.appVersion.match(/(iphone|ipad|ipod)/gi), s = i.devicePixelRatio || 1; p || d && d[1] > 534 || c || (s = 1); var u = 1 / s, m = r.querySelector('meta[name="viewport"]'); m || (m = r.createElement("meta"), m.setAttribute("name", "viewport"), r.head.appendChild(m)), m.setAttribute("content", "viewport-fit=cover,width=device-width,user-scalable=no,initial-scale=" + u + ",maximum-scale=" + u + ",minimum-scale=" + u), r.documentElement.style.fontSize = a / 2 * s * n + "px" }, e.exports = t["default"] }]); flex(100, 1);

[foxlele2014]

2.浏览器不支持react或es5转码

引入browser-polyfill.js
(es6的新api）

转义语法

[foxlele2014]

3.点击延迟解决方案

引入fastclick.js

解决移动端点击延迟

[foxlele2014]

4.数据收集的埋点操作。

其实就是在某些事件上绑定一些操作，用于收集数据，用来做数据分析。

[foxlele2014]

论使用antd-mobile，Flex默认是flex布局，而且还加上了overflow:hidden,(这个真的超级无敌坑），会导致有些样式问题

[foxlele2014]

https://www.cnblogs.com/lyingSmall/p/5235178.html

ios下页面卡顿问题，也是overflow引起的。

[foxlele2014]

页面跳转是个问题（history管理）
之后描述下。

[foxlele2014]

2019-8-1移动端兼容性问题

1、IOS Date构造函数支持不完善

资料显示：在 iOS 上使用短横杠分割日期时，JS 引擎会自动以 ISO 8601 日期时间表示方法去解析这个字符串，
但因为 ISO 8601 的标准格式为 YYYY-MM-DDTHH:mm:ss.sssZ（ECMAScript Language Specification ）

1.1 目前支持的格式 ：
yyyy/MM/dd
MM/dd/yyyy
MMMM dd, yyyy
MMM dd, yyyy
1.2 针对yyyy-mm-dd ，yyyy-mm，yyyy/mm等形式，需要进行转换，如replace替换，补全等
1.3 解决方案：
1.3.1 写对应的转换函数;
1.3.2 在日期和时间中间插入字符 T，再在其末尾追加 GMT 时区，
使其变成 ISO 8601 格式 YYYY-MM-DDTHH:mm:ssZ，在 ECMAScript Language Specification 中指出 T 是用于指示时间元素开始的标志位，Z 用于指示时区偏移量
（原文：“T” appears literally in the string, to indicate the beginning of the time element, “Z” is the time zone offset specified as “Z” (for UTC) or either “+” or “-” followed by a time expression HH:mm）。
1.3.3使用第三方库如date-fns;

2、Android下字体加粗失效（只支持bold 700）

解决方案：

font-weight: var(--basic-weight-value, 500);

页面初始化时检查操作系统设置基础值

const platform = Util.androidOrios();
document.documentElement.style.setProperty('--basic-weight-value', platform === 'Android' ? 700 : 500);

3、IOS 页面卡顿问题

解决方案：
1.1 设置css 样式 -webkit-overflow-scrolling: touch;
1.2 使用第三方库iScroll等

4、overflow:scroll 和flex导致无法触底加载的问题

解决方案：
1.1 设置css 样式 -webkit-overflow-scrolling: touch;
1.2 使用第三方库iScroll等

4、overflow:scroll 和flex导致无法触底加载的问题

5、IOS modal穿透问题

// 弹窗时禁止背景滚动
  static stopBodyScroll(isFixed) {
    const bodyEl = document.body;
    let top = 0;
    if (isFixed) {
      top = window.scrollY;

      bodyEl.style.position = 'fixed';
      bodyEl.style.top = `${-top}px`;
    } else {
      top = Math.abs(parseInt(bodyEl.style.top));
      bodyEl.style.position = '';
      bodyEl.style.top = '';
      window.scrollTo(0, top); // 回到原先的top
    }
  }