CSS Samsung/IE 的导航大小问题

Question

我在 Samsung Galaxy smartphones 和 IE 浏览器上显示的图像大小有问题。我敢肯定还有更多的设备，但这些只是我现在遇到的。在所有 Apple 产品上，我使用了相同的技术并且它们都有效。

对于移动设备，我将导航分成 2 行，以便它在较小宽度的屏幕上显示更清晰。在 PC/Laptops 上，它仍然是一行，但图像不会像在 mac 上那样容易调整大小。

这是我的 Nav 和 Nav 的 JSFiddle CSS。 smart phone 和我开始使用的其他设备 CSS 也在那里。我将在下面概述它们。

https://jsfiddle.net/blackRob4953/238n7ddk/1/

如何调整导航图像的大小，即 I.E.对于这款三星 Galaxy S5？

导航：

<nav>
<div>
    <a href="/">
        <div id="logo"><img src="/Images/7serviceLOGOblue2.png" alt="Home"/></div>
        <div id="headtag"><img src="/Images/title.png" alt="Home"/></div>
        <div id="tagline"><img src="/Images/tag_line.png" alt="Home"/></div>
    </a>
</div>
<div> 
    <a href="/" class="here">Home</a>
    <a href="/about.php">About</a>      
    <a href="/services.php">Services</a>
    <a href="/pricing.php">Pricing</a>
    <a href="/contact.php">Contact Us</a>
    <!--input id="srchbar" type="search" placeholder="Search"-->
</div>
</nav>

Samsung Galaxy S5 Nav CSS：（这是不起作用的）

/* Galaxy S5 */
@media screen 
  and (device-width: 360px) 
  and (device-height: 640px) 
  and (-webkit-device-pixel-ratio: 3) { 
nav{
-webkit-flex-direction: column;
    flex-direction: column;
    margin:0;
    min-width: 360px;
    max-width: 640px;
    }
nav>div{
min-width: 360px;
max-width: 640px;
}
nav>div{
min-width: 360px;
max-width: 640px;
-webkit-justify-content: center;
justify-content: center;
}
#logo{
width:1em;
height:3em;
line-height: 0;
}
#headtag{
width:1em;
height:.1em;
line-height: 0;
}
#tagline{
width: 1em;
height:3em;
line-height: 0;
}
nav>div>a{
font-size:.4em;
margin:0 1em;
}
}

Answer 1

然后我会做的不是设置绝对像素比，而是设置最小像素比（对于所有分辨率）并从那里开始。

@media screen and (min-width:320px) and (max-width:568px) and (-webkit-min-device-pixel-ratio: 1.5),  
       (-o-min-device-pixel-ratio: 3/2),  
       (min--moz-device-pixel-ratio: 1.5),  
       (min-device-pixel-ratio: 1.5) {  

nav{
    -webkit-flex-direction: column;
        flex-direction: column;
        margin:0;
        }
    nav>div{
    min-width: 320px;
    max-width: 568px;
    }
    nav>div{
    min-width: 320px;
    max-width: 568px;
    -webkit-justify-content: center;
    justify-content: center;
    }
    #logo{
    width:8em;
    height:3em;
    }
    #headtag{
    width:14em;
    height:1.5em;
    }
    #tagline{
    width: 35em;
    height:3em;
    }
    nav>div>a{
    font-size:.4em;
    margin:0 1em;
    }
}



}



@media screen and (min-width:360px) and (max-width:640px) and (-webkit-min-device-pixel-ratio: 1.5),  
           (-o-min-device-pixel-ratio: 3/2),  
           (min--moz-device-pixel-ratio: 1.5),  
           (min-device-pixel-ratio: 1.5) {  
nav{
-webkit-flex-direction: column;
    flex-direction: column;
    margin:0;
    min-width: 360px;
    max-width: 640px;
    }
nav>div{
min-width: 360px;
max-width: 640px;
}
nav>div{
min-width: 360px;
max-width: 640px;
-webkit-justify-content: center;
justify-content: center;
}
#logo{
width:1em;
height:3em;
line-height: 0;
}
#headtag{
width:1em;
height:.1em;
line-height: 0;
}
#tagline{
width: 1em;
height:3em;
line-height: 0;
}
nav>div>a{
font-size:.4em;
margin:0 1em;
}


}

CSS Samsung/IE 的导航大小问题

CSS Navigation sizing issues with Samsung/IE

css

navigation

android

image

media-queries