Apply styles based on screen size

[Ken]

Here in one kind of solution to apply some styles to desktop, tablet and mobile.
You are free to test any css.

There is three options to use code: button, resize and Dom already loaded. The end result may be different.
The resize option is on in example but you can change it.

Code: Select all

EnableJS

var button = document.createElement('button');
button.textContent = 'Modify Css';
button.style.position = 'fixed';
button.style.top = '10px';
button.style.right = '10px';
button.style.zIndex = '9999';
button.style.padding = '10px 20px';
button.style.backgroundColor = '#0076ff';
button.style.color = 'white';
button.style.border = 'none';
button.style.borderRadius = '5px';
button.style.cursor = 'pointer';
document.body.appendChild(button);

function applyStylesBasedOnScreenSize() {
  var isDesktop = window.matchMedia('(min-width: 1024px)').matches;
  var isTablet = window.matchMedia('(min-width: 768px) and (max-width: 1023px)').matches;
  var isMobile = window.matchMedia('(max-width: 767px)').matches;

  var content = document.querySelector('.page__content');
  var cont = document.querySelector('.page');

  if (isDesktop) {
    // Desktop styles
    if (content) {
      content.style.left = '45px';
      content.style.right = '45px';
      content.style.top = '100px';
      content.style.border = '1px solid red';
    }
    if (cont) {
      cont.style.left = '10%';
      cont.style.right = '10%';
      cont.style.top = '10px';
    }
  } else if (isTablet) {
    // Tablet styles
    if (content) {
      content.style.left = '30px';
      content.style.right = '30px';
      content.style.top = '80px';
      content.style.border = '2px dotted blue';
    }
    if (cont) {
      cont.style.left = '5%';
      cont.style.right = '5%';
      cont.style.top = '10px';
      cont.style.boxShadow = '15px 20px 30px cornflowerblue';
    }
  } else {
    // Mobile styles
    if (content) {
      content.style.left = '15px';
      content.style.right = '15px';
      content.style.top = '60px';
      content.style.border = '1px solid green';
    }
    if (cont) {
      cont.style.left = '2%';
      cont.style.right = '2%';
      cont.style.top = '10px';
    }
  }
}

//button eventListener
//button.addEventListener('click', applyStylesBasedOnScreenSize);

// Also apply on window resize
window.addEventListener('resize', applyStylesBasedOnScreenSize);

/*
// Apply on page load with timer (wait for OnsenUI to create elements)
function applyOnLoad() {
  var content = document.querySelector('.page__content');
  var cont = document.querySelector('.page');

  if (content || cont) {
    // Elements exist, apply styles
    applyStylesBasedOnScreenSize();
  } else {
    // Elements don't exist yet, check again in 100ms
    setTimeout(applyOnLoad, 100);
  }
}

// Start checking when DOM is ready
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', function() {
    setTimeout(applyOnLoad, 200);
  });
} else {
  // DOM already loaded, start checking
  setTimeout(applyOnLoad, 200);
}
*/

DisableJS

[Ken]

Forget to mention that this is meant to use with Mobile UI.
Note also that you can have for example both resize and Dom loaded enabled same time.
Put the code at the beginning of your code. Note if you use EnableExplicit it has to be the first line.

[Ken]

I did little modifications so here is the final version. I added the background handling.

It now uses just Dom ready and resize feature together. Styles will be applied automatically when the page loads.

Note. The timer checks every 100ms until OnsenUI creates the elements, then applies the correct styles based on screen size.
There is Debounce function meaning if you resize slowly → Timer starts → You resize more → Timer resets → Timer starts...and function never runs. So this is a feature. If you resize normally (you stop resizing 200ms) the function runs and styles will be applied.

Code: Select all

EnableJS


// Debounce function to limit resize events
function debounce(func, wait) {
  var timeout;
  return function() {
    var context = this, args = arguments;
    clearTimeout(timeout);
    timeout = setTimeout(function() {
      func.apply(context, args);
    }, wait);
  };
}

function applyStylesBasedOnScreenSize() {
  var isDesktop = window.matchMedia('(min-width: 1024px)').matches;
  var isTablet = window.matchMedia('(min-width: 768px) and (max-width: 1023px)').matches;
  var isMobile = window.matchMedia('(max-width: 767px)').matches;

  var content = document.querySelector('.page__content');
  var cont = document.querySelector('.page');
  var bground = document.querySelector('.page__background');

  if (isDesktop) {
    // Desktop styles
    if (content) {
      content.style.left = '45px';
      content.style.right = '45px';
      content.style.top = '100px';
      content.style.border = '1px solid red';
    }
    if (cont) {
      cont.style.left = '10%';
      cont.style.right = '10%';
      cont.style.top = '10px';
    }
    if (bground) {
      bground.style.backgroundImage = 'none';
      bground.style.position = 'fixed';
      bground.style.setProperty('background-color', 'white', 'important');
    }
  } else if (isTablet) {
    // Tablet styles
    if (content) {
      content.style.left = '30px';
      content.style.right = '30px';
      content.style.top = '80px';
      content.style.border = '2px dotted blue';
    }
    if (cont) {
      cont.style.left = '5%';
      cont.style.right = '5%';
      cont.style.top = '10px';
      cont.style.boxShadow = '15px 20px 30px cornflowerblue';
    }
    if (bground) {
      bground.style.backgroundImage = "url('https://picsum.photos/1600/800/?blur')";
      bground.style.position = 'absolute';
      bground.style.setProperty('background-size', 'cover');
    }
  } else {
    // Mobile styles
    if (content) {
      content.style.left = '15px';
      content.style.right = '15px';
      content.style.top = '60px';
      content.style.border = '1px solid green';
    }
    if (cont) {
      cont.style.left = '2%';
      cont.style.right = '2%';
      cont.style.top = '10px';
    }
    if (bground) {
      bground.style.backgroundColor = 'snow';
      bground.style.backgroundImage = 'none';
      bground.style.position = 'absolute';
    }
  }
}

// Apply on page load with timer (wait for OnsenUI to create elements)
var checkCount = 0;
var maxChecks = 100; // Stop checking after ~10 seconds

function applyOnLoad() {
  var content = document.querySelector('.page__content');
  var cont = document.querySelector('.page');
  var bground = document.querySelector('.page__background');

  if (content || cont || bground) {
    // Elements exist, apply styles
    applyStylesBasedOnScreenSize();
  } else if (checkCount < maxChecks) {
    // Elements don't exist yet, check again in 100ms
    checkCount++;
    setTimeout(applyOnLoad, 100);
  }
  // If maxChecks reached, stop trying (prevents infinite loop)
}

// Start checking when DOM is ready
if (document.readyState === 'loading') {
  document.addEventListener('DOMContentLoaded', function() {
    setTimeout(applyOnLoad, 200);
  });
} else {
  setTimeout(applyOnLoad, 200);
}

// Debounced resize handler (only runs once after resize ends)
window.addEventListener('resize', debounce(applyStylesBasedOnScreenSize, 200));

DisableJS