针对Galaxy S3的CSS媒体查询

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

像之前提到的那样 在你的手机上使用这个媒体查询检测器,并考虑使用更好的流体设计 - 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 SI&II:320 x 533,处于纵向模式(CSS像素密度为1.5)

三星Galaxy S III:360 x 640,处于纵向模式