Galaxy S3 的 CSS 媒体查询

Posted 2023-03-06

【中文标题】Galaxy S3 的 CSS 媒体查询

【英文标题】：CSS media queries for Galaxy S3

【发布时间】：2012-06-17 16:15:27

【问题描述】：

有人知道如何通过媒体查询来定位三星 Galaxy S3 吗？

目前我使用：

iPad

<link rel="stylesheet" media="all and (device-width: 768px)"                                                href="css/device-768.css"/>

其他平板设备

<link rel="stylesheet" media="all and (max-device-width: 767px) and (min-device-width: 641px)" href="css/device-max767.css"/>

电话（S3 没有使用这个 - 不知道为什么）

<link rel="stylesheet" media="all and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 1)"    href="css/phones.css"/>

我也测试过

<link rel="stylesheet" media="all and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 2)"    href="css/phones.css"/>

但它没有工作......

【问题讨论】：

那些不是在“测试”屏幕分辨率而不是设备吗？

S3的像素尺寸是多少？一旦您知道您可以使用简单的最大宽度/高度媒体查询来定位。这里更大的问题是您为什么不使用与设备无关的媒体查询断点。

我认为媒体查询不适合目标设备。这是一个错误的问题。

那是不可取的。并非所有手机的尺寸都相同。以屏幕尺寸而不是“设备是什么”为目标要好得多。你想错了。例如，什么是 Galaxy Note？

我在这方面的 OP - 这个问题没有得到回答，并且仍然有效。例如，我目前正在构建一个非常大的响应式网站，并且某些功能对于桌面和移动设备是不同的。 Galaxy S3 对我们来说是个问题，因为它具有高密度显示屏，但仍会报告其实际像素尺寸（不像 Apple 更明智的方法，即用实际像素数除以像素比率并报告为尺寸） .

【参考方案1】：

我设置了一个页面，通过提供媒体功能的值，向您展示任何设备将如何响应媒体查询。只需使用您要测试的设备访问页面：

http://pieroxy.net/blog/pages/css-media-queries/test-features.html

从那里，您可以根据不同设备报告的内容来决定要使用的媒体查询。请记住，针对特定设备通常是个坏主意。您应该以显示尺寸和密度为目标，以使您的网站适应手头的表面。

【讨论】：

不错的工作 Pieroxy。这对我帮助很大。

这非常有用 - 为了方便起见，这是一个缩短的链接is.gd/Rc2wwb

非常好。一个有趣的功能（不一定是由于您的测试）是横向和纵向数字不只是交换，而是在我的三星 Galaxy S4 上测试时发生变化。纵向宽度：360px，高度：567px。横向宽度：640px，高度：287px。我对这些东西了解不多，但对我来说似乎很奇怪。

@PeterGross 如果这对您来说仍然很奇怪，那是因为您有其他元素使用了您的一些可用空间。例如，像操作栏一样，纵向或横向它总是会占用您身高的空间，因此您无法简单地交换值。

【参考方案2】：

此时，移动设备已经有了很大的改进，它们的屏幕分辨率与桌面屏幕分辨率相似，有时甚至更好。

例如三星的 Galaxy S4 有 1080X1920 像素 - 全高清屏幕！

但在响应式设计中，我们会检查分辨率并需要根据分辨率进行调整，如果您尝试添加媒体查询，假设最小宽度为 1000 像素，然后在三星 Galaxy S4 上进行检查，您会发现什么都没有发生。

原因是手机高密度屏幕有两个像素。

真实分辨率 第一个分辨率是工厂真实分辨率，主要用于视频和图像。在三星 Galaxy S4 上，实际分辨率为 1080X1920。

CSS 分辨率 第二个解决方案是针对浏览器的。对于我们开发人员来说，这意味着我们需要采取不同的行动，而不是根据真实的屏幕分辨率。在三星 Galaxy S4 中，CSS 分辨率为 360X640。

三星 Galaxy S4 分辨率： 真实分辨率：1080X1920 CSS 分辨率：360X640

如何获取CSS分辨率？在***中，您拥有所有移动设备分辨率表（平板电脑和移动设备）。 http://en.wikipedia.org/wiki/List_of_displays_by_pixel_density

/*(ldpi) android*/
@media only screen and (-webkit-device-pixel-ratio:.75)

  /*CSS  */


/*(mdpi) Android*/
@media only screen and (min-device-width : 480px) and (max-device-width : 800px) 

  /*CSS  */


/*(hdpi) Android*/
@media only screen and (-webkit-device-pixel-ratio:1.5)

  /*CSS  */

【讨论】：

非常感谢您提供的这份简报。我会两次投票赞成你的答案。

【参考方案3】：

我用它来定位 s3 上的纵向视图：

@media only screen and (min-device-width : 719px) and (max-device-width : 721px) and (-webkit-min-device-pixel-ratio : 2) and (orientation : portrait)  

【讨论】：

非常具体到 S3，但它确实回答了这个问题。

【参考方案4】：

如前所述。在您的手机上使用此Media Query detector，并考虑使用更好的流畅设计 - CSS hack 并不好 - 如果您有良好的流畅设计，那么在 90% 的情况下您不应该真的需要它们。

三星 Galaxy S3

@media only screen and (max-device-width: 720px) and (orientation:portrait) 
  .your-css


