Showing a page to 1920x1080 monitors only, and another page to the rest of the monitor dimensions

Question

Is it possible, to show a main page (index.html) for 1920 x 1080 monitors and to show another completely different page (product.html) for monitors/phones/tablets/other electronics of different monitor dimensions? If possible, any examples?

Something like :-

if(screen = 1920x1080)
  // Show main page

else //if screen is not 1920x1080
  // Show a different page (different HTML and CSS)

I see you have changed your question a little. The answer is for the tags that you have put this is **not** possible. Using JS or something like that then **yes**, that is possible. — Ruddy, Apr 24 '15 at 07:21
Yeah, just updated the question (final change). And owh.. Javascript? Any notable examples? — youdoreallysay, Apr 24 '15 at 07:22
@youdoreallysay There are a few ways you can do this. Check [**this little site**](http://www.coalmarch.com/blog/how-to-execute-javascript-based-on-screen-size-using-jquery), you can run Javascript function based on the window size. From here you could redirect the page to where you want to go or even load a page into an `iframe`. There will be more options then that so have a look around at the possibilities using JS. — Ruddy, Apr 24 '15 at 07:25
@Ruddy, thanks for editing and clarifying my question, appreciate it :) — youdoreallysay, Apr 24 '15 at 07:39
Check out [Media queries](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Media_queries), and specifically for [different devices](https://css-tricks.com/snippets/css/media-queries-for-standard-devices/). — Praxis Ashelin, Apr 24 '15 at 07:41
@youdoreallysay Not a problem, if you create another question try to make it as clear as you can and include some sort of code that is relevant to your question (your attempt at the problem is always a good start). — Ruddy, Apr 24 '15 at 07:41
On a sidenote, I don't believe that you would be unable to find an answer to your question after just 5 minutes of googling. Did you try to do some research before asking this question? [A similar question can be found here for example](http://stackoverflow.com/questions/6370690/media-queries-how-to-target-desktop-tablet-and-mobile) — Praxis Ashelin, Apr 24 '15 at 07:44

score 2 · Accepted Answer · answered Apr 24 '15 at 07:42

There is a way to do what you want with JS:

if(window.innerWidth >= 1920 && window.innerHeight >= 1080){
  // Show main page
}else{//if screen is not 1920x1080
  // Show a different page (different HTML and CSS)
}

But, a better way is to do this in CSS with an @media query.

@media (min-width: 300px) and (min-height: 200px) {
  /*CSS for main page*/
  .demo{
    background: gold;
  }
}
@media (max-width: 299px) and (max-height: 199px) {
  /*CSS for small page*/
  .demo{
    background: lightblue;
  }
}
.demo{
  padding: 10px;
  font: sans-serif;
  font-weight: 100;
  border-radius: 5px;
}

<p class='demo'>
If your code snippet window is 300px wide or less and 200px high or less this text's background will be lightblue. Otherwise it will be gold. You can still write CSS outside the media queries, just they'll apply to the element regardless of any media queries.
</p>

Also, if you wanted to use the JS, you should use

window.location.assign('bar/foo.html')

That is, in the if/else for window.innerWidth/Height.

marcel · Answer 2 · 2015-04-24T07:45:02.073

0

Here is an javascript example. It redirects to the new page if the monitor is smaller than 1920x1080. Include the code to the page for big screens (1920x1080).

if (window.innerHeight < 1080 && window.innerWidth < 1920) {
    window.location.href = 'path/to/new/page.html';
}

You could simply put the above code into <script></script> tags and put them in your the <head></head> section of your first page. So the code can execute before the DOM is ready.

EDIT: An other way would be to create an extra html page without conten, only with the below code inside it, which redirects to the wished site.

if (window.innerHeight < 1080 && window.innerWidth < 1920) {
    window.location.href = 'path/to/new/page.html';
} else {
    window.location.href = 'path/to/other/bigger/page.html';
}

edited Apr 24 '15 at 07:45

answered Apr 24 '15 at 07:28

marcel

2,967
1
16
25

Gotcha. Why isn't there an else statement? Is it because the code only states ONLY IF the screen dimension is 1920 x 1080? – youdoreallysay Apr 24 '15 at 07:38
Include the above code to the first page. For >1920x1080. The edit part would have an else. – marcel Apr 24 '15 at 07:44

Arjun · Answer 3 · 2015-04-24T07:30:51.293

-1

var source = 'html/htmlpage.cshtml';
if (screen.width >= 1920)
 source  = 'html/htmlpage1920.cshtml';
else if (screen.width <= 1024)
 source  = 'html/htmlpage1024.cshtml';
var script = document.createElement('script');
script.src = source;
var head = document.getElementsByTagName('head')[0];
head.appendChild(script);

edited Apr 24 '15 at 07:30

answered Apr 24 '15 at 07:21

Arjun

2,159
1
17
26

The question has changed, this is incorrect. -1 – Ruddy Apr 24 '15 at 07:21
@Ruddy . Now answer also changed. this will work – Arjun Apr 24 '15 at 07:32
@Arjun, Thanks for your answer! How about the height? – youdoreallysay Apr 24 '15 at 07:39
same as width , using screen.height . so finally screen.width >1920 and screen.height > 1000 – Arjun Apr 24 '15 at 10:11

Showing a page to 1920x1080 monitors only, and another page to the rest of the monitor dimensions

3 Answers3