为什么 safari 对我的媒体查询没有反应？

Question

我的页面中有一堆查询。 Chrome 响应所有这些，而 Safari 几乎不会呈现所有这些，我想知道为什么。我什至在 Safari DevTools 中都看不到它们。

我想可能是根字体大小或浏览器缩放有问题，所以我将字体大小设置为 100% 并为断点添加了特定值，但我没有解决。

这是来自我的 .scss 的查询

@mixin 响应（$断点）{

    @if $breakpoint == ipadLand {
        @media screen and (width: 1024px) and (height: 768px) {

            body {
                font-size: 75%;
            }

            .button_text{
                font-size: 0.9rem;
            }

            .contacts_section_row{
                top: 4.5rem;
            }

            .contact_header{
                margin-top: 2rem;
            }

            .skills_container_row3{
                margin-bottom: 0.5rem;
              }

            .contacts_section_col{
                width: $picture_width;
            }

            .contacts_section_row{
                width: calc(#{$picture_width} * 3);
            }

            .vk_picture{
                height: $picture_width;
                width: $picture_width;
                margin: auto;
              }
              
              .tg_picture{
                height: $picture_width;
                width: $picture_width;
                margin: auto;
              }
              
              .hh_picture{
                height: $picture_width;
                width: $picture_width;
                margin: auto;
              }
        
        }}

        @if $breakpoint == ipadpro12_port {

            @media screen and (width: 1024px) and (height: 1366px){

                $contact_section_height: 20rem;

                body {
                    font-size: 120%;
                }
                
                .name_text{
                    font-size: 2.5rem;
                    padding-top: 1rem;
                    padding-left: 5vw;
                }

                .role_text{
                    font-size: 1.7rem;
                    padding-top: 0.6rem;
                    padding-left: 1rem;
                }

                .main_div{
                    height: 985.3px;
                    //height: calc((100vh + (#{$head_div_height} * 2)));
                }

                .photo_box{
                    height: 40%;
                    width: 100vw;
                }

                .photo{
                    margin: 0 auto;
                    margin-top: 50px;
                    width: auto;
                    height: 85%;

                }

                .vk_picture{
                    height: $picture_width;
                    width: $picture_width;
                    margin: auto;
                  }
                  
                  .tg_picture{
                    height: $picture_width;
                    width: $picture_width;
                    margin: auto;
                  }
                  
                  .hh_picture{
                    height: $picture_width;
                    width: $picture_width;
                    margin: auto;
                  }

                .contacts_section_col{
                    width: calc((#{$picture_width} * 3) / 3);
                }

                .contacts_section_row{
                    margin-top: 1rem;
                    width: calc(#{$picture_width} * 3)
                }

                .contact_header{
                    text-align: center;
                    height: auto;
                    width: inherit;
                    margin: 0 auto;
                    margin-top: 1rem;
                    transform: translate(0); 
                }

                .skills_container_row{
                    font-size: 2.5rem;
                    margin: 0px;
                }

                .skillsandprojects-col-one{
                    font-size: 2rem;
                    height: auto;
                    text-align: left;
                }


                .skillsandprojects_container{
                    position: absolute;
                    top: 40%;
                    right: 0;
                    left: 0;
                    width: 100%;
                    height: 35%;
                    margin: 0;
                    background-color: white;
                    border: none;
                }

                .contacts_section{
                    position: relative;
                    bottom: calc(100vh - (#{$main_div_height} + #{$head_div_height} + #{$contact_section_height}));
                    width: 100vw;
                    height: $contact_section_height;
                    //background-color: blue; }
                    //background-color: $header_text_color; 
                  }

                .button_text{
                    font-size: 1.6rem;
                }

                .skillsandprojects_container2{
                    position: absolute;
                    top: 75%;
                    right: 0;
                    left: 0;
                    height: 35%;
                    width: 100%;
                }

                .skills_container_row3{
                    width: 100%;
                    height: 39px;
                    border: none;
                    margin-bottom: 1rem;
                  }

                }}

        @if $breakpoint == ipad_port {

            @media screen and (width: 768px) and (height: 1024px){

                body {
                    font-size: 70%;
                }
                
                .name_text{
                    font-size: 1.5rem;
                    padding-top: 2rem;
                    padding-left: 5vw;
                }

                .role_text{
                    font-size: 0.7rem;
                    padding-top: 0.6rem;
                    padding-left: 0.5rem;
                }

                .main_div{
                    height: calc((100vh - (#{$head_div_height} + #{$contact_section_height})));
                    //height: 985.3px;
                    //height: calc((100vh + (#{$head_div_height} * 2)));
                }

                .photo_box{
                    height: 40%;
                    width: 100vw;
                }

                .photo{
                    margin: 0 auto;
                    margin-top: 25px;
                    width: auto;
                    height: 75%;

                }

                .vk_picture{
                    height: $picture_width;
                    width: $picture_width;
                    margin: auto;
                  }
                  
                  .tg_picture{
                    height: $picture_width;
                    width: $picture_width;
                    margin: auto;
                  }
                  
                  .hh_picture{
                    height: $picture_width;
                    width: $picture_width;
                    margin: auto;
                  }

                .contacts_section_col{
                    width: calc((#{$picture_width} * 3) / 3);
                }

                .contacts_section_row{
                    width: calc(#{$picture_width} * 3)
                }

                .contact_header{
                    text-align: center;
                    height: auto;
                    width: inherit;
                    margin: 0 auto;
                    transform: translate(0); 
                }

                .skills_container_row{
                    font-size: 1.5rem;
                    margin: 0px;
                }

                .skillsandprojects-col-one{
                    font-size: 1.8rem;
                    height: auto;
                    text-align: left;
                }


                .skillsandprojects_container{
                    position: absolute;
                    top: 40%;
                    right: 0;
                    left: 0;
                    width: 100%;
                    height: 35%;
                    margin: 0;
                    background-color: white;
                    border: none;
                }

                .button_text{
                    font-size: 0.79rem;
                }

                .skillsandprojects_container2{
                    position: absolute;
                    top: 75%;
                    right: 0;
                    left: 0;
                    height: 35%;
                    width: 100%;
                }

                .skills_container_row3{
                    width: 100%;
                    height: 39px;
                    border: none;
                  }

                  .contacts_section{
                      margin-top: 6rem;
                  }

                }}

    @if $breakpoint == phone {

        @media screen and (max-width: 573px) and (max-height: 926px){
            
            .name_text{
                font-size: 1.5rem;
                padding-top: 2rem;
                padding-left: 5vw;
            }

            .role_text{
                font-size: 0.7rem;
                padding-top: 0.6rem;
                padding-left: 0.5rem;
            }

            .main_div{
                height: 985.3px;
                //height: calc((100vh + (#{$head_div_height} * 2)));

            }

            .contact_header{
                text-align: center;
                height: auto;
                width: inherit;
                //height: $contacts_section_header_height;
                transform: translate(0);
                //margin: 0 auto;
                margin-bottom: 0.2rem; }

            .photo_box{
                height: 40%;
                width: 100vw;
            }
            

            .vk_picture{
                width: 3.437rem;
                height: 3.437rem;
            }

            .tg_picture{
                width: 3.437rem;
                height: 3.437rem;
            }

            .hh_picture{
                width: 3.437rem;
                height: 3.437rem;
            }

            .contacts_section_col{
                width: calc((#{3.437rem} * 3) / 3);
            }

            .contacts_section_row{
                width: calc(#{3.437rem} * 3)
            }

            .skills_container_row{
                font-size: 1.5rem;
                margin: 0px;
            }

            .skillsandprojects-col-one{
                font-size: 1.8rem;
                height: auto;
                text-align: left;
            }


            .skillsandprojects_container{
                position: absolute;
                top: 40%;
                right: 0;
                left: 0;
                width: 100%;
                height: 35%;
                margin: 0;
                background-color: white;
                border: none;
            }

            .button_text{
                font-size: 0.9rem;
            }

            .skillsandprojects_container2{
                position: absolute;
                top: 75%;
                right: 0;
                left: 0;
                height: 35%;
                width: 100%;
            }

            .skills_container_row3{
                width: 100%;
                height: 39px;
                //height: calc((100% - #{$skills_head-row})/3);
                border: none;
              }
            
        }
}

@if $breakpoint == mac13 {

    @media screen and (width: 1366px) and (height: 768px) {

        .button_text{
            font-size: 0.8rem;
        }
    }
        
    }

    @if $breakpoint == ipad11pro_port {

        @media screen and (height: 1112px) and (width: 834px) {

            body {
                font-size: 70%;
            }


            .name_text{
                font-size: 2.5rem;
                padding-top: 1rem;
                padding-left: 5vw;
            }

            .role_text{
                font-size: 1.7rem;
                padding-top: 0.6rem;
                padding-left: 1rem;
            }

            .main_div{
                height: 985.3px;
                //height: calc((100vh + (#{$head_div_height} * 2)));
            }

            .photo_box{
                height: 40%;
                width: 100vw;
            }

            .photo{
                margin: 0 auto;
                margin-top: 50px;
                width: auto;
                height: 85%;

            }

            .vk_picture{
                height: $picture_width;
                width: $picture_width;
                margin: auto;
              }
              
              .tg_picture{
                height: $picture_width;
                width: $picture_width;
                margin: auto;
              }
              
              .hh_picture{
                height: $picture_width;
                width: $picture_width;
                margin: auto;
              }

            .contacts_section_col{
                width: calc((#{$picture_width} * 3) / 3);
            }

            .contacts_section_row{
                margin-top: 1rem;
                width: calc(#{$picture_width} * 3)
            }

            .button_text{
                font-size: 1.3rem;
            }

            .contact_header{
                text-align: center;
                height: auto;
                width: inherit;
                margin: 0 auto;
                margin-top: 1rem;
                transform: translate(0); 
            }

            .skills_container_row{
                font-size: 2.5rem;
                margin: 0px;
            }

            .skillsandprojects-col-one{
                font-size: 2rem;
                height: auto;
                text-align: left;
            }


            .skillsandprojects_container{
                position: absolute;
                top: 40%;
                right: 0;
                left: 0;
                width: 100%;
                height: 35%;
                margin: 0;
                background-color: white;
                border: none;
            }

            .contacts_section{
                position: relative;
                bottom: calc(100vh - (#{$main_div_height} + #{$head_div_height} + #{$contact_section_height}));
                width: 100vw;
                height: $contact_section_height;
              }


            .skillsandprojects_container2{
                position: absolute;
                top: 75%;
                right: 0;
                left: 0;
                height: 35%;
                width: 100%;
            }

            .skills_container_row3{
                width: 100%;
                height: 39px;
                border: none;
                margin-bottom: 1rem;
              }

        }
            
        }

        @if $breakpoint == ipad11pro_land {

            @media screen and (width: 834px) and (height: 1112px) {

                body {
                    font-size: 1200%;
                }
                .button_text {font-size: 1rem;}
            }

}}

Answer 1

好的，我想通了。我还没有按照我最初计划的方式让它工作，但我想这将是最好的选择。

答案： 很明显，Safari 不会对具有特定分辨率的媒体查询做出反应，您必须使用具有最小或最大高度或宽度的范围。只需重写您的查询，Safari 就会正确处理它们

在你给我评论之前 - 是的，我知道提出具体的决议和媒体查询并不是最佳做法。我试图这样做，所以我可以为每个分辨率定制设计。我不想扩展平板电脑的移动设计，我确实希望他们保持桌面版横向，同时保留移动版纵向。

实现该效果的更简单方法是针对特定的果岭尺寸 - 它没有成功，现在我意识到我可以通过不同的宽度和高度查询来实现相同的效果。

作为奖励，我愿意分享我发现适合从 iPhone SE 到 MacBook Pro 16

屏幕的查询大小

@mixin respond ($breakpoint){

        
        @if $breakpoint == phone {

           
            @media screen and (max-width: 1024px) and (max-height: 1366px){
                 //this is for phones and tablets in portrait

                
                // query styles go here  }}

    @if $breakpoint == tab_land {

@media screen and (min-width: 1024px) and (max-height: 1366px){ 
            //quiry styles go here}
        }}

    @if $breakpoint == mac13 {

        @media screen and (min-width: 1366px) {

            // query styles go here  }}

        @if $breakpoint == mac15 {

            @media screen and (min-width: 1600px) {
    
                // query styles go here  
            }}

            @if $breakpoint == mac16 {

                @media screen and (min-width: 2560px) {
                    // query styles go here  
                }

       

}

为什么 safari 对我的媒体查询没有反应？

Why is safari does not react to my media queries?

sass

safari

responsive-design

media-queries

node-sass