CSS Conditional Elements, XHTML

Question

Ok guys, this is a tricky one... Pay close attention!

I have a website with 2 pages index.html & about.html.
I built these pages to work at all screen resolutions 1024x768 and higher.
Before the cliche "make it scale-able with percentages not pixels in the css" I did to some degree but the lowest resolution it works well at is 1024x768 because it is my graphic design portfolio (I feel justice won't be served at any resolution lower than that!)
I also have a missing.html page in the directory in-case someone follows a bad link!
I was wondering is it possible to make a "I'm sorry this page only displays in resolutions of 1024x768 and higher!" page to pop-up when someone with a lower resolution tries to go to both the index and about pages? 6 I was thinking along the lines of the IE CSS conditional element but not for browsers just for resolutions. (a conditional statement to spawn new page due to low resolution!)
I just want a new .html page to spawn for people with resolutions under 1024x768 (I know the website would need some kind of detection but no idea how to implement it!)
I apologize for being so anal-retentive and numbering my issue the way I did, any help would be greatly appreciated! Elaborate as much as possible!

Anal retentiveness is not a problem for developers like us. By the way, with filenames like that, it's most likely not real XHTML. — Mr Lister
– Mr Lister, Commented Apr 26, 2013 at 11:06

Joe Ratzer · Accepted Answer · 2013-04-26 11:04:09Z

4

@media (max-width: 1024px) { ... }

Inside your pixel-specific query you can make a div, with the "I'm sorry..." message, visible.

Bear in mind that getting the monitor size via generic JavaScript might not reflect the size of the actual browser window - media queries will.

answered Apr 26, 2013 at 11:04

Joe Ratzer

18.6k3 gold badges40 silver badges52 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Tommi Halonen · Accepted Answer · 2013-04-26 11:05:03Z

1

Well, you can detect screen resolution with javascript!

var width = window.innerWidth || document.body.clientWidth;
var height = window.innerHeight || document.body.clientHeight;

if(width < 1024 || height < 768) {
    // screen is too small, redirect to small.html
    location.href = 'small.html';
}

answered Apr 26, 2013 at 11:05

Tommi Halonen

2481 silver badge7 bronze badges

1 Comment

Tommi Halonen Over a year ago

Joe R gave you a modern solution also!

user2323454 · Accepted Answer · 2013-04-26 22:21:48Z

0

So would the css query or js work better? I am going for the most responsive, fluid, functional ui/ux build that I can! Whichever targets better, most quickly implemented, etc! Would using both cause conflictions?

edited Apr 26, 2013 at 22:21

answered Apr 26, 2013 at 22:16

user2323454

11 bronze badge

Collectives™ on Stack Overflow

CSS Conditional Elements, XHTML

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related