HTML5技术

最近工作的一点小tips - 天上云好白

字号+ 作者:H5之家 来源:H5之家 2016-07-10 17:00 我要评论( )

最近工作比较忙,但也积累了一些小tips,比较杂,不成系统,也并不很深入,就开一篇笼统的先记录一下,以后再深入挖掘。 1.-webkit-tap-highlight-color -webkit-tap-highlight-color 是一个 不规范的属性,它没有出现在 CSS 规范草案中。当用户点击iOS的Saf

最近工作比较忙,但也积累了一些小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就行了,像这样

但是实际开发中发现,会有很多手机,它在微信端中不能自动播放,安卓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(); }); }

说实话这也是挺邪门的,但实测可行。

 

 

1.本站遵循行业规范,任何转载的稿件都会明确标注作者和来源;2.本站的原创文章,请转载时务必注明文章作者和来源,不尊重原创的行为我们将追究责任;3.作者投稿可能会经我们编辑修改或补充。

相关文章
  • 【查缺补漏】工作中遇到的问题集锦01 - 鬼脸

    【查缺补漏】工作中遇到的问题集锦01 - 鬼脸

    2017-04-13 08:04

  • 两年波折路(考研、工作、考研) - Madcola

    两年波折路(考研、工作、考研) - Madcola

    2017-04-06 18:04

  • 2年前端学习历程,与找不到工作的悲愤与吐槽!(100%真实经历,看博主怎么一步步走向失业) - 蒋启钲

    2年前端学习历程,与找不到工作的悲愤与吐槽!(100%真实经历,看博

    2017-03-29 11:00

  • 程序员的工作、学习与绩效 - mindwind

    程序员的工作、学习与绩效 - mindwind

    2017-03-28 12:00

网友点评
$