響應式網站筆記

1.頁面檢測
device.js

2.js控制style
document.documentElement.clientWidth 視窗寬度相容ie6
onload 載入完成
onresize 調整尺寸
onscroll 滾動滾輪

3.視口
iphone中螢幕寬度是980
iphone解析度1136*640 三星note3解析度1920*1080 但是視口都是980
解析度和視口沒有關係

約束視口,content包含5個規則
<meta content=”width=device-width, //命令視口的寬度，變為裝置的寬(1024*768為標準,通常為320~380之間)
initial-scale=1.0,
minimum-scale=1.0,
maximum-scale=1.0,
user-scalable=no” //不允許使用者縮放
name=”viewport” id=”viewport”>

css3媒體查詢(ie9開始支援)
<link rel=”stylesheet” href=”style1.css” type=”text/css” media=”(min-width:640px) and (max-width:750px)”>

min-width max-width box-sizing:border-box
jqmobile適合開發功能較多的網站