Dieser Code ist browserübergreifend kompatibel und prüft die Abmessungen des Viewports, die Bildschirmauflösung und die Mausposition, was für einige Prüfungen mit JavaScript sehr hilfreich sein kann.
<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>
Hallo,
Die Referenz-URL ist 404.
Viele Grüße,
J.
Hey, achte auf den Tippfehler "Mouse Postition". Ich glaube, es sollte "Mouse Position" heißen. Viele Grüße.
Maus-Prostitution
Wir haben eine Demo erstellt unter http://jsbin.com/apeveq/
Munawar, das ist eine großartige Demo.
Munawar! Es gibt einen sehr kleinen Fehler, den ich nicht erwähnen wollte, aber ich dachte, ich sollte es dir sagen. Die Mausposition Y und X werden falsch angezeigt. D.h. X zeigt die Y-Position und Y zeigt die X-Position. Tatsächlich habe ich mir auch den Code angesehen. Oben wird die Y-Position geladen und links die X-Position, was richtig ist, aber sie werden unter der falschen Bezeichnung ausgegeben. Übrigens ist die Demo großartig. Auch für CSS Tricks, das ganze Snippet ist großartig. Ich wollte nur eine Sache fragen. Wie kann ich diese Daten verwenden, um CSS-Probleme zu beheben, die bei unterschiedlichen Bildschirmauflösungen auftreten? Ich möchte eine JavaScript-Lösung und keine CSS3-Lösung, da ich den Trick mit Media Queries kenne. Hoffe, dass ich bald eine Antwort bekomme. Vielen Dank..