html - 创建正确的媒体查询断点以覆盖移动设备和平板电脑

Question

基本上，我正在构建一个需要 2 个媒体查询的网站，1 个将涵盖移动设备，另一个将涵盖平板电脑。这就是要求。

我遇到的问题是，对于移动设备，最大宽度必须为 640 像素才能覆盖三星 Galaxy S3，但对于平板电脑，Nexus 7 纵向最大宽度为 599，因此我冒着手机落入平板电脑查询的风险。

谁能告诉我如何解决这个问题？

Answer 1

您可以应用此设置。它运作良好（至少对我而言）：

/* Large desktop */
@media (min-width: 1200px) { ... }

/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }

/* Landscape phone to portrait tablet */
@media (max-width: 767px) { ... }

/* Landscape phones and down */
@media (max-width: 480px) { ... }

Answer 2

我有一个非常相似的问题。我已经尝试了所有可能的媒体查询。为了区分平板电脑和手机，您必须使用max-device-width物理尺寸的媒体查询，而不是像素宽度的媒体查询。

这是我用于横向定位平板电脑的 CSS 的摘录，请看一下max-device-width：

@media screen and (max-device-width: 1280px) and (orientation: portrait),
screen and (max-device-width: 23cm) and (orientation: landscape),
screen and (orientation: landscape) and (max-device-width: 1280px) and (max-device-height: 1000px) 

我在 iPad（非视网膜）、iPad 2（视网膜）和 ASUS Transformer 平板电脑上使用了这个查询。在工作中指定尺寸cm就好了，英寸in在某些平板电脑上不起作用（目前不记得哪些平板电脑）。

max-device-width媒体查询参考官方说明：http: //www.w3.org/TR/css3-mediaqueries/#device-width

Answer 3

请参阅手机和平板电脑：如果您在测试页面中运行它，您可以在实际设备上找到正确的尺寸。

https://jsfiddle.net/t2bybrdu/

html:

<div class="body-test">
      <div class="center green-btn">Browser size tester:</div>
      </br>
      </br>
      <div class="result"></div>
</div>

js：

$(".body-test .center").click(function(){
    var browser_size = $( window ).width();
    console.log( browser_size + 20);
    console.log( "viewport size: " + Number(20 + browser_size) );
    $(".body-test .result").text("Your viewport size is: " + Number(browser_size + 20) + "px");     
});

CSS：

.green-btn {
    display: block;
    background: green;
    color: white;
    padding: 10px 20px;
    font-size: 18px;
    font-weight: bold;
    border-radius: 4px;
    width: 180px;
}
.body-test {
    padding-top: 120px;

}
.body-test  .result {
    text-align: center;
    font-weight: bold;
    padding: 3em auto;
}

.body-test  .center {
    position: relative;
    left: calc(50% - 100px); 
    cursor: pointer;
}