3

我正在尝试将我的徽标设置为为台式机显示更大的徽标，为智能手机等小型设备显示更小的图像...

这是我到目前为止所尝试的，但它不起作用。

有人可以帮助我吗？我的代码有什么问题？

<html>
<head>
<script type="text/javascript">
function load(){
    document.getElementById('logo').src = displaylogo();
}
function displaylogo(){
    if ($(window).width() < 1024) {// code for small viewports
        return "http://i.imgur.com/ozYV740.png"; // small logo
    } 
    else {// code for large viewports
        return "http://i.imgur.com/RMV6Af0.png"; //big logo
    }
}
</script>
</head>
<body onload="load()">
    <img src="http://i.imgur.com/RMV6Af0.png" id="logo" name="logo" title="The original logo is the big logo"/>
</body>
</html>
4

3 回答 3

3

您应该使用CSS 媒体查询来处理您的网页在不同设备上的显示方式。这些查询允许您根据用户屏幕的宽度应用不同的样式。

例如，要调整手机徽标的大小，请尝试：

/* Desktops (>480px) */
#logo {
  width: 200px;
  height: 200px;
}

/* iPhone landscape (480px) */
@media screen and (max-width: 480px) {
  #logo {
    width: 100px;
    height: 100px;
  }
}

教程：http: //mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/

于 2013-09-04T15:58:46.457 回答
2

尝试使用媒体查询

<head>
     <style>
          .logo {
                width: //logo-width
                height : //logo-height
                background-image : url('http://i.imgur.com/RMV6Af0.png');
           }

           @media only screen 
           and (max-device-width : 1024px) {
                .logo {
                    width: //logo-width
                    height : //logo-height
                    background-image : url('http://i.imgur.com/ozYV740.png');
                }
           }
     </style>
</head>
<body>
<div class="logo">
</div>
</body>
于 2013-09-04T16:02:06.790 回答
1

因为你不使用jquery在你的情况下试试这个：

在 JS 中工作：

if (window.innerWidth < 1024) {// code for small viewports
    //^^^^^^^^^^^

如果你想使用 jquery：

function displaylogo() {
    if ($(window).width() < 1024) {
        $("#logo").attr("src","http://i.imgur.com/ozYV740.png"); // small logo
    } 
    else {
        $("#logo").attr("src","http://i.imgur.com/RMV6Af0.png"); //big logo
    } 
}

$(window).resize(function () {
    displaylogo();
});
$(document).ready(function () {
    displaylogo();
});

我建议CSS改用：

<span id="logo"></span>

CSS：

#logo {
    display: inline-block;
    width: 50px;
    height: 50px;
    background: url(http://i.imgur.com/ozYV740.png) no-repeat; /* small */
}
@media screen and (min-width: 1024px) {
    #logo {
        width: 100px;
        height: 100px;
        background: url(http://i.imgur.com/RMV6Af0.png) no-repeat; /* big */
    }
}
于 2013-09-04T15:49:31.950 回答