ios10以下safari設(shè)置style無效的解決方法
項(xiàng)目中遇到的奇怪問題，已定位原因。Attempted to assign to readonly property報(bào)錯(cuò)
起因：項(xiàng)目中寫了個(gè)點(diǎn)擊事件，增加動(dòng)態(tài)效果，類似于轉(zhuǎn)一轉(zhuǎn)，rotate(360)。很簡單的一個(gè)特效。
設(shè)置元素的transition:transform 1s。 然后動(dòng)態(tài)改變?cè)氐膖ransfrom:rotate的角度。一切看起來沒問題。本地測(cè)試，真機(jī)測(cè)試都OK。但是提測(cè)后，在測(cè)試的IOS10下的safari，竟然沒有生效。
定位原因： 一開始以為是transform沒有加上前綴。但確認(rèn)后排除。于是真機(jī)連接代理測(cè)試，在點(diǎn)擊事件中alert彈窗，發(fā)現(xiàn)并沒有執(zhí)行。于是確認(rèn)有報(bào)錯(cuò)。try catch后彈出錯(cuò)誤。
Attempted to assign to readonly property
查閱資料得知，是safari內(nèi)核bug。網(wǎng)上有解決方案，不要使用嚴(yán)格模式，即刪除'use strict'。
（沒有驗(yàn)證，因?yàn)橛X得不可行，因小失大）
解決方案。 猜測(cè)是因?yàn)镾tyle不可以直接change,但應(yīng)該可以設(shè)置Style.transform。測(cè)試可行，但這樣設(shè)置多個(gè)屬性的時(shí)候，并不優(yōu)雅，可換成class。 不過因?yàn)閞otate角度涉及到計(jì)算，故而本人并沒有采用設(shè)置class的方案。
錯(cuò)誤: dom.style = `transform: rotate(${x}deg)`;
正確 dom.style.transfrom = 'rotate(${x}deg)';
PS：解決iOS10的Safari下Meta設(shè)置user-scalable=no無效的方法
蘋果為了提高Safari中網(wǎng)站的輔助功能，屏蔽了Meta下的user-scalable=no功能。所以在iOS10下面，就算加上user-scalable=no，Safari瀏覽器也能支持手動(dòng)縮放。
我們可以用js加監(jiān)聽事件來阻止手動(dòng)縮放。
代碼如下：
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)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
IOS實(shí)現(xiàn)自定義透明背景的tabbar
這篇文章介紹的是在IOS中怎樣把tabbar背景設(shè)置為透明，有需要的小伙伴們可以參考借鑒。2016-08-08
這篇文章主要介紹了iOS11適配工作及導(dǎo)航欄影藏返回文字的解決方法，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧。2017-10-10
iOS App開發(fā)中擴(kuò)展RCLabel組件進(jìn)行基于HTML的文本布局
RCLabel組件基于CoreText框架,可以將HTML標(biāo)記的文本內(nèi)容轉(zhuǎn)為富文本視圖,這里我們就來解讀如何在iOS App開發(fā)中擴(kuò)展RCLabel組件進(jìn)行基于HTML的文本布局:2016-07-07
這篇文章主要給大家介紹了關(guān)于iOS組件化開發(fā)的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
UIScrollView是一個(gè)非常重要的控件,其可以展示比設(shè)備屏幕更大區(qū)域的內(nèi)容,我們可以通過手指滑動(dòng)來查看內(nèi)容視圖的每一部分內(nèi)容,也可以通過手指捏合來對(duì)內(nèi)容視圖進(jìn)行縮放操作，我們每天開發(fā)中都不斷顯式或隱式地與UIScrollView打交道，下面給大家詳細(xì)介紹UIScrollView控件。2016-09-09
iOS UIAlertController中UITextField添加晃動(dòng)效果與邊框顏色詳解
這篇文章主要給大家介紹了關(guān)于iOS UIAlertController中UITextField添加晃動(dòng)效果與邊框顏色的相關(guān)資料，實(shí)現(xiàn)后的效果非常適合在開發(fā)中使用，文中給出了詳細(xì)的示例代碼，需要的朋友可以參考借鑒，下面隨著小編來一起看看吧。2017-10-10
iOS開發(fā)之UIWebView 是本文要介紹的內(nèi)容，UIWebView是iOS sdk中一個(gè)最常用的控件，是內(nèi)置的瀏覽器控件，我們可以用它來瀏覽網(wǎng)頁、打開文檔等等2016-02-02
這篇文章主要給大家介紹了關(guān)于h5 ios輸入框和鍵盤的兼容性優(yōu)化的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2018-11-11
ios App加載本地HTML網(wǎng)頁,點(diǎn)擊網(wǎng)頁鏈接跳轉(zhuǎn)到app頁面的方法
下面小編就為大家分享一篇ios App加載本地HTML網(wǎng)頁,點(diǎn)擊網(wǎng)頁鏈接跳轉(zhuǎn)到app頁面的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-01-01
這篇文章主要介紹了iOS的UI開發(fā)中Button的基本編寫方法講解,代碼基于傳統(tǒng)的Objective-C,需要的朋友可以參考下2015-11-11