移动端元素的缩放与旋转-技术圈

Array.reduce 空数组调用时必须指定初始值。为避免触发类型错误，每次使用此方法时明确指定初始值。

let arr = []; // or arr = new Array(5);arr.reduce(()=> {})// Uncaught TypeError: Reduce of empty array with no initial valu// 指定初始值0, arr.reduce(() => {}, 0);

Element.getBoundingClientRect()，获取相对视窗的位置和元素的大小。

获取的元素尺寸，为视窗内占用空间，而非实际dom空间。可以获得如transform缩放后的空间尺寸。

navigator.standalone，区分是否应用模式访问网页，比如从桌面图标访问；ios safari专属。

移动端应用link preconnect，相比dns-prefetch，兼容性更好；主要是safari的区别。

ios设备使用的系统版本比例统计：

https://developer.apple.com/support/app-store/

页面定义了手势交互时，一般需要禁止浏览器默认的双击与手势操作缩放。添加禁用的viewport meta后，某些浏览器没有效果，需要代码配合，参考：

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"><style>/* 禁止滚动 */html {overflow: hidden;}style><script>(function () {      //禁止双击与手势缩放      document.addEventListener('touchstart', function (event) {        if (event.touches.length > 1) {          //禁止双指放大          event.preventDefault();        }      })      var lastTouchEnd = 0;      document.addEventListener('touchend', function (event) {        var now = (new Date()).getTime();        if (now - lastTouchEnd <= 300) {          event.preventDefault();        }        lastTouchEnd = now;      }, false)
      document.addEventListener('gesturestart', function (event) {        event.preventDefault();      }); })();script>

元素缩放、旋转时获取缩放比例与旋转角度。在touchstart事件触发时，记录触点坐标，然后在touchmove事件时，获取位置变化，从而改变目标元素的尺寸、旋转角度。通过transform: rotate旋转时，记录下每次旋转的角度，再次旋转时，基于上次的角度进行叠加。

let getScaleRadio = function (ev) {      // dragDefaultWidth, dragDefaultHeight, 目标元素默认尺寸      // data.tpCache, ontouchstart时缓存的触点坐标      function getDistance(p1, p2) {        let x = p2.clientX - p1.clientX,          y = p2.clientY - p1.clientY;        return Math.sqrt((x * x) + (y * y));      };
      function getAngle(p1, p2) {        let x = p1.clientX - p2.clientX,          y = p1.clientY - p2.clientY;        return Math.atan2(y, x) * 180 / Math.PI;      };
      let ratio = 1,        width = dragDefaultWidth,        height = dragDefaultHeight;
      let nowTouches = ev.changedTouches;      if (nowTouches.length < 2) {        return;      }      ratio = getDistance(nowTouches[0], nowTouches[1]) / getDistance(data.tpCache[0], data.tpCache[1]);      rotateDeg = getAngle(nowTouches[0], nowTouches[1]) - getAngle(data.tpCache[0], data.tpCache[1]);      //比例在0.5与2之间      ratio = Math.min(Math.max(0.5, ratio), 2);
      width *= ratio;      height *= ratio;
      return {        width,        height,        rotateDeg      };};

看完，帮忙点个“在看”吧。另，公众号回复“抽奖”，领取新年好运吧