移动端兼容问题

iOS键盘中首字母大写

<input type="text" autocapitalize='off'>

禁止数字识别为电话号码

<meta name = "format-detection" content = "telephone=no">

禁止ios和android用户选中文字

-webkit-user-select:none

在ios和andriod中,audio元素和video元素在无法自动播放

应对方案：触屏即播

$('html').one('touchstart',function(){
	audio.play()
})

android下取消输入语音按钮

input::-webkit-input-speech-button {
	display: none;
}

html5标签在低版本浏览器如何兼容

使用：html5shiv.js
代码：body之后,布局之前加入

<!-- [if lt ie 9]>
	<script src="shiv.js"></script>
	<![endif]-->

h5底部输入框被键盘遮挡问题

var oHeight = $(document).height(); 
//浏览器当前的高度 
$(window).resize(function(){ 	
   if($(document).height() < oHeight){   
     $("#footer").css("position","static");  
   }else{   
   $("#footer").css("position","absolute");  
   } 
});

在移动端使用click事件有300ms延迟的问题

解决方式：

1. 禁止双击缩放===》meta:user-scalabel=no

2. fastclick.js

<script type="text/javascript" src='fastclick.js'></script>
   if ('addEventListener' in document) {
     document.addEventListener('DOMContentLoaded', function() {
		 FastClick.attach(document.body);
		 }, false);
	}

移动端touch事件有穿透（点透）的问题，怎么解决

解决方式：

1. 阻止默认行为
   e.preventDefault();

2. fastclick.js
   2.1 fastclick.js文件
   2.2 写入代码

if ('addEventListener' in document) {
	document.addEventListener('DOMContentLoaded', function() {
       FastClick.attach(document.body);
	}, false);
}

懒加载问题

如果懒加载插件在某个盒子中执行，但是这个盒子有滚动效果，那么就需要加入属性：

$("img.lazy").lazyload({         
  container: $("section")    //加入container他的值是滚动的父盒子
});

在移动端中，如果给元素设置一个1px的像素边框的话，那么在手机上看起来是会比一个像素粗的

解决方法：使用伪类元素模拟边框使用 transform 缩放

@media screen and(-webkit-min-device-pixel-ratio:2){
	.button:after{
		border-radius:calc(5px * 2);
		width:calc(100% * 2);
		height:calc(100% * 2);
		transform:scale(calc(1/2));	
	}
}
@media screen and(-webkit-min-device-pixel-ratio32){
	.button:after{
		border-radius:calc(5px * 3);
		width:calc(100% * 3);
		height:calc(100% * 3);
		transform:scale(calc(1/3));	
	}
}
@media screen and(-webkit-min-device-pixel-ratio:4){
	.button:after{
		border-radius:calc(5px * 4);
		width:calc(100% * 4);
		height:calc(100% * 4);
		transform:scale(calc(1/4));	
	}
}

消除 transition闪屏

-webkit-transform-style: preserve-3d;     /*设置内嵌的元素在 3D 空间如何呈现：保留 3D*/
-webkit-backface-visibility: hidden;      /*(设置进行转换的元素的背面在面对用户时是否可见：隐藏)*/

fixed 定位缺陷

ios下fixed元素容易定位出错，软键盘弹出时，影响fixed元素定位
android下fixed表现要比iOS更好，软键盘弹出时，不会影响fixed元素定位
ios4下不支持position:fixed
解决方案： 可用iScroll插件解决这个问题

input 的 placeholder 文本位置偏上

input 的placeholder会出现文本位置偏上的情况：PC端设置line-height等于height能够对齐，而移动端仍然是偏上，解决是设置line-height：normal;

安卓部分版本input的placeholder偏上

解决方法： line-height:normal;

安卓里line-height不居中

把字号内外边距等设置为需求大小的2倍，使用transform进行缩放。（不适用）

把字号内外边距等设置为需求大小的2倍，使用zoom进行缩放，可以完美解决。

把line-height设置为0，使用padding值把元素撑开，说是可以解决（不适用）

os日期转换NAN问题

具体就是，new Date(‘2020-11-12 00:00:00’)在ios中会为NAN

解决：用new Date(‘2020/11/12 00:00:00’)的日期格式，或者写个正则转换