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

Posted 2023-02-25

技术标签:

【中文标题】创建正确的媒体查询断点以覆盖移动设备和平板电脑【英文标题】：Creating the correct media query breakpoints to cover mobile and tablet 【发布时间】：2012-12-12 13:18:14 【问题描述】：

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

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

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

【问题讨论】：

【参考方案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)  ...

【讨论】：

【参考方案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

【讨论】：

【参考方案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;

【讨论】：