Menu
I am trying to set my logo to display a bigger logo for desktops and a smaller image for smaller devices like smartphones...
This is what i've tried until now, but it doesn't works.
Can somebody help me? What's wrong with my code?
<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>
288
You should be using CSS media queries to handle how your web page displays on different devices. These queries allow you to apply different styles depending on the width of the user's screen.
For example, to resize your logo for phones, try:
/* Desktops (>480px) */
#logo {
width: 200px;
height: 200px;
}
/* iPhone landscape (480px) */
@media screen and (max-width: 480px) {
#logo {
width: 100px;
height: 100px;
}
}
Tutorial: http://mobile.smashingmagazine.com/2010/07/19/how-to-use-css3-media-queries-to-create-a-mobile-version-of-your-website/
50
Try using media queries
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
