此代码与跨浏览器兼容,并检查视口、屏幕分辨率和鼠标位置的尺寸,这对于使用JavaScript执行一些检查非常有用。
<script type="text/javascript">
function getViewportWidth()
{
if (window.innerWidth)
{
return window.innerWidth;
}
else if (document.body && document.body.offsetWidth)
{
return document.body.offsetWidth;
}
else
{
return 0;
}
}
function getViewportHeight()
{
if (window.innerHeight)
{
return window.innerHeight;
}
else if (document.body && document.body.offsetHeight)
{
return document.body.offsetHeight;
}
else
{
return 0;
}
}
var tellMeTheSizes=function()
{
document.getElementById("viewportwidth").innerHTML = getViewportWidth() + "px";
document.getElementById("viewportheight").innerHTML = getViewportHeight() + "px";
document.getElementById("resolutionheight").innerHTML = screen.height + "px";
document.getElementById("resolutionwidth").innerHTML = screen.width + "px";
}
window.onload=function()
{
tellMeTheSizes();
}
window.onresize=function()
{
tellMeTheSizes();
}
window.onmousemove=function(event)
{
ev = event || window.event;
document.getElementById("mousetop").innerHTML = ev.pageY + "px";
document.getElementById("mouseleft").innerHTML = ev.pageX + "px";
}
</script>
您好,
参考URL为404。
干杯,
J。
嘿,检查一下错字“Mouse Postition”。我认为应该是“Mouse Position”。干杯。
鼠标卖淫
我们在http://jsbin.com/apeveq/上创建了一个演示
Munawar,这是一个很棒的演示。
Munawar!我有一个小错误,我不想提,但我想我应该告诉你。鼠标位置Y和X打印错误。即X打印位置Y,Y打印位置X。实际上我也查看了代码。顶部加载Y位置,左侧加载X位置,这是正确的,但它们在错误的标签下打印。顺便说一句,演示很棒。对于CSS Tricks来说,整个代码片段都很棒。我只是想问一件事。如何使用这些数据修复在不同屏幕分辨率下出现的CSS问题。我想要一个JavaScript解决方案而不是CSS3解决方案,因为我知道使用媒体查询的技巧。希望我能很快得到答案。谢谢。