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;