目录
8、禁止ios 长按时不触发系统的菜单,禁止ios&android长按时下载图片
13、如何修改ios手机使用input输入的时候英文首字母的默认大写?
16、 audio元素和video元素在ios和andriod中无法自动播放
1、如何重置默认外观?
.css {
-webkit-appearance:none;
}
2、改变输入框placeholder的颜色值?
input::-webkit-input-placeholder {
color:#AAAAAA;
}
input:focus::-webkit-input-placeholder {
color:#EEEEEE;
}
3、placeholder的文字能换行么?
ios可以,android不可以
4、修改select 默认下拉箭头
::-ms-expand 适用于表单选择控件下拉箭头的修改,有多个属性值。
设置它隐藏 (display:none) ,并使用背景图片来修饰可得到我们想要的效果。
select::-ms-expand {
display: none;
}
5、禁用 radio 和 checkbox 默认样式
::-ms-check 适用于表单复选框或单选按钮默认图标的修改,同样有多个属性值。
设置它隐藏 (display:none) ,并使用背景图片来修饰可得到我们想要的效果。
input[type=radio]::-ms-check,
input[type=checkbox]::-ms-check {
display: none;
}
6、禁用PC端表单输入框默认清除按钮
当表单文本输入框输入内容后会显示文本清除按钮;
::-ms-clear 适用于该清除按钮的修改,同样设置使它隐藏 (display:none) 并使用背景图片来修饰可得到我们想要的效果。
input[type=text]::-ms-clear,
input[type=tel]::-ms-clear,
input[type=number]::-ms-clear {
display: none;
}
7、禁止ios和android用户选中文字
.css { -webkit-user-select: none }
8、禁止ios 长按时不触发系统的菜单,禁止ios&android长按时下载图片
.css { -webkit-touch-callout: none }
9、打电话
<a href="tel: 110">打电话给: 警察叔叔</a>
10、发短信
winphone系统无效
<a href="sms:10086">发短信给: 10086</a>
11、如何阻止windows Phone的默认触摸事件
winphone下默认触摸事件使用e.preventDefault是无效的。
目前解决方法是使用样式来禁用:
/* 禁止winphone默认触摸事件 */
html { -ms-touch-action: none; }
12、android 去掉语音输入按钮
input::-webkit-input-speech-button { display: none }
13、如何修改ios手机使用input输入的时候英文首字母的默认大写?
<input autocapitalize="off" autocorrect="off" />
14、手机拍照和上传图片
<input type="file">的accept 属性
01. 选择照片
<input type=file accept="image/*">
02. 选择视频
<input type=file accept="video/*">
使用总结:ios 有拍照、录像、选取本地图片功能,部分android只有选取本地图片功能,winphone不支持
15、消除transition闪屏
.css{
/*设置内嵌的元素在 3D 空间如何呈现:保留 3D*/
-webkit-transform-style: preserve-3d;
/*(设置进行转换的元素的背面在面对用户时是否可见:隐藏)*/
-webkit-backface-visibility: hidden;
}
开启硬件加速,解决页面闪白,保证动画流畅
.css {
-webkit-transform: translate3d(0, 0, 0);
-moz-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
}
16、 audio元素和video元素在ios和andriod中无法自动播放
应对方案:触屏即播
$('html').one('touchstart',function(){
audio.play()
})