How to check screen resolution 8k , 4k , QHD(2k), fullHd , HD
1 min readJan 16, 2024
Screen sizes are getting bigger and bigger these days, which means that we as frontend developers need to test our site for them too, so here’s how we do it.
I mainly work in vue framework, sometimes in react
I run my project
npm run server || npm run dev,
I put the running localhost:(optional) in a separate html inside the iframe, and open it on the live server, so I check the screen resolution and adapt my site accordingly.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>website tester</title>
<style>
iframe:focus {
outline: none;
}
</style>
</head>
<body style="display: flex; flex-wrap: wrap;">
<!-- CHANGE THE SRC TO THE PAGE YOU WANT TO DISPLAY -->
<iframe
src="http://localhost:5173/"
width="4096px"
height="2160px"
frameborder="0"
></iframe>
<iframe
src="http://localhost:5173/"
width="2560px"
height="1440px"
frameborder="0"
></iframe>
<iframe
src="http://localhost:5173/"
width="1920px"
height="1080px"
frameborder="0"
></iframe>
</body>
</html>All the work is done, now you can easily adapt it to the screen size you need.
Don’t forget click 👏 :)
links