@media only screen and (max-device-width: 1280px) and (orientation:landscape) 
  .your-css

【讨论】：

除了回答问题之外，这通常会在区分手机和平板设备的样式时产生问题？

是的，现在我的方法有点过时了。设备和平板电脑太多。最佳方法 IMO 是响应式设计 - 专门的响应式移动网站以及平板电脑和网络的专用独立商店 - 但这取决于场景。

这不是完全错过了使用响应式的意义吗？真的应该是“一个适用于所有设备的网站”。

我说的场景取决于。我们有一个半响应式桌面站点和平板电脑优化。我们还有一个专用的完全响应式移动网络应用程序。

【参考方案5】：

三星 Galaxy S I 和 II：320 x 533，纵向模式（CSS 像素密度为 1.5）

三星 Galaxy S III：360 x 640，纵向模式

【讨论】：

很好的答案，因为它提供了解决这个家伙问题的细节，而不是说服他他的技术不正确。

【参考方案6】：

在装有 Android 4.1.2 的三星 S3 上，虽然我尝试了所有媒体查询功能（最大高度、宽度、设备高度和宽度，甚至颜色：8），但除了 上面的第二个答案在此页面中：

三星S3默认浏览器

/* Samsung S3 default browser portrait*/
@media only screen and (device-width: 720px) and (device-height: 1280px) and (orientation: portrait) 
body  background:yellow; 


/* Samsung S3 default browser landscape */
@media only screen and (device-width: 1280px) and (device-height: 720px) and (orientation: landscape)  
body  background:#000; 

Here is a screenshot 用于pieroxy 媒体查询诊断工具测试。 请注意，两者都可以在没有方向的情况下工作，但不要在没有加载/刷新的情况下更改适当性。

希望这有助于避免与您可能使用的任何其他查询发生冲突

【参考方案7】：

我认为这可以安全地应用于当今的大多数手机（HTC、iPhone、三星），同时避免常见的平板电脑宽度（iPad iPad 3/4 ios 6 在纵向上有 672px）。

<link rel='stylesheet' href='/Styles/device_phone.css' media='screen and (max-width: 640px)'/>

这款手机会很奇怪：

Samsung Nexus S Android 2.3.6 Stock Browser 宽度：480px，高度：800px（最大宽度 800）

通常不建议针对特定设备，但如果您真的想针对奇怪的鱼，您可以，因为它具有其他独特的属性。我个人更喜欢使用 max-width，因为我可以直接在我的桌面和宽屏幕上进行测试，而且如果用户确实将浏览器的大小调整到小于 640 宽，我不会对看到移动视图的用户感到大惊小怪。

参考： http://pieroxy.net/blog/2012/10/18/media_features_of_the_most_common_devices.html

【参考方案8】：

这是经过测试和工作的。

@media only screen and
(device-width: 720px) and
(device-height: 1280px)  and
(-webkit-min-device-pixel-ratio: 2)

【参考方案9】：

忘记所有这些“最大设备宽度”“最小高度”等等，骗人的！问题是你们不是为设备的尺寸设计的。此外，根据三星的 Galaxy S3 的像素密度为 2，这意味着物理屏幕将 1 个设备像素映射到 2 个 CSS 像素。如果这是真的，那么 720x1280 分辨率只是一个逻辑分辨率，而不是设备的真正物理分辨率！ Apple iphone 4 也是这种情况，它的指定分辨率为 640x960px，这实际上是逻辑分辨率，而不是实际设备的真实分辨率。考虑到像素密度后，iphone的实际物理分辨率是这个数字的一​​半，这意味着它的物理尺寸实际上是320x480，这是真的，因为我一直使用这个代码！

因此，如果 S3 的像素密度也为 2，那么其真正的原始分辨率实际上是 360x640 像素，而不是三星所说的 720x960。同样，设备将 2 个 CSS 像素映射到 1 个设备像素！另外，到底为什么人们使用可变媒体查询，我告诉你！

@media screen and (device-width: 360px) and (device-height: 640px) and (orientation: portrait) 

样式放在这里

@media screen and (device-width: 640px) and (device-height: 360px) and (orientation: landscape) 

样式在这里 要么： 三星、DuH!、Rocket science 提供的逻辑解决方案你可以直接说出来吧？

@media screen and (width: 720px) and (height: 1280px) and (orientation: portrait) 

样式

@media screen and (width: 1280px) and (height: 720px) and (orientation: landscape) 

样式 很简单！这里的所有都是它的。人们想知道为什么他们不能让媒体查询工作，但他们使用所有这些变量值。尝试实际定位设备的分辨率。世界上没有理由使用“max-width”等变量值。

【讨论】：

-1 我认为有很多理由使用max-width（和其他）而不是针对特定设备的规格。最重要的原因是我不想在阳光下关心每一个设备；使用max-width 定位设备组允许我只维护 3 组不同的样式：台式机、平板电脑和手机。另一个重要原因是因为我不想每次发布新设备时都更新我的 CSS/网站，我可以确信大多数新设备将落入我已经建立的 max-width 的正确范围内。

S3 还为width 返回360px，而不仅仅是device-width。我相信两者之间的区别在于滚动条和地址栏（包含在 device-width 但不包含在 width 中），而不是真正的与逻辑的分辨率。