一、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" id="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 id="player" width="480" height="320" webkit-playsinline>
Obj-C中，添加配置：
webview.allowsInlineMediaPlayback = YES
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/287401.html
標籤：其他
上一篇：Android 發送短信