CSS与iPad Mini在NON横向模式（垂直）

问题描述

我在使用媒体查询时遇到问题。我设置第一个在770px，所以它将重新调整大小，而不将侧边栏放在主要内容之下。

I'm having an issue with media query. I set the first on at 770px, so that it would re-size without putting the sidebar underneath the main content.

然后我将第二个媒体查询设置为740是在450，但我改变为740的iPad Mini），认为这将发送侧边栏下面的主要内容。

I then set the second media query at 740 (it was at 450, but I changed to 740 for the iPad Mini), thinking this would send the side-bar underneath the main content. (meaning that if held the iPad Mini vertically, it would look the same as it does on iPhone).

这在我的iPhone上工作，但在iPad mini上，它保持了垂直浏览时的770像素设定（非横向模式）。

This works on my iPhone, but on iPad mini it keeps the 770px settings when viewed vertically (non-landscape mode).

我做错了什么？我假设740将是足够高的最大宽度，因为770工程的景观模式。

What am I doing wrong? I assumed 740 would be high enough max-width, given that 770 works for landscape mode.

这是网站：

这里是代码
HTML：

and here's the codeHTML:

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;
    }
}

推荐答案

这个媒体查询。

/* 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 */
}

这篇关于CSS与iPad Mini在NON横向模式（垂直）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！