获取浏览器分辨率
{{html}}
<pre
id='browser-info'></pre>
<script>
document.addEventListener('DOMContentLoaded',
function() {
var
browserInfo =
document.querySelector('#browser-info');
browserInfo.innerText
= JSON.stringify({
"document.body.clientWidth":
document.body.clientWidth, /* 可见区域宽度
*/
"document.body.clientHeight":
document.body.clientHeight, /* 可见区域高度
*/
"document.documentElement.clientWidth":
document.documentElement.clientWidth, /*
页面对象宽度（即BODY对象宽度加上Margin宽）
*/
"document.documentElement.clientHeight":
document.documentElement.clientHeight, /*
页面对象高度（即BODY对象高度加上Margin高）
*/
"document.body.offsetWidth":
document.body.offsetWidth, /* 网页可见区域宽(body)，包括border、margin等
*/
"document.body.offsetHeight":
document.body.offsetHeight, /* 网页可见区域宽(body)，包括border、margin等
*/
"document.body.scrollWidth":
document.body.scrollWidth, /* 网页正文全文宽，包括有滚动条时的未见区域
*/
"document.body.scrollHeight":
document.body.scrollHeight, /* 网页正文全文高，包括有滚动条时的未见区域
*/
"document.body.scrollTop":
document.body.scrollTop, /* 网页被卷去的Top(滚动条)
*/
"document.body.scrollLeft":
document.body.scrollLeft, /* 网页被卷去的Left(滚动条)
*/
"window.screenTop":
window.screenTop, /* 浏览器距离Top
*/
"window.screenLeft":
window.screenLeft, /* 浏览器距离Left
*/
"window.screen.height":
window.screen.height, /* 屏幕分辨率的高
*/
"window.screen.width":
window.screen.width, /* 屏幕分辨率的宽
*/
"window.screen.availHeight":
window.screen.availHeight, /* 屏幕可用工作区的高
*/
"window.screen.availWidth":
window.screen.availWidth, /* 屏幕可用工作区的宽
*/
},
null, 4);
})
</script>
{{/html}}
获取屏幕分辨率
{{html}}
<pre
id='screen-info'></pre>
<script>
document.addEventListener('DOMContentLoaded',
function() {
var screenInfo =
document.querySelector('#screen-info');
screenInfo.innerText
= 'window.screen.width :
' + window.screen.width + '\n'
+
'window.screen.height : ' +
window.screen.height + '\n'
+
'window.devicePixelRatio : ' +
window.devicePixelRatio + ' (' +
(Math.round(window.devicePixelRatio * 10000) / 100) +
'%)\n'
+
'Actual screen resolution : ' + (window.screen.width
* window.devicePixelRatio) + ' x ' + (window.screen.height *
window.devicePixelRatio) + '\n'
+
'Actual screen DPI :
' + getScreenDPI();
}, false);
function
getScreenDPI() {
for (var dpi = 56;
dpi < 2000; ++dpi) {
if
(matchMedia('(max-resolution: ' + dpi + 'dpi)').matches === true)
{
return
dpi;
}
}
}
</script>
{{/html}}
获取图片大小
{{html}}
<img id="image"
src="/bin/download/FlamingoThemes/Iceberg/logo.svg"
style="background: #3e7cbc;" />
<pre
id="image-info"></pre>
<script>
document.addEventListener('DOMContentLoaded',
function() {
var image =
document.querySelector('#image');
var
imageInfo = document.querySelector('#image-info');
var
info = getImageInfo(image);
imageInfo.innerText
= 'image.width : ' + info.width +
'\n'
+
'image.height : ' + info.height;
}, false);
function
getImageInfo(imageOrUrl) {
var image
= new Image();
image.src = (typeof
imageOrUrl === 'string' ? imageOrUrl :
imageOrUrl.src);
return
{
width :
image.width,
height
: image.height
};
}
</script>
{{/html}}