This JavaScript script, "Browser Window Dimensions Tracker," allows you to create a dynamic display of the current browser window's width and height, as well as the height of the document's body. It's a useful tool for web developers and designers who need to monitor how their web pages respond to changes in viewport dimensions.
- Real-time tracking of the browser window's width and height.
- Display of the height of the document's body.
- Fixed position display for easy monitoring.
- Responsive design with adjustable styles.
Both dark and light mode available.
- Include the script in your HTML file.
- Customize the script's styles and appearance according to your project's needs.
- The script will automatically update the displayed dimensions as the browser window is resized.
Here's an example of how to use the script in your HTML file:
<!DOCTYPE html>
<html>
<head>
<!-- Include the script -->
<script src="window-dimensions-tracker.js"></script>
</head>
<body>
<!-- Your content goes here -->
<!-- The tracker container will be automatically added to the body -->
</body>
</html>You can easily customize the appearance of the tracker by modifying the script's styles in the window-dimensions-tracker.js file. Adjust colors, fonts, positions, and other CSS properties to match your project's design.
This script is open-source and available under the MIT License. Feel free to use, modify, and distribute it as needed for your projects.
Developed by Michael Osipov
Contact: michael.osipov@gmail.com
Contributions are welcome! If you have suggestions or improvements, please open an issue or submit a pull request.