一、ios键盘首字母大写问题
<input type="text" autocapitalize='off'>
二、input输入框被键盘遮挡问题
https://mp.weixin.qq.com/s/AL0xW_g5K_TFp17T7IVtKA
三、禁止ios和android用户选中文字
-webkit-user-select:none
四、android下取消输入语音按钮
input::-webkit-input-speech-button {display: none}
五、input 的placeholder会出现文本位置偏上的情况
line-height:normal 或者 padding
六、line-height不居中
//1、使用padding
//2、使用伪元素
.text{
width: 16px;
height: 16px;
font-size: 10px;
text-align: center;
}
.text::after{
content: ' ';
display: inline-block;
width: 0;
height: 100%;
vertical-align: middle;
margin-top: 1px;
}
//3、使用scale
.text{
width: 32px;
height: 32px;
line-height: 32px;
font-size: 20px;
text-align: center;
transform: scale(0.5);
}
七、ios日期转换NAN问题
new Date('2020-11-12 00:00:00')在ios中会为NAN
解决 new Date('2020/11/12 00:00:00')
八、input标签类型为file上传文件时在标签中设置属性 accpet="image/*",打开本地文件夹的速度特别慢
<input type="file" name="pic" accpet="image/gif,image/png,image/jpeg,image/jpg,image/bmp" />
九、audio元素和video元素在ios和andriod中无法自动播放
原因: 因为各大浏览器都为了节省流量,做出了优化,在用户没有行为动作时(交互)不予许自动播放;
//音频,写法一
<audio src="music/bg.mp3" autoplay loop controls>你的浏览器还不支持哦</audio>
//音频,写法二
<audio controls="controls">
<source src="music/bg.ogg" type="audio/ogg"></source>
<source src="music/bg.mp3" type="audio/mpeg"></source>
优先播放音乐bg.ogg,不支持在播放bg.mp3
</audio>
//JS绑定自动播放(操作window时,播放音乐)
$(window).one('touchstart', function(){
music.play();
})
//微信下兼容处理
document.addEventListener("WeixinJSBridgeReady", function () {
music.play();
}, false);
//小结
//1.audio元素的autoplay属性在IOS及Android上无法使用,在PC端正常;
//2.audio元素没有设置controls时,在IOS及Android会占据空间大小,而在PC端Chrome是不会占据任何空间;
//3.注意不要遗漏微信的兼容处理需要引用微信JS;
⾃动播放:视频⾃动播放必须添加muted静⾳属性如果只在微信端使⽤有以下觉解办法
// 只适⽤于iPhone和android 注意⾃动播放的视频要⽆⾳轨或者⼿动muted
<!-- 必须加在微信api资源 -->
<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
<script>
let that = this
if (window.WeixinJSBridge) {
WeixinJSBridge.invoke('getNetworkType', {},
function (e) {
video.play()
}, false);
} else {
document.addEventListener("WeixinJSBridgeReady",
function () {
WeixinJSBridge.invoke('getNetworkType', {},
function (e) {
video.play()
});
}, false);
}
</script>
十、在iPhone safari 点击视频会弹出播放器进行全屏播放。
在iOS APP中使用网页视频,是可以禁止全屏播放的,方法如下:
前端将video
标签加入属性 webkit-playsinline
,如:
<video webkit-playsinline>
Obj-C中,添加配置:
webview.allowsInlineMediaPlayback = YES