PhoneGap的+安卓+媒体查询 [英] PhoneGap + Android + media queries

问题描述

我一直在努力奋斗着这个一个星期了。我已阅读吨的职位/网/提示和放大器;招数，但我只是不明白这一点

I have been struggling with this for a week now. I have read tons of posts/webs/tips&tricks, but I just can't figure this out.

我需要设置CSS规则不同的屏幕大小和方向。但承认它不工作。

I need to set CSS rules for different screen sizes and orientations. But the recognition it's not working.

我已经tryed有： 最小宽度，最大宽度，最小高度，最大高度，最小的设备宽度，最大设备宽度，最小器件高度，最大，设备高度，方向：纵向，方向：横向，媒体= 只有屏幕（最大...，媒体=屏幕（最大...，媒体=（最大..），各类convinations的，没有这适用于所有的分辨率和方向。

I have tryed with: min-width, max-width, min-height, max-height, min-device-width, max-device-width, min-device-height, max-device-height, orientation: portrait, orientation: landscape, media="only screen and (max...", media="screen and (max...", media="(max.."), all kind of convinations, none of this works for all the resolutions and orientations.

这是与例如：

<link rel="stylesheet" href="css/iscroll.css" />
<link rel="stylesheet" href="css/iscroll_600.css"  type="text/css" media="only screen and (max-width: 600px) and (max-height: 1024px) and (orientation: portrait)"/>    
<link rel="stylesheet" href="css/iscroll_600.css"  type="text/css" media="only screen and (max-width: 1024px) and (max-height: 600px) and (orientation: landscape)"/> 
<link rel="stylesheet" href="css/iscroll_1280.css" type="text/css" media="only screen and (max-width: 800px) and (max-height: 1280px) and (orientation: portrait)"/>
<link rel="stylesheet" href="css/iscroll_1280.css" type="text/css" media="only screen and (max-width: 1280px) and (max-height: 800px) and (orientation: landscape)"/>

我该如何解决这个问题？ 谢谢

How can I address this problem? Thanks

dhcmega

推荐答案

看起来是这样工作的。

<link rel="stylesheet" href="css/style_default.css" />
<link rel="stylesheet" href="css/style320.css" media="(min-width: 241px) and (max-width: 320px) and (orientation: portrait)"/>
<link rel="stylesheet" href="css/style480.css" media="(min-width: 321px) and (max-width: 480px) and (orientation: portrait)"/>  
<link rel="stylesheet" href="css/style540.css" media="(min-width: 481px) and (max-width: 540px) and (orientation: portrait)"/>
<link rel="stylesheet" href="css/style600.css" media="(min-width: 541px) and (max-width: 600px) and (orientation: portrait)"/>  
<link rel="stylesheet" href="css/style1280.css" media="(min-width: 601px) and (max-width: 800px) and (orientation: portrait)"/>
<link rel="stylesheet" href="css/style1536.css" media="(min-width: 801px) and (max-width: 1152px) and (orientation: portrait)"/>
<link rel="stylesheet" href="css/style320.css" media="(min-width: 321px) and (max-width: 480px) and (orientation: landscape)"/>
<link rel="stylesheet" href="css/style480.css" media="(min-width: 481px) and (max-width: 800px) and (orientation: landscape)"/>  
<link rel="stylesheet" href="css/style540.css" media="(min-width: 801px) and (max-width: 960px) and (orientation: landscape)"/>    
<link rel="stylesheet" href="css/style600.css" media="(min-width: 961px) and (max-width: 1024px) and (orientation: landscape)"/> 
<link rel="stylesheet" href="css/style1280.css" media="(min-width: 1025px) and (max-width: 1280px) and (orientation: landscape)"/>    
<link rel="stylesheet" href="css/style1536.css" media="(min-width: 1281px) and (max-width: 1536px) and (orientation: landscape)"/>

这就像创建不同组的决议中根本不重叠

It is like creating different sets of resolutions that does NOT overlap at all

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