(工作)@media 查询 iPhone 6(phonegap)?

Posted

技术标签:

【中文标题】(工作)@media 查询 iPhone 6(phonegap)?【英文标题】:(Working) @media query for iPhone 6 (phonegap)? 【发布时间】:2014-09-19 12:36:01 【问题描述】:

我正在尝试通过扩展 iPhone 6 和 iPhone 6 Plus 的 CSS 文件来更新 Phonegap (3.4.0) 应用程序,但是,媒体查询似乎无法正常工作(目前仅在模拟器中进行测试, 8.0 / 550.1)。特别是,任何使用resolutiondevice-widthmax-device-width 等的测试似乎都失败了。我试图通过一一测试条件来弄清楚发生了什么。 iPhone 6 对device-aspect ratioresolution 的任何测试都失败了。对于device-widthdevice-height,我尝试了实际像素值(1334 像素、750 像素)和虚拟尺寸(667 像素、375 像素)。 device-height 似乎有效,device-width 无效(应用处于纵向模式):

@media screen 
and (-webkit-min-device-pixel-ratio: 2) /* this one works */
and (resolution: 326dpi) /* fails */
and (min-device-width: 375px) /* fails, passes up to 320px ?!? */
and (device-aspect-ratio: 16/9) /* fails, so does 9/16 ..? */
and (min-device-height: 375px) /* works, but height only */
and (max-device-height: 667px) /* works, but height only */

...
 

不确定这是 Webkit / phongap 还是 ios8 问题(或者我是否忽略了某些问题)。有没有人想出这个/有一个(工作的)iPhone 6 查询?谢谢

【问题讨论】:

【参考方案1】:

您的应用是否具有适用于 iPhone 6 分辨率的正确初始屏幕图像?如果不是,则设备会报告较小的屏幕尺寸(即最终只是将您的应用放大以适应大小)

【讨论】:

谢谢,我不知道启动图像和(报告的)屏幕分辨率之间的联系。创建一个新的资产目录后,它现在可以工作了:-)

以上是关于(工作)@media 查询 iPhone 6(phonegap)?的主要内容,如果未能解决你的问题,请参考以下文章

响应式设计 - Media Query无法在iPhone上运行?

iPhone 5 横向媒体查询不起作用

可以禁用@media 查询或强制解决吗?原因:允许 iphone 查看桌面站点?

媒体查询

使用 React Bootstrap 覆盖引导程序 4 时无法使 @media 查询工作

@media 查询在移动设备中不起作用。在 Chrome 中运行良好