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

Posted 2023-02-23

【中文标题】非横向模式下 iPad Mini 的 CSS 响应问题（垂直）

【英文标题】：CSS Responsive issue with iPad Mini in NON-landscape mode (Vertical)

【发布时间】：2014-04-22 06:21:48

【问题描述】：

我遇到了媒体查询问题。我将第一个设置为 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;
    

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