PhoneGap, jQuery Mobile 및 Retina Display

Question

jQuery Mobile을 사용하여 PhoneGap 응용 프로그램을 작성 중입니다. 현재 iPhone 및 iPhone Retina 시뮬레이터에서만 테스트 중입니다.

망막 모드에서 응용 프로그램을 열면 응용 프로그램의 밀도는 정확하지만 페이지는 두 차원 모두에서 화면 크기의 절반에 불과합니다.

내 생각에 jQuery Mobile의 CSS는 너비와 높이를 확장하지 않지만이 점에 대해서는 아무 것도 찾을 수 없습니다.

내 HTML이 있습니다

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" /> 

을 그리고 나는이 자바 스크립트 실행 :

if ($.mobile.media("screen and (min-width: 320px)")) { 
    if ($.mobile.media("screen and (-webkit-min-device-pixel-ratio: 2)")) { 
     $('meta[name=viewport]').attr('content','width=device-width, user-scalable=no,initial-scale=.5, maximum-scale=.5, minimum-scale=.5'); 
    } 
} 

내가 무엇을 놓치고를?

Answer 1

나는 당신이 정확하다고 생각합니다.

JQM.css 파일을 확인하십시오.

고해상도/저해상도 아이콘에 대한 미디어 쿼리 만 포함됩니다. 그 밖의 모든 것들은 망막 및 비 망막 장치에서 "있는 그대로"이므로 JQM은 아이콘 크기 측면에서 망막만을 지원합니다.

initial-scale=.5, maximum-scale=.5, minimum-scale=.5을 지정하면 모든 것을 50 %로 고정합니다. 따라서 확장 불가능한 절반 페이지가 있습니다.

망막 ("하이 엔드") 장치를 많이 사용할수록 표준 브라우저 (특히 "로우 엔드", 예 : IE7)에서 더 많은 문제가 발생합니다. 예를 들어 IE7에서 JQM iconsprite 위치를 확인하십시오. 미디어 쿼리를 지원하기 위해 respond.js과 같은 스크립트를 포함하지 않으면 아이콘이 오프 상태가됩니다.

저는 현재 JQM이 브라우저 간 망막과 비 망막 솔루션을 제공 할만큼 충분한 망막 장치가 없다고 생각합니다.

좋은 정보가 있습니다. here. 나 또한 IE7까지 작동하는 CSS 전용 iOS tab-bar을 작성했습니다.

모든 브라우저에서 아이콘 및 그라디언트 배경이 잘 보이게하고 IE7 + 8에 맞게 CSS를 추가하는 데 필요한 CSS를 확인하십시오. 망막/비 망막 JQM.css 파일은 다운로드하기가 어렵지만 좋을 것입니다 :-)

Answer 2

경우에 따라 이미지를 대상으로하고 전체 뷰포트를 대상으로 삼아야합니다. 이미지는 일반 디스플레이보다 절반 크기 작아야합니다.