最近工作的一点小tips
最近工作比较忙,但也积累了一些小tips,比较杂,不成系统,也并不很深入,就开一篇笼统的先记录一下,以后再深入挖掘。
1.-webkit-tap-highlight-color
-webkit-tap-highlight-color 是一个 不规范的属性,它没有出现在 CSS 规范草案中。
当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时,覆盖显示的高亮颜色。
该属性可以只设置透明度。如果未设置透明度,iOS Safari使用默认的透明度。当透明度设为0,则会禁用此属性;当透明度设为1,元素在点击时不可见。
以上是网上找到比较具体的表述,那这个属性是解决什么问题的呢?
之前有做一个移动端页面,一些按钮在ios设备上点击时,会出现透明黑色框框,很困扰,不知道那是啥,遂搜索之得到了解决的方法
.btn{ -webkit-tap-highlight-color: rgba(255, 255, 255, 0); }
如描述所说的,把透明度设置为0时,会禁用该属性,也就是不会再出现透明黑色框框了。
2.-webkit-user-select
这个属性的作用是决定用户是否可以有选择复制元素或文本等权力。
也是一个移动端页面,需要所有文字元素都不能被选择复制,可以用到这个属性
body{ -webkit-user-select: none; }
ie是否有效未测,等有空了测一下吧。
3.微信端自动播放audio
一般来说html5页面要自动播放音频文件只需要设置标签属性autoplay就行了,像这样
<audio src="song.mp3" autoplay="autoplay" id="audio"></audio>
但是实际开发中发现,会有很多手机,它在微信端中不能自动播放,安卓ios都有,具体什么原因不太清楚,同为ios9的iphone,有一只9.3能放有一只9.1就不能放了,也是很尴尬
而这样的情况在安卓机中更为普遍。
网上也是寻觅了很久,发现需要调用微信的sdk,在wx.ready中调用play()的方法,才能保证自动播放。
function autoPlayAudio1() { wx.config({ // 配置信息, 即使不正确也能使用 wx.ready debug: false, appId: '', timestamp: 1, nonceStr: '', signature: '', jsApiList: [] }); wx.ready(function() { document.getElementById('audio').play(); }); }
说实话这也是挺邪门的,但实测可行。