PhoneGap Android媒体查询
作者:互联网
我一直在努力这一周.我已经阅读了大量的帖子/网站/提示和技巧,但我无法弄清楚这一点.
我需要为不同的屏幕尺寸和方向设置CSS规则.但认识到它不起作用.
我尝试过:
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 = “只有屏幕和(最大…”,媒体=“屏幕和(最大…”,媒体=“(最大…”),所有类型的信念,这些都不适用于所有的分辨率和方向.
这是一个例子:
<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)"/>
我该如何解决这个问题?
谢谢
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)"/>
这就像创建不重叠的不同分辨率组
标签:android,android-layout,media-queries,cordova 来源: https://codeday.me/bug/20190530/1183381.html