移动兼容问题

一、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