Skip to content

Instantly share code, notes, and snippets.

@to

to/gist:2913882

Created June 12, 2012 01:40
Show Gist options
  • Save to/2913882 to your computer and use it in GitHub Desktop.
Save to/2913882 to your computer and use it in GitHub Desktop.
Download ZIP
Window Size, Media Query
Raw
gistfile1.html
<!doctype html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">
</head>
<body>
<pre id="out"></pre>
</body>
<script>
function checkSizes(){
var out = [
'window.devicePixelRatio: ' + window.devicePixelRatio,
'window.innerWidth: ' + window.innerWidth,
'window.innerHeight: ' + window.innerHeight,
'window.screen.width: ' + window.screen.width,
'window.screen.height: ' + window.screen.height,
'',
];
var tests = {
'-webkit-device-pixel-ratio' : window.devicePixelRatio,
'-moz-device-pixel-ratio' : window.devicePixelRatio,
'device-pixel-ratio' : window.devicePixelRatio,
'device-aspect-ratio' : window.screen.width + '/' + window.screen.height,
'aspect-ratio' : window.innerWidth + '/' + window.innerHeight,
'width' : window.innerWidth + 'px',
'device-width' : window.screen.width + 'px',
'height' : window.innerHeight + 'px',
'device-height' : window.screen.height + 'px',
}
for(var prop in tests){
var test = prop + ': ' + tests[prop];
if(window.matchMedia('(' + test + ')').matches)
out.push(test);
}
document.getElementById('out').textContent = out.join('\n');
}
checkSizes();
window.addEventListener('resize', checkSizes, true);
</script>
</html>
@to
Copy link
Author

to commented Jun 12, 2012

resolutionのクエリ(dip)は、どこでもマッチしなかった。viewportにtarget-densitydpi=device-dpiを指定するとエラーになる。

@to
Copy link
Author

to commented Jun 12, 2012

Retinaの新iPadも昔のiPadはdevice-widthとdevice-heightが同じ。本当のデバイスピクセル数は、この値にデバイスピクセル比を乗算したものになる。

@to
Copy link
Author

to commented Jun 12, 2012

参考リンク。

viewport メタタグと @viewport 規則 - Dev.Opera
スマートフォンと画面解像度・ピクセル密度

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment