Display different logo according to the screen size, don't know why the mobile (Sony Ericsson WT19i) with size at 320 cannot perform the correct stylesheet.
I check the screen width using javascript window.innerWidth and window.innerHeight which is 320x401. It load the CSS for 800px.
@media screen {
body {
background-image:url('desktop.png') !important;
background-repeat:no-repeat !important;
background-attachment:fixed !important;
background-position:right bottom !important;
}
}
@media screen and (max-device-width: 320px) {
body {
background-image:url('320P.png') !important;
background-repeat:no-repeat !important;
background-attachment:fixed !important;
background-position:right bottom !important;
}
}
@media screen and (max-device-width: 800px) {
body {
background-image:url('800P.png') !important;
background-repeat:no-repeat !important;
background-attachment:fixed !important;
background-position:right bottom !important;
}
}
<meta name="viewport" content="initial-scale:1.0" />
to your<head>
. – Passerbymax-width
, because inmax-device-width
you must adddevice-pixel-ratio
– Pinal