Silent_Dog
asked on
Detect browser screen resolution on the fly using AJAX?
Looks like the widescreen monitors will become more and more popular. For a 20" widescreen monitor, the default resolution is 1680 wide. This will affect how the web site look. My pony tail marketing people pointed out that my pages are too wide spread after looking at my 20" monitor.
My site are written in php. I am wondering if it is possible to send the screen resolution back to the server using AJAX before the body of the pages are sent. I have no idea about java script nor understand much about AJAX. I dislike the idea about relocating a page in order to send back the resolution. I will have to accept this if AJAX can not be used for this purpose. I need to consider the end users using non-java browser such as lynx.
My site are written in php. I am wondering if it is possible to send the screen resolution back to the server using AJAX before the body of the pages are sent. I have no idea about java script nor understand much about AJAX. I dislike the idea about relocating a page in order to send back the resolution. I will have to accept this if AJAX can not be used for this purpose. I need to consider the end users using non-java browser such as lynx.
ASKER
I like the idea of switching css file better than AJAX!
I understand AJAX uses java, what I need to do is having the page displayed as full width when the browser does not have javascript support.
Your example switches the css files. I need to give a default css file if the browser does not support javascript. Any idea?
I understand AJAX uses java, what I need to do is having the page displayed as full width when the browser does not have javascript support.
Your example switches the css files. I need to give a default css file if the browser does not support javascript. Any idea?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
<NOSCRIPT>
<LINK HREF="Wide.css" REL="stylesheet" TYPE="text/css">
</NOSCRIPT>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
if (screen && screen.width && screen.width < 1600)
document.write('<LINK HREF="Normal.css" REL="stylesheet" TYPE="text/css">');
//-->
</SCRIPT>
<LINK HREF="Wide.css" REL="stylesheet" TYPE="text/css">
</NOSCRIPT>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
if (screen && screen.width && screen.width < 1600)
document.write('<LINK HREF="Normal.css" REL="stylesheet" TYPE="text/css">');
//-->
</SCRIPT>
mplungjan, that won't work. Wide.css will never be applied if they have 1600px and up and JavaScript disabled.
In order to use NOSCRIPT, do this:
<NOSCRIPT>
<LINK HREF="Wide.css" REL="stylesheet" TYPE="text/css">
</NOSCRIPT>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
if (screen && screen.width && screen.width >= 1600)
document.write('<LINK HREF="Wide.css" REL="stylesheet" TYPE="text/css">');
else
document.write('<LINK HREF="Normal.css" REL="stylesheet" TYPE="text/css">');
//-->
</SCRIPT>
Note that I haven't tested NOSCRIPT inside the HEAD tag or if this would work everywhere (or at all).
In order to use NOSCRIPT, do this:
<NOSCRIPT>
<LINK HREF="Wide.css" REL="stylesheet" TYPE="text/css">
</NOSCRIPT>
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
if (screen && screen.width && screen.width >= 1600)
document.write('<LINK HREF="Wide.css" REL="stylesheet" TYPE="text/css">');
else
document.write('<LINK HREF="Normal.css" REL="stylesheet" TYPE="text/css">');
//-->
</SCRIPT>
Note that I haven't tested NOSCRIPT inside the HEAD tag or if this would work everywhere (or at all).
ASKER
Thank you. I confirm the above method works.
I do however have a problem associated with it. This perhaps belongs to another thread, however it is still related to this topic. So any information will be appreciated.
My pages are marked up as "XHTML 1.0 Transitional". Firstly the validator complains about the <noscript> tag. I think I can get away by removing this. Secondly it appears using "document.write" does not seem to be the best thing with XHTML docs despite it works as web pages.
What will be the best practice? Would putting the script into a file solve the whole problem? What I might do is to include an in-line css style for the page width instead of switching the entire css file.
I do however have a problem associated with it. This perhaps belongs to another thread, however it is still related to this topic. So any information will be appreciated.
My pages are marked up as "XHTML 1.0 Transitional". Firstly the validator complains about the <noscript> tag. I think I can get away by removing this. Secondly it appears using "document.write" does not seem to be the best thing with XHTML docs despite it works as web pages.
What will be the best practice? Would putting the script into a file solve the whole problem? What I might do is to include an in-line css style for the page width instead of switching the entire css file.
" it appears using "document.write" does not seem to be the best thing with XHTML docs "
Appears how?
Appears how?
ASKER
It works when the pages are sent as text/html, it would fail when it is served as: application/xhtml+xml
Please see
http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite
Please see
http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite
Did anyone actually test that?
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
if (screen && screen.width && screen.width >= 1600)
location.href = 'MyScript.php?Wide=1';
//-->
</SCRIPT>
It's not ideal at all, but much better than a trip back to the server using Ajax. Keep in mind that Ajax uses JavaScript, so JavaScript is required either way.
If at all possible, format your page using CSS and use JavaScript to decide what css file to use like this (again in HEAD block, and instead of the block above):
<SCRIPT LANGUAGE="JavaScript" TYPE="text/javascript">
<!--
if (screen && screen.width && screen.width >= 1600)
document.write('<LINK HREF="Wide.css" REL="stylesheet" TYPE="text/css">');
else
document.write('<LINK HREF="Normal.css" REL="stylesheet" TYPE="text/css">');
//-->
</SCRIPT>