PhoneGap css媒体查询方面不工作 [英] PhoneGap css media queries aspect not working

问题描述

我已经开发了一个应用程序与iPhone作为设计目标（即640x960 => 2：3），我已经这样使用百分比的每个部门的布局，所以ui streches本身相对于设备大小。现在这工作正常与iPad，但我有9:16方面比率设备的问题。我已使用媒体查询的目的，但这不工作。

分区的默认代码是：

  .top_bar {
 height：9％; 
} 
  

现在使用Media Queries纵横比：

  @media屏幕和（min-device-aspect-ratio：9/16）{
 .top_bar {
 height：7.5％ 
} 
} 
  

但这不工作，

我已将视口元标记内容值添加为

  content =user-scalable = no，width = device-width，initial-scale = 1，minimum-scale = 1，maximum-scale = 1，target-densityDpi = device-dpi
  
 
 
 
后来我尝试多种分辨率来检测长宽比：
 code> @media 
 only screen and（min-device-width：320px）and（min-device-height：560px），
 only screen and（min-device-width：480px）和（min-device-height：850px），
 only screen和（min-device-width：640px）和（min-device-height：1130px），
 only screen and（min-device- width：720px）and（min-device-height：1270px），
 only screen and（min-device-width：768px）and（min-device-height：1360px），
 only screen and min-device-width：800px）and（min-device-height：1422px），
 only screen and（min-device-width：960px）and（min-device-height：1700px），
 only screen and（min-device-width：1080px）and（min-device-height：1910px）
 {
 
 .top_bar {
 height：7.5％ 
} 
} 
  
但是这也不行。
 
 
 
  UPDATE  -  FIXED  
 
 
 
实验一下，只是改变了 min-device- aspect-ratio：9/16 更改为 max-aspect-ratio：9/16  
，并且现在可以正常工作。
  @media screen and（max-aspect-ratio：9/16）{
 .top_bar {
 height：7.5％ 
} 
} 
  
 
 
解决方案
 put您的中继标记像这样
 < meta name =viewportcontent =width = device-width，initial-scale = 1>  
 
 
 
写下您的媒体查询
  @media only screen and ：768px）and（max-width：956px）{
 .top_bar {height：7.5％;} 
} 
  
 
I have developed an app with iPhone as design target (i.e. 640x960 => 2:3) and I have done so using percentages for each division in layout so the ui streches itself with respect to device size. Now this works fine with iPad but I am having problems with 9:16 aspect ration devices. I have used Media Queries for the purpose but that isn't working.

The default code for division is:
.top_bar {
    height: 9%;
}
Now using Media Queries aspect ratio:
@media screen and (min-device-aspect-ratio: 9/16) {
    .top_bar {
        height: 7.5%;
    }
}
But this is not working, not on browser and not on device.

I have added viewport metatag content value as
content="user-scalable=no, width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, target-densityDpi=device-dpi"
Later I tried multiple resolutions to detect aspect ratio as:
@media 
only screen and (min-device-width: 320px) and (min-device-height: 560px),
only screen and (min-device-width: 480px) and (min-device-height: 850px),
only screen and (min-device-width: 640px) and (min-device-height: 1130px),
only screen and (min-device-width: 720px) and (min-device-height: 1270px),
only screen and (min-device-width: 768px) and (min-device-height: 1360px),
only screen and (min-device-width: 800px) and (min-device-height: 1422px),
only screen and (min-device-width: 960px) and (min-device-height: 1700px),
only screen and (min-device-width: 1080px) and (min-device-height: 1910px)
{

.top_bar {
    height: 7.5%;
}
}
But this isn't working either.

UPDATE - FIXED

Experiment a little and just changed min-device-aspect-ratio: 9/16 to max-aspect-ratio: 9/16
and its working fine now.
@media screen and (max-aspect-ratio: 9/16) {
    .top_bar {
        height: 7.5%;
    }
}

解决方案
put Your meta tag like this 
<meta name="viewport" content="width=device-width, initial-scale=1">

And write Your Media queries
@media only screen and (min-width: 768px) and (max-width: 956px){
.top_bar { height: 7.5%;}
}


                        
这篇关于PhoneGap css媒体查询方面不工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！