Question

我正在尝试分别定位设备，但最小和最大宽度相互交织。这是我的代码：

/* iPhone 4 (portrait and landscape) ----------- */
@media only screen and (min-width : 320px) and (max-width : 480px) {

  /* MOBILE MENU */
  #menuContainer .cart p, #menuContainer .menu p {
    font-size: 12px
  }
  /* Home Slider Text */
  #sliderContainer .slider p {
    font-size: 18px;
  }
  #Footer .top .left p:first-child {
    font-size: 17px;
  }
  #Footer .row p {
    font-size: 12px;
  }
}
/* Galaxy S3 (portrait and landscape) ----------- */
@media screen and (min-width : 360px) and (max-width : 640px) {
   /* MOBILE MENU */
  #menuContainer .cart p, #menuContainer .menu p {
    font-size: 20.4px;
  }
  /* Home Slider Text */
  #sliderContainer .slider p {
    font-size: 29px;
  }
  #Footer .top .left p:first-child {
    font-size: 32px;
  }
  #Footer .row p {
    font-size: 20.4px;
  }
}

因此，320px的iPhone看起来不错，但是在480px时，它显示了Galaxy媒体查询的字体大小。我希望每个特定的媒体查询都针对其各自的设备。这可能吗？如果有什么不清楚，请告诉我。

Answer 1

测试众多设备并查看具体查询的绝佳位置：
http://cssmediaqueries.com/target/

这是一个很好的媒体查询列表，也可以使用：
http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

本文讨论的流体布局可能对您有所帮助：
http://www.campaignmonitor.com/guides/mobile/targeting/

这篇文章讨论了一个类似的问题： Media queries - targeting specific devices together

至于按设备类型定位特定设备，我认为不可用/可能。通常通过屏幕尺寸来完成。

我认为最好的选择是制作流畅的布局，而不是硬像素尺寸。

Answer 2

更具体地编写媒体查询。

Iphone 4： @media only screen和（-webkit-min-device-pixel-ratio：1.5），只有屏幕和（min-device-pixel-ratio：1.5）

Galaxy S4：

@media screen和（device-width：320px）和（device-height：640px）和（-webkit-device-pixel-ratio：3）

S3的比率为2。 S2的比率为1.5，屏幕较小。

Answer 3

通过一些测试创建了我自己的查询，但效果很好并且目标几乎完美。希望它对某些人有用。

/* TARGETS DEVICES FROM GALAXY S3+ HORIZONTAL */
@media (max-width: 767px) {
  /* CSS HERE */
}

/* TARGETS DEVICES FROM IPHONE 5S & IPHONE 4 HORIZONTAL */
@media (max-width: 568px) { 
  /* CSS HERE */
}

/* TARGETS DEVICES FROM GALAXY S3 VERTICAL and IPHONE 4S / 5 VERTICAL */
@media (max-width: 360px) {
  /* CSS HERE */
}

针对特定设备尺寸而不缠绕

3 个答案: