媒体查询在 Android 上的行为不符合预期

发布于 2024-11-08 06:31:18 字数 1166 浏览 0 评论 0原文

我有 4 个媒体查询。第一个、第三个和第四个有效，但第二个似乎没有激活。

为什么 480x720（第二个媒体查询）默认为第一个媒体查询？

@media screen and (max-width: 320px) and (orientation: portrait) { body{background:#F0F;} }
@media screen and (min-width: 321px) and (max-width: 480px) and (orientation: portrait) { body{background:#F00;} }
@media screen and (max-width: 480px) and (orientation: landscape) { body{background:#0F0;} }
@media screen and (min-width: 481px) and (max-width: 800px) and (orientation: landscape) { body{background:#FF0;} }

预期内容：

第一个媒体查询 CSS 输出第二媒体查询 CSS 输出第三次媒体查询 CSS 输出 4th Media Query CSS Output

实际发生的情况：

第二次媒体查询失败第一次媒体查询通过第 3 次媒体查询通过第 4 次媒体查询通过

为什么 480x720（第二次媒体查询）默认为第一个媒体查询？

原文

I have 4 media queries. The 1st, 3rd and 4th work, but the 2nd one doesn't seem to activate.

Why is the 480x720 (second media query) defaulting to the first media query?

@media screen and (max-width: 320px) and (orientation: portrait) { body{background:#F0F;} }
@media screen and (min-width: 321px) and (max-width: 480px) and (orientation: portrait) { body{background:#F00;} }
@media screen and (max-width: 480px) and (orientation: landscape) { body{background:#0F0;} }
@media screen and (min-width: 481px) and (max-width: 800px) and (orientation: landscape) { body{background:#FF0;} }

What is expected:

1st Media Query CSS Output
2nd Media Query CSS Output
3rd Media Query CSS Output
4th Media Query CSS Output

What is actually happening:

2nd Media Query fails
1st Media Query passes
3rd Media Query passes
4th media query passes

Why is the 480x720 (second media query) defaulting to the first media query?

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

巷雨优美回忆 2024-11-15 06:31:18

我是 android 和 CSS 的新手。

我解决了 android 没有给它们实际大小的问题，在我的 index.html 文件的标题中添加了一行：

<meta name="viewport" content="width=device-width" />

从那时起，我的 CSS 文件就达到了我的预期！

I am a newbie on android and CSS.

I resolved the android not giving they real size with one line in the header of my index.html file:

<meta name="viewport" content="width=device-width" />

From then on, my CSS files did what I expected!

回复收藏 0 原文

情深缘浅 2024-11-15 06:31:18

因此，经过大量研究后，我得出了这个结论，Android 手机声称它们是 480px x 720px（800px 或 854px） 实际上不是，它们使用更高的屏幕密度来使元素看起来更大，所以它们实际上以 320px by XXX 运行，但用户可以根据需要将分辨率更改为较低的规格。媒体查询不起作用的原因是尺寸与相关设备不相关。

如果您使用 SDK，我将屏幕密度更改为 160 以适应 480 像素宽。

我可以确认我已经在 SDK 和 2x 手机上对此进行了测试。

注意：这是我的个人经历，其他用户可能会有所不同

回复收藏 0 原文

你怎么这么可爱啊 2024-11-15 06:31:18

我认为您需要按照

@media (-webkit-min-device-pixel-ratio: 1.5),  
       (-o-min-device-pixel-ratio: 3/2),  
       (min--moz-device-pixel-ratio: 1.5),  
       (min-device-pixel-ratio: 1.5) {  
       /* high resolution styles */  
}

检查 David Calhoun 的优秀文章在媒体查询中进行设备分辨率检测移动最佳实践。

I think you need to do a device resolution detection in your media query along the lines of

@media (-webkit-min-device-pixel-ratio: 1.5),  
       (-o-min-device-pixel-ratio: 3/2),  
       (min--moz-device-pixel-ratio: 1.5),  
       (min-device-pixel-ratio: 1.5) {  
       /* high resolution styles */  
}

Check David Calhoun's excellent article on mobile best practices.

回复收藏 0 原文

傻比既视感 2024-11-15 06:31:18

我在开发 Android 平台的 Cordova 应用程序时遇到了同样的问题。感谢最后一个答案，我试图找出我的媒体查询和设备屏幕宽度之间的差异在哪里。

我首先尝试：

@media only screen and (max-device-width: 480px) { ... }

匹配HTC Desire HD等设备|三星 Galaxy S。但我还必须对三星 Galaxy Note 进行特定的修正，所以我使用了：

@media only screen and (min-device-width: 481px) { ... }

但这些分辨率，如之前所说，并没有像在网页视图中那样真正使用，像素密度的值发生了变化。

所以我想知道在 DHD 和 SGS 中识别了多少宽度像素，然后在 SGN 中：

window.innerWidth

对于 480px 宽度的手机，我实际上识别了 320px。对于 800px Galaxy Note，我只识别到了 500px。当我看到这一点时，我调整了我的媒体查询并且它起作用了。

I was having the same problems while working on a Cordova application for Android platform. Thanks to the last answer, I tried to find out where were the differences between my media query and the width of the devices screen.

I first tried :

@media only screen and (max-device-width: 480px) { ... }

To match devices like HTC Desire HD | Samsung Galaxy S. But I also had to do specific corrections for the Samsung Galaxy Note, so I used :

@media only screen and (min-device-width: 481px) { ... }

But those resolutions, as said before, are not really used like that in the web view, the pixel density has the values changed.

So I wanted to know how many pixels in width were recognized in both DHD and SGS, and then in SGN :

window.innerWidth

For the 480px width phones, I had actually 320px recognized. For the 800px Galaxy Note, I only had 500px recognized. When I saw that, I adjusted my media queries and it worked.

回复收藏 0 原文

对你的占有欲 2024-11-15 06:31:18

以下是我根据我的经验发现的一些事情，这可能是由于更高分辨率的检测所致。
我最喜欢的测试手机是纵向视图中的 320 像素（最大设备宽度） X 480 像素（最大设备宽度）。但根据我使用的移动浏览器，最大宽度可达 850px！ Opera mobile 使用 850px 作为默认最大宽度，即使它在最大设备宽度 320px 的设备上也是如此。更好的是；此设备上内置的 Andriod 浏览器的默认最大宽度为 550px。 Dolphin 默认为相同的最大宽度，550px。我通常不会在 FireFox 移动设备上进行测试，但由于它是像 Opera 这样基于 Gecko 的浏览器，因此如果它落入 850px 范围，我不会感到惊讶。有谁知道或者测试过吗？

在寻址 320 X 480 设备时，我通常使用 3 条件媒体查询。

@media all and (max-width:850px) and (max-width:550px) and (max-device-width:320px) {..}

我也通常将此元标记放在主页上的标题中，在此处输入

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

代码以下内容似乎对我没有帮助，当时我做了更多研究并找出了上面的信息。
希望它对其他人有帮助。

here are a few things I have found in my experience and it may be due to the higher resolution detection.
My favorite test phone is 320px(max-device-width) X 480px(max-device-width) in portrait view. But depending on which mobile browser I use the max-width can be up to 850px!! Opera mobile uses 850px as its default max-width, even though its on a device of max-device-width 320px. Better yet; the built in Andriod browser on this device has a default max-width of 550px. Dolphin defaults to the same max-width, 550px. I don't usually test on FireFox mobile but since it is a gecko based browser like Opera, I wouldn't be surprised if it falls into the 850px range. Does anybody know or tested it?

i typically use a 3 condition media query when addressing 320 X 480 devices.

@media all and (max-width:850px) and (max-width:550px) and (max-device-width:320px) {..}

also i usually place this meta tag in my header on the main pageenter code here

<meta name="viewport" content="width=device-width, initial-scale=1.0" />

The following didnt seem to help me, that's when I did some more research and figured out the info above.
<meta name="viewport" content="width=device-width" /> Hope it helps someone else.

回复收藏 0 原文

Hello爱情风 2024-11-15 06:31:18

由于手机是一个不断增长的分辨率混乱黑洞，因此您需要告诉它们自己的身份。您还需要将缩放设置为 1 并取消用户缩放。当我将其放入我的代码中时，它对我有用。

将此代码段插入 HTML 头部标记下方的行中。

<!-- Check Device Width so Media Queries will work -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

Since cell phones are an ever-growing black hole of resolution confusion, you need to tell them to identify themselves. You also need to set the scaling to 1 and take away user scaling. When I put this in my code, it does the trick for me.

Insert this snippet in the head of your HTML on the line below the <meta character...> tag.

<!-- Check Device Width so Media Queries will work -->
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

回复收藏 0 原文