데스크톱과 모바일을 모두 지원하는 단일 JQuery 페이지에 대한 팁?

Question

현재 데스크톱과 모바일 브라우저를 모두 제공하고자하는 페이지를 호스팅하는 사이트가 있습니다. 데스크탑 디자인 및 구현은 이미 완료되었으며 JQuery를 사용합니다.

사용자가 JQuery Mobile에서 지원하는 모바일 브라우저를 방문 할 때 다른 레이아웃을 사용하려면이 페이지가 있어야합니다.

나는 이것을 수행하는 가장 좋은 방법을 찾으려고 노력하고 있지만 이에 대한 모범 사례 정보를 찾을 수없는 것처럼 보입니다. 이 글에서 찾을 수있는 기존의 모든 문서/가이드는 작성중인 jQuery 페이지가 모바일 브라우저를 독점적으로 지원하고 있으므로 데스크톱의 형식 지정을 다루지 않는다고 가정합니다. 명백한 것

옵션 : 중복 기존 콘텐츠를하지만,이 포맷입니다 모바일

같은 페이지에 대한하지만 addtional 마크 업 포맷의 컨텐츠를 기존의 상단에

1. 같은 페이지 그러나 다만 추가 마크 업 모바일 용. 데스크톱 브라우저 인 경우 모바일이 아닌 콘텐츠는 숨겨 지거나 렌더링되지 않습니다.
2. 의 일부 동적 탐지 대 비 모바일 이동 한 후 2 개의 다른 페이지 (모바일 대 데스크톱)

내가 # 2 아마 가장 쉬운 생각하지만 중복의 아이디어를 좋아하지 않는다 사이의 경로 페이지의 콘텐츠. # 1은 마술처럼 모바일 용 형식을 사용하는 기존 마크 업으로 기존 콘텐츠를 보완 할 수 있다고 생각하기에는 비현실적 인 것처럼 보입니다.

모범 사례에 대해 이야기 할 수있는 가이드에 대한 모든 팁과 조언을 보내 주시면 감사하겠습니다.

명확한 설명 : 등, 내가 레일, ASP.NET MVC를 사용하지 않는

Answer 1

CSS 미디어 쿼리 가정이 아주 좋습니다. (뷰어 에이전트의 크기에 따라 동적으로 업데이트됩니다!) 특정 콘텐츠를 숨기거나 표시 할 수 있으므로 기본적으로 옵션 # 1 및 # 2가 변형됩니다. 스타일과 jQuery가 포함 된 데스크톱의 큰 기능을 갖춘 레이아웃을 사용할 수 있습니다. 화면이 작 으면 (휴대 전화 나 브라우저의 크기를 조절하는 등) 더 자세한 내용을 숨기고 몇 가지 스타일을 어쩌면 다른 것들을 보여줄 수도 있습니다. 여기에서 미디어 쿼리에 대해 읽으십시오 : http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/Default.html EDIT : 미디어 쿼리를 사용하여 요소를 완전히 사용자 정의 할 수 있으므로 바탕 화면 크기에서 div에 점선 테두리, 둥근 모서리, 10px 패딩 등이있을 수 있습니다. 전화 번호부에는 1px 패딩, 견고한 경계선 등이 있습니다.

Answer 2

이 문제는 지난 몇 달 전의 문제 였지만 나는 내가 무엇인지 알고 싶습니다. 같은 유형의 문제에 대해 노력하고 있습니다.

문제점 : 휴대 기기, 태블릿 및 크고 작은 데스크톱 화면에서 허용되는 사이트가 필요합니다.

해결책 :

• CSS 미디어 쿼리는 사용자의 뷰포트 페이지 규모와 "응답"을 할 수있는 확실한 선택입니다. 지금은 거대한 추진력과 반응 형 디자인, 반응 형 이미지 등에 대한 흥미로운 논의가 있습니다. 먼저 모바일 용 (다른 푸시)을 디자인하고 화면이 커짐에 따라 레이아웃/가시 컨텐츠를 변경하기 위해 미디어 쿼리를 사용합니다.

• 큰 문제는 JavaScript로 발생합니다. 모바일 JS 프레임 워크를 사용하면 내 데스크톱 버전에도 포함됩니다. 이상적인 것은 아닙니다. 두 가지 모두에서 jQuery를 사용하면 모바일 버전에 여분의 대역폭을 많이 확보하게됩니다. 나는 Modernizr을 사용하여 Modernizr의 새로운 미디어 쿼리 테스트를 통해 화면 크기에 따라 스크립트를로드 할 수 있도록 결정했습니다. 이를 통해 모바일/태블릿/데스크톱의 품질을 저하시키지 않으면서도 한 페이지를 유지하면서 다양한 화면 크기로 제공 할 수있었습니다. 간단한 모더 나이저 미디어 쿼리 검사는 다음과 같습니다 :

  는

if (Modernizr.mq('only screen and (max-width: 480px)')) { 
    Modernizr.load('/mobile.js'); 
} else if (Modernizr.mq('only screen and (max-width: 768px)')) { 
    Modernizr.load('/tablet.js'); 
} else { 
    Modernizr.load('/desktop.js'); 
}