響應式網站筆記

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适合開發功能較多的網站