You can get the size of the current window using the window.innerWidth and window.innerHeight properties. These properties return the width and height of the viewport, which is the visible area of the browser window.
<!DOCTYPE html>
<html>
<head>
<!-- <script src="main.js"></script> -->
</head>
<body>
<script>
var wid = window.innerWidth;
var hei = window.innerHeight;
document.write("<h1>" + wid + "</h1>");
document.write("<h1>" + hei + "</h1>");
</script>
</body>
</html>
This script gets the width and height of the current window using the window.innerWidth and window.innerHeight properties and then displays them as headings using the document.write() method.
When you run this script in a browser, it will display the width and height of the window as headings on the page.
The window.innerWidth and window.innerHeight properties are useful for many purposes in JavaScript, such as:
-
Responsive web design: You can use these properties to create responsive web designs that adjust to the size of the user's screen.
-
DOM manipulation: You can use the window size to dynamically adjust the size and position of HTML elements on a page based on the size of the viewport.
-
Game development: You can use the window size to set the boundaries of a game's playing area or to adjust the game's graphics and controls based on the size of the user's screen.
-
User experience: You can use the window size to optimize the layout and design of a website or application to provide the best user experience on different devices and screen sizes.
The window.innerWidth and window.innerHeight properties are essential tools for creating dynamic, responsive, and user-friendly web applications in JavaScript.
No comments:
Post a Comment