ipad公司

Question

任何人都知道如何使用媒体查询定位三星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"/>

但它没有用......

Answer 1

我已经设置了一个页面，通过提供媒体功能的值，向您展示任何设备对媒体查询的反应。只需访问包含您要测试的设备的页面：

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

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

Answer 2

目前，移动设备已经有了很大改进，屏幕分辨率相似，有时甚至比桌面屏幕分辨率更高。

例如三星的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  */

}

Answer 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) { 

}

Answer 4

之前提到过。在你的手机上使用这个Media Query detector并考虑使用更好的流体设计 - CSS黑客并不好 - 如果你有一个好的流体设计，你不应该在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{}
}

Answer 5

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

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

Answer 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媒体查询诊断工具测试。 请注意，两者均无需定位即可正常工作但不会在没有加载/刷新的情况下更改其适当性。

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

Answer 7

我认为这可以安全地应用于今天的大多数手机（HTC，iPhone，三星），同时避免常见的平板电脑宽度（iPad iPad 3/4 iOS 6的肖像 672px ）。 / p>

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

这款手机将是奇怪的鱼：

三星Nexus S Android 2.3.6 Stock浏览器有宽度：480px，高度： 800px （最大宽度800）

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

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

Answer 8

这是经过测试和运作的。

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

Answer 9

忘掉所有这些＆＃34; max-device-width＆＃34; ＆＃34; min-height＆＃34;等等，quackery！问题是你们不是为设备的尺寸而设计的。此外，根据三星的Galaxy S3的像素密度为2，这意味着物理屏幕将1个设备像素映射为2个CSS像素。如果这是真的那么720x1280分辨率只是一个逻辑分辨率而不是设备的真实物理分辨率！ Apple iphone 4的情况也是如此，它具有640x960px的指定分辨率，这实际上是逻辑分辨率而不是实际设备的真实分辨率。考虑到像素密度，iphone的真实物理分辨率是这个数字的一半，这意味着它的物理尺寸实际上是320x480，这是真的，因为我一直使用这个代码！

因此，如果S3的像素密度为2，那么它的实际原始分辨率实际上是360x640px，而不是像三星所说的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科学提供的逻辑分辨率吗？

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

样式 }

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

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

针对Galaxy S3的CSS媒体查询

ipad公司

其他平板电脑设备

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

9 个答案:

三星Galaxy S3

三星S3默认浏览器