Phonegap：图像大小和键盘问题答案

【问题标题】：Phonegap: Image size and keypad issuePhonegap：图像大小和键盘问题
【发布时间】：2014-01-03 04:43:40
【问题描述】：

我一直在使用 Phonegap 为 Android 开发移动应用程序。我在屏幕 DPI 和键盘显示方面遇到困难。

如何将图像用于具有各种屏幕分辨率的各种 dpi？我希望在出现小键盘时滚动屏幕。

我使用 position:absolute 和 % 作为元素的宽度、高度和字体大小，以便我的应用根据各种屏幕尺寸和方向进行调整。

所以，现在我想要解决键盘问题和图像问题。

【问题讨论】：

您在这里提出了很多问题 - 请提供有关您的具体问题的更多信息。显示您的一些代码也会有所帮助。
如果它有助于解决您的问题，请接受答案。

标签： android css cordova android-scroll

【解决方案1】：

@media screen and (-webkit-device-pixel-ratio: 0.75) {
   #app-icon { background-image:url(pictures/ldpi/app-icon.png); }
   #brand-icon { background-image:url(pictures/ldpi/brand-icon.png); }
}

/* Medium density (160), mdpi */
@media screen and (-webkit-device-pixel-ratio: 1) {
   #app-icon { background-image:url(pictures/mpi/app-icon.png); }
   #brand-icon { background-image:url(pictures/mdpi/brand-icon.png); }
}

/* High density (240), hdpi */
@media screen and (-webkit-device-pixel-ratio: 1.5) {
   #app-icon { background-image:url(pictures/hdpi/app-icon.png); }
   #brand-icon { background-image:url(pictures/hdpi/brand-icon.png); }
}

/* Extra high density (320), xhdpi */
@media screen and (-webkit-device-pixel-ratio: 2) {
   #app-icon { background-image:url(pictures/xdpi/app-icon.png); }
   #brand-icon { background-image:url(pictures/xdpi/brand-icon.png); }
}

你可以通过定位

ORIENTATION - and (orientation: landscape)

Device WIDTH and (min-device-width : 480px) and (max-device-width : 854px)

Example:

@media screen and (-webkit-device-pixel-ratio: 1.5) and (min-device-width : 640px) and (max-device-width : 960px) and (orientation: landscape) {
   /* Your style here */
}

【讨论】：

【解决方案2】：

$(document).ready(function () {
  if(window.devicePixelRatio == 0.75) {
     $("#app-icon").attr('src', '/images/lpdi/app-icon.png');   
  }
  else if(window.devicePixelRatio == 1) {
           $("#app-icon").attr('src', '/images/mdi/app-icon.png');  
  }
  else if(window.devicePixelRatio == 1.5) {
     $("#app-icon").attr('src', '/images/hpdi/app-icon.png');   
  }
  else if(window.devicePixelRatio == 2) {
              $("#app-icon").attr('src', '/images/xpdi/app-icon.png');  
  }
}

【讨论】：

【解决方案3】：

您需要为您正在创建应用程序的设备实现条件代码，在 android 中有多个设备，因此您需要根据需要检查它是高清设备还是全高清设备来创建图像大小和位置进入可敬的文件夹，因此请检查您的设备像素比。

if(window.devicePixelRatio == 1.5) {

"HD device "
} 
 else if(window.devicePixelRatio == 2) {


}

所以你可以从上面的代码中检查设备像素比，你可以在 if 条件下根据设备应用图像。

【讨论】：