I have a script which shows different content depending on the screen size, it looks like this:

window.onresize = function(event) {
if ((window.innerWidth > 750 && window.innerWidth < 1250))  {

//Do something

}}

The above works absolutely fine when re-sizing the browser. My question is how can i get the above to work if the user opens the page up with a window width of say 750?

I have just tested this and obviously the event isn't triggered until the browser is re-sized, this is causing the above not to work

I have a script which shows different content depending on the screen size, it looks like this:

window.onresize = function(event) {
if ((window.innerWidth > 750 && window.innerWidth < 1250))  {

//Do something

}}

The above works absolutely fine when re-sizing the browser. My question is how can i get the above to work if the user opens the page up with a window width of say 750?

I have just tested this and obviously the event isn't triggered until the browser is re-sized, this is causing the above not to work

• javascript
• window

Share Improve this question Follow asked Jul 31, 2013 at 15:59 danyodanyo 5,8462020 gold badges6666 silver badges120120 bronze badges 3

• Why don't you use media queries instead? – taylorc93 Commented Jul 31, 2013 at 16:01
• I would remend media queries as well. However, if you can use a library like JQuery, this would be as simple as $(document).ready(function(){ if (window.innerWidth == 750) { //Do Something } – Ishikawa91 Commented Jul 31, 2013 at 16:03
• 1 @taylorc93 - i need to support older browsers that's why – danyo Commented Jul 31, 2013 at 16:14

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 8

var onResizing = function(event) {
if ((window.innerWidth > 750 && window.innerWidth < 1250))  {

//Do something

}};

window.onresize = onResizing;
window.onload = onResizing;

Using jquery:

$(document).ready( function(){
   if (window.innerWidth == 750) {
     // Do something
   } 
});

The "onresize" function is an event listener that fires when the user resizes their page. To get your code to run on page load you need to set it up to fire on the page load event instead (as the page load event is a different event from the resize event).

window.onload = function(event) {
    if ((window.innerWidth > 750 && window.innerWidth < 1250))  {
        //Do something
    }
}