我在三星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" 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>
三星Galaxy S5 Nav CSS :(这就是&#39; s无法正常工作)
/* 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;
}
}
答案 0 :(得分:0)
我会做什么,而不是设置绝对像素比率是为了具有最小像素比率(对于所有分辨率)并从那里开始。
@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;
}
}