浏览器的兼容性与PC端移动端页面的适配

PC端与移动端页面适配

PC考虑的是浏览器的兼容性，而移动端开发考虑的更多的是手机兼容性，因为目前不管是android手机还是ios手机，一般浏览器使用的都是webkit内核，所以说做移动端开发，更多考虑的应该是手机分辨率的适配，和不同操作系统的略微差异化。
针对跨终端适配主要包括两种方法：

• 第一种是通过响应式或页面终端判断去实现一套资源适配所有终端；
  主要采用jQuery+响应式布局+CSS预处理器（sass和less）；
  这种方法只需要维护一套页面，成本比较低，通过响应式布局来实现适配各种终端设备；因为需要加载适配各个终端的各个资源，部分交互效果需要在页面中作终端判断，影响页面响应速度。如果图片资源为一套的话，会出现页面在超高分辨率终端设备打开时图片失真的问题
• 第二种是通过终端判断分别调取不同的资源以适配所有终端。
  采用zepto+响应式+CSS+终端适配
  这种方法可以根据各种不同的终端做个性化设计，例如移动端的加速度感应以及各种手势实现的效果，PC端可以不受流量限制等。相应的会增加维护成本。

浏览器的兼容性问题及解决办法

• 不同浏览器的标签默认的padding与margin不同
  最常见也是最容易解决的问题，只需要在CSS里写入*{margin：0；padding：0}
• 块属性标签浮动且有横向margin的情况下，在ie6显示margin比设置的大
  在float的标签样式控制中加入 display:inline;将其转化为行内属性
• 超链接点击后hover样式失效
  使用正确的书写顺序a:link; a:visited; a:hover; a:active.
• IE6不支持PNG格式透明背景
  使用gif格式图片
• IE5-8不支持opacity
  解决办法：选择器{
  opacity: 0.4；filter: alpha(opacity=60)； -ms-filter: “progid:DXImageTransform.Microsoft.Alpha(Opacity=60)”；
  }

JavaScript兼容

• 滚动条：

document.documentElement.scrollTop||document.body.scrollTop

• 获取样式兼容

function getStyle(dom, styleName){

return dom.currentStyle?dom.currentStyle[styleName]

getComputedStyle(dom)[styleName];

}

• 网页可视区域兼容

window.innerHeight || document.documentElement.clientHeight

window.innerWidth || document.documentElement.clientWidth

• 事件对象兼容

evt = evt || window.event;

• 阻止事件冒泡兼容

event.stopPropagation?event.stopPropagation():event.cancelBubble=true;

• 阻止默认行为兼容

evt.preventDefault?evt.preventDefault():evt.returnValue=false;

• 事件监听兼容

if(document.all){
    dom.attactEvent(“onclick”, fn);
} else {
    dom.addEventListener(“click”, fn);
}

• 事件目标对象兼容

var t = event.target || event.srcElement;