三星/IE 的 CSS 导航大小问题

Posted

技术标签:

【中文标题】三星/IE 的 CSS 导航大小问题【英文标题】:CSS Navigation sizing issues with Samsung/IE 【发布时间】:2015-12-04 20:44:32 【问题描述】:

我在三星 Galaxy 智能手机和 IE 浏览器上的图像显示大小有问题。我敢肯定还有更多设备,但这些只是我现在遇到的设备。在所有苹果产品上,我都使用了相同的技术,而且它们都在起作用。

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

这是我的 Nav 和 Nav CSS 的 JSFiddle。我开始的智能手机和其他设备CSS也在那里。我将在下面概述它们。

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

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

导航:

<nav>
<div>
    <a href="/">
        <div id="logo"><img src="/Images/7serviceLOGOblue2.png" /></div>
        <div id="headtag"><img src="/Images/title.png" /></div>
        <div id="tagline"><img src="/Images/tag_line.png" /></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;


【问题讨论】:

媒体查询中不需要设备高度或像素比。坚持最大宽度,你会没事的 jsfiddle.net/RachGal/238n7ddk/2 谢谢瑞秋。为什么我不需要像素比?我见过的每一个媒体查询都附带它 我从不使用它,它每次都有效。它只是一个额外的 没问题。你试过了吗? 【参考方案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;




【讨论】:

某些设备的像素比率不同 - 将其设置为 2 或 3 不是一个好习惯,您应该设置一个最小值。有关更多信息,我建议您阅读davidbcalhoun.com/2011/mobile-performance-manifesto 这说明了高分辨率 太棒了,我必须通读这些文章并弄清楚。这应该至少可以解决我的错误,至少对于支持 3G 的 iPhone 4S 和 Galaxy 3 等设备,以及较旧的 iPad 是否正确?我是否必须做一些忽略带宽和编码的事情才能使其设备可读? 我不确定我理解你的意思

以上是关于三星/IE 的 CSS 导航大小问题的主要内容,如果未能解决你的问题,请参考以下文章

CSS选项卡宽度自动调整大小

固定导航上的 CSS 剪辑/剪辑路径在 Chrome 和 IE 中不合作

IE9 对 CSS 有文件大小限制吗?

Android如何隐藏底部虚拟按键

在 IE CSS font-face 仅在通过内部链接导航时有效

IE 10 中背景大小的 css 过渡