phonegap에서 미디어 쿼리를 사용하는 방법

Question

phonegap을 사용하여 앱을 개발 중입니다. 이미 320x480 해상도 화면과 호환되는 내 앱을 만들었습니다. 이제 미디어 쿼리를 사용하여 480x800 화면과 호환되도록했습니다. 잘

<meta name="viewport" content="width=device-width, initial-scale=1"> 

<!-- style1 --> 
<link rel="stylesheet" media="only screen and (min-width: 200px) and (max-width: 320px) and (orientation: portrait)" href="style.css"> 
<!-- style2 --> 
<link rel="stylesheet" media="only screen and (min-width: 321px) and (max-width: 480px) and (orientation: portrait)" href="style2.css"> 
<!-- style3 --> 
<link rel="stylesheet" media="only screen and (min-width: 481px) and (max-width: 1024px) and (orientation: portrait)" href="medium-style.css"> 

을 다음과 같이 더 높은 해상도로 이제 문제는 내가 480 × 800 해상도의 화면에서 응용 프로그램을 다음 대신이 style1.I 또한 하나의 스타일 시트를 사용하여 뷰포트를 제거하려고 사용 style2를 사용하여 실행할 때. 미디어 쿼리와 관련된 전화 설명서도 찾을 수 없습니다. 도와주세요.

Answer 1

html 

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height"> 
<meta name="apple-mobile-web-app-capable" content="yes"> 
<meta name="apple-mobile-web-app-status-bar-style" content="black"> 

css 
/*240 - 320*/ 
@media (min-width: 320px) { 
/*320 - 480*/ 
@media (min-width : 480px) { 
/*480 - ...*/ 

.... 

//retina devices 
@media only screen and (-webkit-min-device-pixel-ratio: 2.0) 

min-width은 Mobile First 미디어 쿼리입니다.

Answer 2

미디어 쿼리에 시간을 소비하는 대신 (Android 버전에서 다른 해석으로 인해 충돌이 발생하고 다른 많은 실망감이있을 수 있음) https://github.com/biodiv/cordova-screengod 을 시도해 볼 수 있습니다. 하나의 장치 용으로 개발하고 소프트웨어가 현재 장치와 일치하도록 CSS를 확장하도록하십시오. 구현은 단지 하나의 라이너

screengod(['path/to/my.css'],function(){ 
    /* do your app stuff */ 
}); 

이고 또한 높은 dpi의 기기가 320x480 점점 같은 화면 문제를 해결. 또한 css (미디어 쿼리없이!)는 Android 기기 에서뿐만 아니라 모든 iOS 및 Windows 기기에서도 작동하므로 한 번만 작성하여 어디에서나 배포 할 수 있습니다.