非横向模式下 iPad Mini 的 CSS 响应问题（垂直）

Question

我遇到了媒体查询问题。我将第一个设置为 770 像素，以便在不将侧边栏放在主要内容下方的情况下重新调整大小。

然后我将第二个媒体查询设置为 740（它是 450，但我将 iPad Mini 更改为 740），认为这会将侧边栏发送到主要内容下方。 （这意味着如果垂直握住 iPad Mini，它的外观与在 iPhone 上的外观相同）。

这适用于我的 iPhone，但在 iPad mini 上，它在垂直查看时保持 770 像素设置（非横向模式）。

我做错了什么？考虑到 770 适用于横向模式，我假设 740 的最大宽度足够高。

这里是网站：http://www.insidemarketblog.com

这是代码 HTML：

div class="container">
  <div class="columns">
    <div class="content">
      <div id="post-1" class="post_box grt top" itemtype="http://schema.org/Article" itemscope="">
       <div id="comments">
      <div class="prev_next"> </div>
    </div>
  <div class="sidebar" style="height: 560px;">
</div>

CSS：

@media all and (max-width: 740px) {
    .container, .landing .container {
        width: auto;
        /*max-width: 720px;*/
        /*max-width: $w_content;*/
        max-width: 100%;
    }
    .header {
        border-top: 1px solid $color1;
    }
    .landing .header {
        border-top: 0;
    }
    .columns > .content {
        /*float: left;*/
        float: none;
        /*width: 445px;*/
        width: 100%;
        border: 0;
    }
    .columns > .sidebar {
        /*float: right;*/
        float: none;
        /*width: 275px;*/
        width: 100%;
        border-top: 3px double $color1;
    }
    .menu a, .menu_control {
        padding: 1em $x_half;
        background-color: #C24F43;
    }
    .header, .columns > .sidebar, .post_box, .prev_next, .comments_intro, .comment, .comment_nav, #commentform, .comment_form_title, .footer {
        padding-right: $x_half;
        /*padding-left: $x_half;*/
    }
    .menu .sub-menu, .children .comment {
        padding-left: $x_half;
    }
    .comments_closed, .login_alert {
        margin-right: $x_half;
        margin-left: $x_half;
    }
    .comment_form_title {
        margin-left: -$x_half;
        margin-right: -$x_half;
    }
    .right, .alignright, img[align="right"], .left, .alignleft, img[align="left"] {
        float: none;
    }
    .grt .right, .grt .left, .post_box .alignright, .post_box .alignleft, .grt blockquote.right, .grt blockquote.left {
        margin-right: 0;
        margin-left: 0;
    }
    .post_author:after {
        content: '\a';
        height: 0;
        white-space: pre;
        display: block;
    }
    .grt blockquote.right, .grt blockquote.left, #commentform .input_text, .sidebar .search-form .input_text, .sidebar .thesis_email_form .input_text {
        width: 100%;
    }
    .post_box blockquote {
        margin-left: 0;
    }
    .comment_date {
        display: none;
    }
}

Answer 1

试试这个媒体查询。

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

/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}

/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}

/* iPads (portrait and landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px) {
/* Styles */
}

/* iPads (landscape) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : landscape) {
/* Styles */
}

/* iPads (portrait) ----------- */
@media only screen
and (min-width : 768px)
and (max-width : 1024px)
and (orientation : portrait) {
/* Styles */
}

/* Desktops and laptops ----------- */
@media only screen
and (min-width : 1224px) {
/* Styles */
}

/* Large screens ----------- */
@media only screen
and (min-width : 1824px) {
/* Styles */
}

/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
/* Styles */
}