ios10以下safari设置style无效的解决方法

概述ios10以下safari设置style无效的解决方法 项目中遇到的奇怪问题,已定位原因.Attempted to assign to readonly property报错 起因:项目中写了个点击事件,增加动态效果,类似于转一转,rotate(360).很简单的一个特效. 设置元素的transition:transform 1s. 然后动态改变元素的transfrom:rotate的角度.一切看起来没问题.本地测试,真机测试都OK.但是提测后,在测试的IOS10下的safari,竟然没有生效. 定位原因: 一开始以为是transform没有加上前缀

项目中遇到的奇怪问题，已定位原因。Attempted to assign to Readonly property报错

起因：项目中写了个点击事件，增加动态效果，类似于转一转，rotate(360)。很简单的一个特效。
设置元素的Transition:transform 1s。 然后动态改变元素的transfrom:rotate的角度。一切看起来没问题。本地测试，真机测试都OK。但是提测后，在测试的IOS10下的safari，竟然没有生效。

定位原因： 一开始以为是transform没有加上前缀。但确认后排除。于是真机连接代理测试，在点击事件中alertd窗，发现并没有执行。于是确认有报错。try catch后d出错误。

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)  }

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

总结

以上是内存溢出为你收集整理的ios10以下safari设置style无效的解决方法全部内容，希望文章能够帮你解决ios10以下safari设置style无效的解决方法所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。