需求:将没体页面改进成响应式页面,不仅是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)