Question

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

我遇到的问题是移动最大宽度必须是640px才能覆盖三星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（视网膜）和华硕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;
}

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

3 个答案: