[Device] viewpot 해상도 관련

[Device] viewpot 해상도 관련

---

아이폰, 갤럭시2, 갤럭시 노트,, 해상도 가 다르다. 반응형 디자인이 주목 받고 있다. 이젠 모바일도 크로스 브라우징 이다. 하지만 화려함 보다는 해당 디바이스에 맞는 정보전달이 주목적 인것닽다.
확실히 모바일은 아직까지 예쁘고 디자인이 화려한것 보다는 무선이라는 제약이 있기에 속도제한 등이 뒤따른다

이방법은 디바이스 뷰 사이즈에 각종 모바일 디바이스 호환을 위한 여러 방법중 한가지 방법이며, 아래 체크된 사이즈는 디바이스 브라우저 실제 랜더링 사이즈 이다.

---

	갤럭시 노트 가로 x 세로 ( 400 * 615 )
	갤럭시S2 가로 x 세로 ( 320 * 508 )
	아이폰4 가로 x 세로 ( 320 * 460 )

// Edit to suit your needs.
var ADAPT_CONFIG = {
  // Where is your CSS?
  path: 'assets/css/',
// false = Only run once, when page first loads.
  // true = Change on window resize and page tilt.
  dynamic: true,
// Optional callback... myCallback(i, width)
  callback: myCallback,
// First range entry is the minimum.
  // Last range entry is the maximum.
  // Separate ranges by "to" keyword.
  range: [
    '0px    to 760px  = mobile.css',
    '760px  to 980px  = 720.css',
    '980px  to 1280px = 960.css',
    '1280px to 1600px = 1200.css',
    '1600px to 1920px = 1560.css',
    '1940px to 2540px = 1920.css',
    '2540px           = 2520.css'
  ]
};

반응형 작업은 미디어 쿼리로도 가능하지만 이것을 이용하면 넓이값을 이용해 css 를 적용하지만 adapt.js 파일에 width 값을 height 값으로 수정하여 높이값체크를 통한 반응형 css도 적용할수 있다.

---

참조 :  http://adapt.960.gs/