The JavaScript code snippet presented in this page can be used to refresh the page if the window width is changed from a device size (mobile, or tablet, or desktop size) to other.
- For examples, if you have in your page some content with different settings for desktop, tablet, and mobile size; if the user resizes the window from full size to a lower window-width (or viceversa), the page is refreshed so to have the content according to current browser's width.


Script code

Add the code in the page you want to refresh it according to window width. Then, to test it, rezise the browser.

<h4>Resize the window</h4>

<script>
/* JS code to refresh the page if window is changed (from: https://coursesweb.net/ ) */
function winSize() {
 // returns an object with height and width of the window
 var win_size = {};
 if (self.innerHeight) {
 win_size.height = self.innerHeight;
 win_size.width = self.innerWidth;
 } else if (document.documentElement && document.documentElement.clientHeight) {
 win_size.height = document.documentElement.clientHeight;
 win_size.width = document.documentElement.Width;
 } else if (document.body) {
 win_size.height = document.body.clientHeight;
 win_size.width = document.body.clientWidth;
 }
 return win_size;
}
var win_size = winSize();

// set indice "m" for mobile (max. 400px), "t" for tablet (max. 700px), "d" for desktop, according to window size
var dev_i = (win_size.width <400) ? 'm' : ((win_size.width <700) ? 't' :'d');

// when Resize browser, check window-width; refresh if current device indice not initial device indice
window.addEventListener('resize', function(e){
 var win_size2 = winSize();
 var dev_i2 = (win_size2.width <400) ? 'm' : ((win_size2.width <700) ? 't' :'d');
 if(dev_i2 != dev_i) window.location.replace(window.location.href);
}, false);
</script>

The script refreshes the page according to these two sizes: 400px, and 700px. If you want to have one size that determines the refresh, modify the variables: var dev_i and var dev_i2.
For example:

var dev_i = (win_size.width <500) ? 'm' : 'd';
//...
var dev_i2 = (win_size2.width <500) ? 'm' :'d';

Daily Test with Code Example

HTML
CSS
JavaScript
PHP-MySQL
Which tag is used to add lists into <ul> and <ol> elements?
<dt> <dd> <li>
<ul>
 <li>http://coursesweb.net/html/</li>
 <li>http://coursesweb.net/css/</li>
</ul>
Which value of the "display" property creates a block box for the content and ads a bullet marker?
block list-item inline-block
.some_class {
  display: list-item;
}
Which instruction converts a JavaScript object into a JSON string.
JSON.parse() JSON.stringify eval()
var obj = {
 "courses": ["php", "javascript", "ajax"]
};
var jsonstr = JSON.stringify(obj);
alert(jsonstr);    // {"courses":["php","javascript","ajax"]}
Indicate the PHP class used to work with HTML and XML content in PHP.
stdClass PDO DOMDocument
$strhtml = '<body><div id="dv1">CoursesWeb.net</div></body>';
$dochtml = new DOMDocument();
$dochtml->loadHTML($strhtml);
$elm = $dochtml->getElementById("dv1");
echo $elm->nodeValue;    // CoursesWeb.net
Refresh page if window width changes from a device size to other

Last accessed pages

  1. Functions, Variable scope and Passing by Reference (1636)
  2. Output or Force Download MP3 with PHP (2272)
  3. Contact page - CoursesWeb (27707)
  4. Tabs effect with CSS (28379)
  5. Dynamic variables in JavaScript (11133)

Popular pages this month

  1. Making DIV Contents Scroll Horizontally, with multiple Div`s inside (1795)
  2. Contact page - CoursesWeb (1750)
  3. Tabs effect with CSS (1744)
  4. PHP getElementById and getElementsByTagName (825)
  5. Get Attribute (ID, Class, Name, Title, Src) with jQuery (702)