Question

我正在设置我的徽标，以便为桌面显示更大的徽标，并为智能手机等小型设备显示更小的图像...

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

有人能帮助我吗？我的代码出了什么问题？

<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>

Answer 1

您应该使用 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/

Answer 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>

Answer 3

因为你没有使用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 */
    }
}

如何使用javascript根据页面更改徽标？

3 个答案: