PC端
pc端因为做的比较少,这里就举几个常见的问题:
css样式的兼容性问题:
1、不同浏览器的margin,padding值不同,通常我们都是全局清除
*{margin:0;paddding:0}
2、不同浏览器对css3的支持度不同,解决方案就是加前缀
-webkit- -moz-
3、对于一些要兼容ie版本的,这里就不细举了,毕竟ie10以下的很少有人再去处理了,要兼容低版本ie和一些其他浏览器也可以用hack的方法,就是在样式前加上前缀,例如:
_ * +
js兼容性问题 如果使用原生其实还是比较多问题的
1、比如获取浏览器可以区宽高、滚动距离
2、鼠标、键盘事件等
3、原生获取样式
4、火狐的滚轮事件
var winW=document.body.clientWidth||document.docuemntElement.clientWidth;//网页可见区域宽
var winWW=document.body.scrollWidth||document.docuemntElement.scrollWidth;//整个网页的宽
var
scrollHeight=document.body.scrollTop||document.docuemntElement.scrollTop;//网页被卷去的高
//获取鼠标的位置 这个在做拖拽时常用
document.οnclick=function(ev){//兼容写法;
var e=ev||window.event;
var mouseX=e.clientX;//鼠标X轴的坐标
var mouseY=e.clientY;//鼠标Y轴的坐标
}
//获取css样式 这在最初我写原生js的时候会用这种方法 现在框架也就不考虑了
function getStyle(object,oCss) {
if (object.currentStyle) {
return object.currentStyle[oCss];//IE
}else{
return getComputedStyle(object,null)[oCss];//除了IE
}
}
//还有奇葩的火狐滚轮事件 也是听说过没有遇到过
//火狐中的滚轮事件
document.addEventListener("DOMMouseScroll",function(event){
alert(event.detail);//若前滚的话为 -3,后滚的话为 3
},false)
//非火狐中的滚轮事件
document.onmousewheel=function(event){
alert(event.detail);//前滚:120,后滚:-120
}
移动端
移动端的兼容性主要是出在android、ios中,他们因为内核的不一样,导致出现很多问题,下面看下我遇到的常见的问题
1、键盘弹出事件
这是一个很有意思的问题,当高度为100%时,android在键盘弹出的时候,我们可能会遇到以下问题:
1、遮住了我们原来的内容,看不到输入框
2、如果底部有按钮,按钮从底部弹上来,影响视觉效果
3、样式错乱
出现这个问题的原因就是android的键盘是算入总高度的,ios的键盘弹出不算入总高度,原来1000px的高度变成了700px,所以我们从这解决问题就很简单了。
解决样式错乱我们可以给元素设置固定高度,用px代替百分比,随之带来的是键盘被遮挡的问题,解决这东西我们可以用scrollIntoView,让内容滚动到可视区,或者设置元素向上滚动键盘的高度。
var oHeight = document.body.offsetHeight
window.onresize=function(){
var height = document.body.offsetHeight
window.scrollTo(0,height-oHeight)
}
解决底部按钮弹上来这个问题可以有多种解决方案,只要看不见就好了。
所以我们可以在键盘弹出的时候可以采用以下方法:
1、将按钮的定位改为absolute,bottom为负数
2、将按钮隐藏,键盘收起的时候将按钮显示
2、300ms延迟
这是存在于ios的一个问题。之前为了辨别双击放大事件,给了click一个延迟,常用的解决方案就是因一个fastClick.js
3、ios会将长串的数字识别为电话
加一个meta标签即可
<meta content="telephone=no" name="format-detection" />
4、ios label内的checkbox点击失效
我们可以给label添加一个点击事件,通过点击事件改变checkbox的值
5、进入页面输入框自动聚焦,ios页面会卡顿 android无法调出键盘
ios卡顿的问题加一个延迟即可,设置300ms之后再获取焦点
android因为我是调的库解决键盘不弹出的问题,这里原生我也不清楚怎么写。
6、ios中给input设置type=search,但是键盘右下角不是搜索的字样
这里把input放进form表单即可