移動端元素的縮放與旋轉(zhuǎn)
Array.reduce 空數(shù)組調(diào)用時必須指定初始值。為避免觸發(fā)類型錯誤，每次使用此方法時明確指定初始值。
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()，獲取相對視窗的位置和元素的大小。
獲取的元素尺寸，為視窗內(nèi)占用空間，而非實際dom空間。可以獲得如transform縮放后的空間尺寸。
navigator.standalone，區(qū)分是否應(yīng)用模式訪問網(wǎng)頁，比如從桌面圖標(biāo)訪問；ios safari專屬。
移動端?應(yīng)用link preconnect，相比dns-prefetch，兼容性更好；主要是safari的區(qū)別。
ios設(shè)備使用的系統(tǒng)版本比例統(tǒng)計：
https://developer.apple.com/support/app-store/
頁面定義了手勢交互時，一般需要禁止瀏覽器默認(rèn)的雙擊與手勢操作縮放。添加禁用的viewport meta后，某些瀏覽器沒有效果，需要代碼配合，參考：
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover"><style>/*?禁止?jié)L動 */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>
元素縮放、旋轉(zhuǎn)時獲取縮放比例與旋轉(zhuǎn)角度。在touchstart事件觸發(fā)時，記錄觸點坐標(biāo)，然后在touchmove事件時，獲取位置變化，從而改變目標(biāo)元素的尺寸、旋轉(zhuǎn)角度。通過transform: rotate旋轉(zhuǎn)時，記錄下每次旋轉(zhuǎn)的角度，再次旋轉(zhuǎn)時，基于上次的角度進(jìn)行疊加。
let getScaleRadio = function (ev) {// dragDefaultWidth, dragDefaultHeight, 目標(biāo)元素默認(rèn)尺寸// data.tpCache, ontouchstart時緩存的觸點坐標(biāo)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};};
看完，幫忙點個“在看”吧。另，公眾號回復(fù)“抽獎”，領(lǐng)取新年好運吧
評論
圖片
表情