項目中遇到的奇怪問題，已定位原因。Attempted to assign to readonly property報錯

起因：項目中寫了個點擊事件，增加動態效果，類似于轉一轉，rotate(360)。很簡單的一個特效。
設置元素的transition:transform 1s。 然后動態改變元素的transfrom:rotate的角度。一切看起來沒問題。本地測試，真機測試都OK。但是提測后，在測試的IOS10下的safari，竟然沒有生效。

定位原因： 一開始以為是transform沒有加上前綴。但確認后排除。于是真機連接代理測試，在點擊事件中alert彈窗，發現并沒有執行。于是確認有報錯。try catch后彈出錯誤。

Attempted to assign to readonly property

查閱資料得知，是safari內核bug。網上有解決方案，不要使用嚴格模式，即刪除'use strict'。
（沒有驗證，因為覺得不可行，因小失大）

解決方案。 猜測是因為Style不可以直接change,但應該可以設置Style.transform。測試可行，但這樣設置多個屬性的時候，并不優雅，可換成class。 不過因為rotate角度涉及到計算，故而本人并沒有采用設置class的方案。

錯誤:  dom.style = `transform: rotate(${x}deg)`;

正確   dom.style.transfrom = 'rotate(${x}deg)';

PS：解決iOS10的Safari下Meta設置user-scalable=no無效的方法

蘋果為了提高Safari中網站的輔助功能，屏蔽了Meta下的user-scalable=no功能。所以在iOS10下面，就算加上user-scalable=no，Safari瀏覽器也能支持手動縮放。

我們可以用js加監聽事件來阻止手動縮放。

代碼如下：

  window.onload=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)   }

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持VEVB武林網。