After implementing the code below to switch between stylesheets based on browser height, I encountered a small issue. The code works perfectly when the page first loads or when the window is resized and then refreshed. However, I'm curious if there's a way to adjust the code so that it dynamically selects the correct stylesheet as the window is being resized.
if (window.innerHeight <= 900) {
loadcss('css/container_sm.css');
} else {
loadcss('css/container_lg.css');
}
function loadcss(file) {
var el = document.createElement('link');
el.setAttribute('rel', 'stylesheet');
el.setAttribute('type', 'text/css');
el.setAttribute('href', file);
document.getElementsByTagName('head')[0].appendChild(el);
}