25

有人知道如何通过媒体查询来定位三星 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"/>

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

4

9 回答 9

49

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

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

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

于 2012-10-18T07:45:52.580 回答
14

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

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

但是在响应式设计中，我们会检查分辨率并需要根据分辨率进行调整，如果您尝试添加媒体查询，假设最小宽度为 1000px，然后在三星 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  */

}
于 2013-10-18T03:34:06.543 回答
9

我用它来只针对 s3 上的纵向视图：

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

}
于 2012-11-15T09:23:33.107 回答
6

如前所述。在你的手机上使用这个媒体查询检测器，并考虑使用更好的流体设计——CSS hacks 不好——如果你有一个好的流体设计，在 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{}
}
于 2012-10-23T10:37:03.383 回答
5

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

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

于 2013-03-21T13:22:30.637 回答
1

在我的带有 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;} 
}

这是pieroxy媒体查询诊断工具测试的屏幕截图。请注意，两者都可以在没有方向的情况下工作，但不要在没有加载/刷新的情况下更改适当性。

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

于 2014-01-07T03:42:48.043 回答
0

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

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

这部手机将是奇怪的鱼：

三星 Nexus S Android 2.3.6 股票浏览器，宽度：480 像素，高度：800像素（最大宽度 800）

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

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

于 2012-12-28T03:09:33.230 回答
0

这是经过测试和工作的。

@media only screen and
(device-width: 720px) and
(device-height: 1280px)  and
(-webkit-min-device-pixel-ratio: 2)
于 2014-03-21T05:48:54.497 回答
-2

忘记所有这些“最大设备宽度”“最小高度”等，骗局！问题是你们不是为设备的尺寸设计的。此外，根据三星的 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) {

Styles here } OR：你可以说一下三星、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) {

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

于 2013-04-13T17:50:08.340 回答