Example html structure when you work with content that is larger than your screen size (e.g. an non-responsive app that runs on 4k but you are on a laptop)

example.html

<!-- Example html structure when you work with content that is larger than your screen size -->
<!-- (e.g. an non-responsive app that runs on 4k but you are on a laptop) -->
<!-- See comment below for screenshot -->

<style>
  /* Extracted from tailwind.css https://cdnjs.cloudflare.com/ajax/libs/tailwindcss/2.2.7/tailwind.css */
  .relative { position: relative; }
  .w-screen { width: 100vw; }
  .h-screen { height: 100vh; }
  .bg-black { background-color: #000; }
  .bg-white { background-color: #fff; }
  .flex { display: flex; }
  .items-center { align-items: center; }
  .overflow-hidden { overflow: hidden; }
  .mx-auto { margin-left: auto; margin-right: auto; }
  .text-6xl { font-size: 3.75rem; line-height: 1; }
</style>

<style>
  /* I recommend Tailwind.css or a reset.css like https://meyerweb.com/eric/tools/css/reset/ to get rid of weird margins/paddings */
  body{ padding: 0; margin: 0; }
  /* Custom to use with tailwind properly better adjust the tailwind.config.js */
  .min-w-4k { min-width: 3840px; }
  .min-h-4k { min-height: 2160px; }
  .w-4k{ width: 3840px; }
  .h-4k{ height: 2160px; }

  .min-w-fullHD { min-width: 1920px; }
  .min-h-fullHD { min-height: 1080px; }
  .w-fullHD { width: 1920px; }
  .h-fullHD { height: 1080px; }
</style>

<div class="relative w-screen h-screen min-w-4k min-h-4k bg-black flex items-center overflow-hidden">
  <div id="content-container" class="relative w-4k h-4k mx-auto bg-white overflow-hidden">
    <span class="text-6xl">I am a view that has the size of 4K (you might have to zoom out)</span>
  </div>
</div>

That's how it looks like on a 13 inch laptop on a zoomed out Chrome