网页制作 手机端与PC端兼容

网页制作——手机端与PC端兼容

手机端与PC端使用一套代码时，随屏幕分辨率的大小变化，会产生媒体查询并实现手机端与PC端的切换

（一套代码）

<meta http-equir=”Cache-control”content=”no-transform”/>

<meta http-equir=”Cache-control”content=”n-siteapp”/>

<meta name=”viewport” content=”maximum-scale=5.0,minimum-scale=1.0,user-scalable=no”>

用JavaScript代码判断使用端是什么

if( !IsPC){    //flag为false才进if，即为手机端时，才加上<link>的媒体查询的css样式

         varstr=”<link rel=’stylesheet’ href=’./css/medial.css’/>”;

         document.getElementsByTagName(“head”)[0].innerHTML+= str;

}

function IsPC(){

         varuserAgentInfo = navigator.userAgent;     // navigator.userAgent返回的是Netscape

         varAgents = [“Android”,”iPhone”,”SymbianOS”,”windows Phone”,”iPod”,”iPad”];

         varflag = true;

         for(varv=0;v<Agents.length;v++){

         if(userAgentInfo.indexOf(Agents[v]>0)){

         flag = false;     //为手机端，将flag改为false，并返回flag值

         break;

}

}

return flag;

}