html5调用安卓或者ios的拨号功能
html5提供了自动调用拨号的标签,只要在a标签的href中添加tel:就可以了。
如下:
<a href="tel:4008106999,1034">400-810-6999 转 1034</a>
拨打手机直接如下
<a href="tel:15677776767">点击拨打15677776767</a>
禁止复制、选中文本
Element {
-webkit-user-select: none;
-moz-user-select: none;
-khtml-user-select: none;
user-select: none;
}
-webkit-tap-highlight-color
它是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
当用户点击iOS的Safari浏览器中的链接或JavaScript的可点击的元素时,覆盖显示的高亮颜色。
该属性可以只设置透明度。如果未设置透明度,iOS Safari使用默认的透明度。当透明度设为0,则会禁用此属性;当透明度设为1,元素在点击时不可见。
-webkit-appearance
它是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
改变按钮和其他控件的外观,使其类似于原生控件。
例如:去掉iphone及ipad下输入框默认阴影
Element{
-webkit-appearance: none;
}
-webkit-touch-callout
长时间按住页面出现闪退
它是一个 不规范的属性(unsupported WebKit property),它没有出现在 CSS 规范草案中。
当你触摸并按住触摸目标时候,禁止或显示系统默认菜单。在iOS上,当你触摸并按住触摸的目标,比如一个链接,Safari浏览器将显示链接有关的系统默认菜单。这个属性可以让你禁用系统默认菜单。
webkit-touch-callout:none;系统默认菜单被禁用
webkit-touch-callout:inherit;系统默认菜单不被禁用
适用于:链接元素比如新窗口打开,img元素比如保存图像等等
background-clip: padding-box;
解决某些android手机圆角失效
pointer-events
最近发现了一个叫pointer-events的css属性,是一个与javascript有关的属性,pointer-events直译为指针事件,当把值设置为none后,他有如下相关特性。
1)阻止用户的点击动作产生任何效果
2)阻止缺省鼠标指针的显示
3)阻止CSS里的hover和active状态的变化触发事件
4)阻止JavaScript点击动作触发的事件
一条CSS可以做许多事情是不是很神奇,我们在看一下兼容性情况如何。
IE 11+
Firefox 3.6+
Chrome 4.0+
Safari 6.0
Opera 15.0
iOS Safari 6.0
Android Browser 2.1+
Android Chrome 18.0+
<!--下方div-->
<div class="bottom">
<a href="http://www.baidu.com">百度</a>
</div>
<!--上方div-->
<div class="top"></div>
.bottom{
background: #f54656;
width: 100px;
height: 100px;
}
.top{
width: 100px;
height: 100px;
position: absolute;
top: 0;
left: 0;
}
此时的top位于a标签之上,无法点击到a标签。
给top添加属性 pointer-events: none,我们就可以穿过top层去点击下面的a标签了,为什么说这个属性非常的实用呢,在许多网站上过节的时候页面最上层会用canvas绘制的雨、雪花,避免这些悬浮物遮挡住页面从而影响鼠标点击,可以使用pointer-events=none属性,让这些上方的canvas不会遮挡鼠标事件,让鼠标事件可以穿透上方的canvas来点击页面。
移动端 HTML5 audio autoplay 失效问题
这个不是 BUG,由于自动播放网页中的音频或视频,会给用户带来一些困扰或者不必要的流量消耗,所以苹果系统和安卓系统通常都会禁止自动播放和使用 JS 的触发播放,必须由用户来触发才可以播放。
解决方法思路:先通过用户 touchstart 触碰,触发播放并暂停(音频开始加载,后面用 JS 再操作就没问题了)。
解决代码:
document.addEventListener(‘touchstart’,function() {
document.getElementsByTagName(‘audio’)[0].play();
document.getElementsByTagName(‘audio’)[0].pause();
});