响应式页面设计

需求：将没体页面改进成响应式页面，不仅是PC上在移动设备上也要显示完美，特别是iphone、ipad

1. 设备判断：

var ua = navigator.userAgent.toLowerCase();
var device="";
if(ua.indexOf("iphone")> -1){
device = "iphone";
}
else if(ua.indexOf("ipad")> -1){
device = "ipad";
}
document.write("<p style='color:#FFF;'>设备为:"+device+"</p>");

2. 设置viewport

<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no" />

viewport 是指在手机浏览器上的显示区域，通常大于手机宽度，当内容超出手机宽度时，会显示滚动条。其值等同于$(window).width();

initial-scale 是页面初始化时的缩放比列。

maximum-scale页面最大的缩放比例。

user-scalable 是否允许用户缩放

在现有没体的基础上改成响应式设计的瓶颈：

1.头部需要重新设计

2.web端的相应的css都要去掉（最小列数或min-width）