<html> | |
<head> | |
<title>CSS3 media query test: Device-pixel ratio query. Using style element, @media css rule.</title> | |
<style type="text/css"> | |
@media screen and (-webkit-min-device-pixel-ratio: 1) { | |
div { | |
background-image: url(resources/apple_logo_half_size.png); | |
} | |
} | |
@media screen and (-webkit-min-device-pixel-ratio: 2) { | |
div { | |
background-image: url(resources/apple_logo_big.jpg); | |
-webkit-background-size: 320px 240px; | |
} | |
} | |
</style> | |
</head> | |
<body> | |
<div style="width:320px; height:240px;"></div> | |
</body> | |
</html> |