<h1>Content by Width</h1>
<p>Simple example of loading content into a page with JavaScript based on the inner width of the window (responsive loadiing). </p>
<div id="target">
</div>
const target = document.querySelector("#target");
const size = window.innerWidth;
const mobileSize = 479;
const tabletSize = 767;
const desktopSize = 991;
const mobileHtml = `<h2> Mobile Content - Size ${size}</h2>`;
const tabletHtml = `<h2> Tablet Content - Size ${size}</h2>`;
const desktopHtml = `<h2> Desktop Content -Size ${size}</h2>`;
if (size < mobileSize) {
  target.innerHTML = mobileHtml;
} else if (size >= mobileSize && size < tabletSize) {
  target.innerHTML = tabletHtml;
} else {
  target.innerHTML = desktopHtml;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.