ios10以下safari設置style無效的解決方法
項目中遇到的奇怪問題,已定位原因。Attempted to assign to readonly property報錯
起因:項目中寫了個點擊事件,增加動態(tài)效果,類似于轉(zhuǎn)一轉(zhuǎn),rotate(360)。很簡單的一個特效。
設置元素的transition:transform 1s。 然后動態(tài)改變元素的transfrom:rotate的角度。一切看起來沒問題。本地測試,真機測試都OK。但是提測后,在測試的IOS10下的safari,竟然沒有生效。
定位原因: 一開始以為是transform沒有加上前綴。但確認后排除。于是真機連接代理測試,在點擊事件中alert彈窗,發(fā)現(xiàn)并沒有執(zhí)行。于是確認有報錯。try catch后彈出錯誤。
Attempted to assign to readonly property
查閱資料得知,是safari內(nèi)核bug。網(wǎng)上有解決方案,不要使用嚴格模式,即刪除'use strict'。
(沒有驗證,因為覺得不可行,因小失大)
解決方案。 猜測是因為Style不可以直接change,但應該可以設置Style.transform。測試可行,但這樣設置多個屬性的時候,并不優(yōu)雅,可換成class。 不過因為rotate角度涉及到計算,故而本人并沒有采用設置class的方案。
錯誤: dom.style = `transform: rotate(${x}deg)`;
正確 dom.style.transfrom = 'rotate(${x}deg)';
PS:解決iOS10的Safari下Meta設置user-scalable=no無效的方法
蘋果為了提高Safari中網(wǎng)站的輔助功能,屏蔽了Meta下的user-scalable=no功能。所以在iOS10下面,就算加上user-scalable=no,Safari瀏覽器也能支持手動縮放。
我們可以用js加監(jiān)聽事件來阻止手動縮放。
代碼如下:
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)
}
以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
iOS App開發(fā)中擴展RCLabel組件進行基于HTML的文本布局
RCLabel組件基于CoreText框架,可以將HTML標記的文本內(nèi)容轉(zhuǎn)為富文本視圖,這里我們就來解讀如何在iOS App開發(fā)中擴展RCLabel組件進行基于HTML的文本布局:2016-07-07
iOS UIAlertController中UITextField添加晃動效果與邊框顏色詳解
這篇文章主要給大家介紹了關(guān)于iOS UIAlertController中UITextField添加晃動效果與邊框顏色的相關(guān)資料,實現(xiàn)后的效果非常適合在開發(fā)中使用,文中給出了詳細的示例代碼,需要的朋友可以參考借鑒,下面隨著小編來一起看看吧。2017-10-10
ios App加載本地HTML網(wǎng)頁,點擊網(wǎng)頁鏈接跳轉(zhuǎn)到app頁面的方法
下面小編就為大家分享一篇ios App加載本地HTML網(wǎng)頁,點擊網(wǎng)頁鏈接跳轉(zhuǎn)到app頁面的方法,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-01-01

