2012-07-31 3 views
2

빠른 모바일 업그레이드가 필요한 이전 사이트가 있습니다. 나는 이것을 연구했고 새로운 프로젝트를 시작할 때 이것을 어떻게하는지에 대한 많은 좋은 해답을 발견했다. 나는 누군가가 이것을하는 어떤 경험이 있는지보기 위하여 흥미 롭다, 그래서 만약에 무슨 방법이이 종류 일을 위해 최상인지?모바일 용 오래된 XHTML 사이트를 개조 하시겠습니까?

Modernizr.load([ 
{ 
test : Modernizr.mq('screen and max-device-width: 480px'), 
yep : 'css/mobile.css', 
    nope : 'css/styles.css' 
]); 

답변

2

유효한 미디어 쿼리가 only screen and (max-device-width: 480px)입니다 : 내가 모더 나이저를 시도하고 어떤 미디어 쿼리 (Modernizer.mq) 여기

에 true를 돌려받을 수 없습니다 내가 노력 코드입니다.

은 지금은 기억하지 못하는 버그에 사용되지만 다른 브라우저에서는 아무 것도 깨지 않으므로 괜찮습니다.

대괄호 사이에 최대 너비 지정을 래핑해야합니다.

그러나 CSS 파일을로드하는 데 Javascript를 사용해서는 안됩니다. 포함 할 수 있습니다

<link rel="stylesheet" type="text/css" href="mobile.css" media="only screen and (max-device-width: 480px)" 
<link rel="stylesheet" type="text/css" href="screen.css" media="only screen and (min-device-width: 481px)" 

미디어 쿼리가 아닌 브라우저를 지원하려면 대체가 필요할 수 있습니다.

+1

내가 한 일보다 완전히 잘 작동했습니다. 누군가가 Modernizr을 사용하라고 말했지만, fallback을 지원하려는 html5/css3을 사용하는 사이트의 실제 내용을 알고 있습니다. – jhoffmcd

관련 문제