Screen resolution

#1 October 16th, 2006, 11:45 PM

Hi

I'm developing a webpage that needs to include a different stylesheet
depending on the screen resolution.

I know that I could read the resolution in javascript and then do some
sort of stylesheet switcher as part of the onload event but I would
rather link in the correct stylesheet for the resolution in the first
place.

Is there anyway of reading the screen resolution using PHP?

Please don't flame me about "screen resolution being useless as not
everyone browses in a maximised window". This is for intranet
application where I know the browser will be IE6 with javascript enabled
running in full screen mode and toolbars hidden. I also know the three
possible screen resolutions that it could be.
--
Steve Wright

#2 October 16th, 2006, 11:55 PM

>Please don't flame me about "screen resolution being useless as not

Quote:

>everyone browses in a maximised window". This is for intranet
>application where I know the browser will be IE6 with javascript enabled
>running in full screen mode and toolbars hidden. I also know the three
>possible screen resolutions that it could be.

Use code to translate the IP address of the workstation into the screen
resolution. Granted, this may require some manual collecting of data first.

#3 October 17th, 2006, 01:15 AM

On Mon, 16 Oct 2006 23:50:50 +0100, in comp.lang.php Steve Wright
<usenet@wrightnet.demon.co.uk>
<4RLhsRJKzANFFwgU@wrightnet.demon.co.ukwrote:

Quote:

>| Hi
>|
>| I'm developing a webpage that needs to include a different stylesheet
>| depending on the screen resolution.
>|
>| I know that I could read the resolution in javascript and then do some
>| sort of stylesheet switcher as part of the onload event but I would
>| rather link in the correct stylesheet for the resolution in the first
>| place.
>|
>| Is there anyway of reading the screen resolution using PHP?

Not really.

Quote:

>| Please don't flame me about "screen resolution being useless as not
>| everyone browses in a maximised window". This is for intranet
>| application where I know the browser will be IE6 with javascript enabled
>| running in full screen mode and toolbars hidden. I also know the three
>| possible screen resolutions that it could be.

Let the browser do the work (like it should) and let the user select
what option that they want.
-------------------------------------------------------------------
<head>
<link rel="stylesheet" type="text/css" href="small.css" title="small"
/>
<link rel="alternate stylesheet" type="text/css" href="medium.css"
title="medium" />
<link rel="alternate stylesheet" type="text/css" href="large.css"
title="large" />

<script type="text/javascript">
function setActiveStyleSheet(title)
{
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 &&
a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
}
</head>
<body>
<p><strong>Screen Size</strong><br />
<select name="lbCSS" id="lbCSS"
onchange="setActiveStyleSheet(this.value);">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
</select>
</body>
----------------------------------------------------------------------
If you want the appropriate css to be loaded each time then store the
value in a cookie and read/update this value.

ALternatively, you could use CSS floating layout. This will allow the
browser to automatically resize it's contents. You only need 1 CSS
file to manage the myriad of screen resolutions that are available.
---------------------------------------------------------------
jnorthau@yourpantsyahoo.com.au : Remove your pants to reply
---------------------------------------------------------------

#4 October 17th, 2006, 06:25 AM

Steve Wright wrote:

Quote:

Hi
>
I'm developing a webpage that needs to include a different stylesheet
depending on the screen resolution.
>
I know that I could read the resolution in javascript and then do some
sort of stylesheet switcher as part of the onload event but I would
rather link in the correct stylesheet for the resolution in the first
place.
>
Is there anyway of reading the screen resolution using PHP?

Nope. The use of document.write (circa 1990s) will work just as well
though.

<script>

var css = 'norm.css';

if(screen.availHeight 1024) {
css = 'big.css';
}
/* ... etc. ... */

document.write('<link rel="stylesheet" type="text/css" href="' + css +
'">');

</script>

#5 October 17th, 2006, 08:45 AM

In message <12j84ftipg84v92@corp.supernews.com>, Gordon Burditt
<gordonb.aa1wj@burditt.orgwrites

Quote:

>>Please don't flame me about "screen resolution being useless as not
>>everyone browses in a maximised window". This is for intranet
>>application where I know the browser will be IE6 with javascript enabled
>>running in full screen mode and toolbars hidden. I also know the three
>>possible screen resolutions that it could be.

>
>Use code to translate the IP address of the workstation into the screen
>resolution. Granted, this may require some manual collecting of data first.
>
>

Interesting idea, but we have dynamic IP addresses.
--
Steve Wright

#6 October 17th, 2006, 08:45 AM

In message <cg88j2t15godhdbdi6s4c62u0d42b6pqav@4ax.com>, Jeff North
<jnorthau@yahoo.com.auwrites

Quote:

>On Mon, 16 Oct 2006 23:50:50 +0100, in comp.lang.php Steve Wright
><usenet@wrightnet.demon.co.uk>
><4RLhsRJKzANFFwgU@wrightnet.demon.co.ukwrote:
>

Quote:

>>| Hi
>>|
>>| I'm developing a webpage that needs to include a different stylesheet
>>| depending on the screen resolution.
>>|
>>| I know that I could read the resolution in javascript and then do some
>>| sort of stylesheet switcher as part of the onload event but I would
>>| rather link in the correct stylesheet for the resolution in the first
>>| place.
>>|
>>| Is there anyway of reading the screen resolution using PHP?

>
>Not really.
>

Quote:

>>| Please don't flame me about "screen resolution being useless as not
>>| everyone browses in a maximised window". This is for intranet
>>| application where I know the browser will be IE6 with javascript enabled
>>| running in full screen mode and toolbars hidden. I also know the three
>>| possible screen resolutions that it could be.

>
>Let the browser do the work (like it should) and let the user select
>what option that they want.
>-------------------------------------------------------------------
><head>
><link rel="stylesheet" type="text/css" href="small.css" title="small"
>/>
><link rel="alternate stylesheet" type="text/css" href="medium.css"
>title="medium" />
><link rel="alternate stylesheet" type="text/css" href="large.css"
>title="large" />
>
><script type="text/javascript">
>function setActiveStyleSheet(title)
>{
var i, a, main;
for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
if(a.getAttribute("rel").indexOf("style") != -1 &&
>a.getAttribute("title")) {
a.disabled = true;
if(a.getAttribute("title") == title) a.disabled = false;
}
}
>}
></head>
><body>
><p><strong>Screen Size</strong><br />
><select name="lbCSS" id="lbCSS"
>onchange="setActiveStyleSheet(this.value);">
<option value="small">Small</option>
<option value="medium">Medium</option>
<option value="large">Large</option>
></select>
></body>
>----------------------------------------------------------------------
>If you want the appropriate css to be loaded each time then store the
>value in a cookie and read/update this value.
>
>ALternatively, you could use CSS floating layout. This will allow the
>browser to automatically resize it's contents. You only need 1 CSS
>file to manage the myriad of screen resolutions that are available.
>---------------------------------------------------------------
>jnorthau@yourpantsyahoo.com.au : Remove your pants to reply
>---------------------------------------------------------------

That's the fall back option I thought of. However its not just the text
I'm scaling, its the graphics as well. I'm using PHP and the GD
extension to generate the six images. These images consume most of the
space on the screen hence the need to scale them correctly.
--
Steve Wright

#7 October 17th, 2006, 12:35 PM

On Tue, 17 Oct 2006 08:51:08 +0100, in comp.lang.php Steve Wright
<usenet@wrightnet.demon.co.uk>
<Kbo62POstINFFwnJ@wrightnet.demon.co.ukwrote:

Quote:

>| In message <cg88j2t15godhdbdi6s4c62u0d42b6pqav@4ax.com>, Jeff North
>| <jnorthau@yahoo.com.auwrites
>| >On Mon, 16 Oct 2006 23:50:50 +0100, in comp.lang.php Steve Wright
>| ><usenet@wrightnet.demon.co.uk>
>| ><4RLhsRJKzANFFwgU@wrightnet.demon.co.ukwrote:
>| >
>| >>| Hi
>| >>|
>| >>| I'm developing a webpage that needs to include a different stylesheet
>| >>| depending on the screen resolution.
>| >>|
>| >>| I know that I could read the resolution in javascript and then do some
>| >>| sort of stylesheet switcher as part of the onload event but I would
>| >>| rather link in the correct stylesheet for the resolution in the first
>| >>| place.
>| >>|
>| >>| Is there anyway of reading the screen resolution using PHP?
>| >
>| >Not really.
>| >
>| >>| Please don't flame me about "screen resolution being useless as not
>| >>| everyone browses in a maximised window". This is for intranet
>| >>| application where I know the browser will be IE6 with javascript enabled
>| >>| running in full screen mode and toolbars hidden. I also know the three
>| >>| possible screen resolutions that it could be.
>| >
>| >Let the browser do the work (like it should) and let the user select
>| >what option that they want.
>| >-------------------------------------------------------------------
>| ><head>
>| ><link rel="stylesheet" type="text/css" href="small.css" title="small"
>| >/>
>| ><link rel="alternate stylesheet" type="text/css" href="medium.css"
>| >title="medium" />
>| ><link rel="alternate stylesheet" type="text/css" href="large.css"
>| >title="large" />
>| >
>| ><script type="text/javascript">
>| >function setActiveStyleSheet(title)
>| >{
>| var i, a, main;
>| for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
>| if(a.getAttribute("rel").indexOf("style") != -1 &&
>| >a.getAttribute("title")) {
>| a.disabled = true;
>| if(a.getAttribute("title") == title) a.disabled = false;
>| }
>| }
>| >}
>| ></head>
>| ><body>
>| ><p><strong>Screen Size</strong><br />
>| ><select name="lbCSS" id="lbCSS"
>| >onchange="setActiveStyleSheet(this.value);">
>| <option value="small">Small</option>
>| <option value="medium">Medium</option>
>| <option value="large">Large</option>
>| ></select>
>| ></body>
>| >----------------------------------------------------------------------
>| >If you want the appropriate css to be loaded each time then store the
>| >value in a cookie and read/update this value.
>| >
>| >ALternatively, you could use CSS floating layout. This will allow the
>| >browser to automatically resize it's contents. You only need 1 CSS
>| >file to manage the myriad of screen resolutions that are available.
>|
>| That's the fall back option I thought of. However its not just the text
>| I'm scaling, its the graphics as well. I'm using PHP and the GD
>| extension to generate the six images. These images consume most of the
>| space on the screen hence the need to scale them correctly.

Use percentages on the width/height.
<img src="xyz.gif" width="100%" height="75%" />
---------------------------------------------------------------
jnorthau@yourpantsyahoo.com.au : Remove your pants to reply
---------------------------------------------------------------

#8 October 17th, 2006, 06:45 PM

Why not JavaScript AND PHP:

at the very top of the page, put:
<?php
if( !isset($_GET['x']) || !isset($_GET['y']) ) {
echo '<script type="text/javascript">';
echo 'window.location="THIS_PAGE.php?x=" + screen.availWidth + "&y="
+ screen.availHeight';
echo '</script>';
die();
}

// now write the rest of your page, with $_GET['x'] and $_GET['y'] as
the resolution.

?>

this code will refresh the page instantly with the screen width &
height.

Jeff North wrote:

Quote:

On Tue, 17 Oct 2006 08:51:08 +0100, in comp.lang.php Steve Wright
<usenet@wrightnet.demon.co.uk>
<Kbo62POstINFFwnJ@wrightnet.demon.co.ukwrote:
>

Quote:

| In message <cg88j2t15godhdbdi6s4c62u0d42b6pqav@4ax.com>, Jeff North
| <jnorthau@yahoo.com.auwrites
| >On Mon, 16 Oct 2006 23:50:50 +0100, in comp.lang.php Steve Wright
| ><usenet@wrightnet.demon.co.uk>
| ><4RLhsRJKzANFFwgU@wrightnet.demon.co.ukwrote:
| >
| >>| Hi
| >>|
| >>| I'm developing a webpage that needs to include a different stylesheet
| >>| depending on the screen resolution.
| >>|
| >>| I know that I could read the resolution in javascript and then do some
| >>| sort of stylesheet switcher as part of the onload event but I would
| >>| rather link in the correct stylesheet for the resolution in the first
| >>| place.
| >>|
| >>| Is there anyway of reading the screen resolution using PHP?
| >
| >Not really.
| >
| >>| Please don't flame me about "screen resolution being useless as not
| >>| everyone browses in a maximised window". This is for intranet
| >>| application where I know the browser will be IE6 with javascript enabled
| >>| running in full screen mode and toolbars hidden. I also know the three
| >>| possible screen resolutions that it could be.
| >
| >Let the browser do the work (like it should) and let the user select
| >what option that they want.
| >-------------------------------------------------------------------
| ><head>
| ><link rel="stylesheet" type="text/css" href="small.css" title="small"
| >/>
| ><link rel="alternate stylesheet" type="text/css" href="medium.css"
| >title="medium" />
| ><link rel="alternate stylesheet" type="text/css" href="large.css"
| >title="large" />
| >
| ><script type="text/javascript">
| >function setActiveStyleSheet(title)
| >{
| var i, a, main;
| for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
| if(a.getAttribute("rel").indexOf("style") != -1 &&
| >a.getAttribute("title")) {
| a.disabled = true;
| if(a.getAttribute("title") == title) a.disabled = false;
| }
| }
| >}
| ></head>
| ><body>
| ><p><strong>Screen Size</strong><br />
| ><select name="lbCSS" id="lbCSS"
| >onchange="setActiveStyleSheet(this.value);">
| <option value="small">Small</option>
| <option value="medium">Medium</option>
| <option value="large">Large</option>
| ></select>
| ></body>
| >----------------------------------------------------------------------
| >If you want the appropriate css to be loaded each time then store the
| >value in a cookie and read/update this value.
| >
| >ALternatively, you could use CSS floating layout. This will allow the
| >browser to automatically resize it's contents. You only need 1 CSS
| >file to manage the myriad of screen resolutions that are available.
|
| That's the fall back option I thought of. However its not just the text
| I'm scaling, its the graphics as well. I'm using PHP and the GD
| extension to generate the six images. These images consume most of the
| space on the screen hence the need to scale them correctly.

>
Use percentages on the width/height.
<img src="xyz.gif" width="100%" height="75%" />
---------------------------------------------------------------
jnorthau@yourpantsyahoo.com.au : Remove your pants to reply
---------------------------------------------------------------

#9 October 18th, 2006, 03:05 AM

On 17 Oct 2006 11:03:20 -0700, in comp.lang.php "maven22"
<mattvenables@gmail.com>
<1161108200.259078.82270@f16g2000cwb.googlegroups. comwrote:

Quote:

>| Jeff North wrote:
>| On Tue, 17 Oct 2006 08:51:08 +0100, in comp.lang.php Steve Wright
>| <usenet@wrightnet.demon.co.uk>
>| <Kbo62POstINFFwnJ@wrightnet.demon.co.ukwrote:
>| >
>| | In message <cg88j2t15godhdbdi6s4c62u0d42b6pqav@4ax.com>, Jeff North
>| | <jnorthau@yahoo.com.auwrites
>| | >On Mon, 16 Oct 2006 23:50:50 +0100, in comp.lang.php Steve Wright
>| | ><usenet@wrightnet.demon.co.uk>
>| | ><4RLhsRJKzANFFwgU@wrightnet.demon.co.ukwrote:
>| | >
>| | >>| Hi
>| | >>|
>| | >>| I'm developing a webpage that needs to include a different stylesheet
>| | >>| depending on the screen resolution.
>| | >>|
>| | >>| I know that I could read the resolution in javascript and then do some
>| | >>| sort of stylesheet switcher as part of the onload event but I would
>| | >>| rather link in the correct stylesheet for the resolution in the first
>| | >>| place.
>| | >>|
>| | >>| Is there anyway of reading the screen resolution using PHP?
>| | >
>| | >Not really.
>| | >
>| | >>| Please don't flame me about "screen resolution being useless as not
>| | >>| everyone browses in a maximised window". This is for intranet
>| | >>| application where I know the browser will be IE6 with javascript enabled
>| | >>| running in full screen mode and toolbars hidden. I also know the three
>| | >>| possible screen resolutions that it could be.
>| | >
>| | >Let the browser do the work (like it should) and let the user select
>| | >what option that they want.
>| | >-------------------------------------------------------------------
>| | ><head>
>| | ><link rel="stylesheet" type="text/css" href="small.css" title="small"
>| | >/>
>| | ><link rel="alternate stylesheet" type="text/css" href="medium.css"
>| | >title="medium" />
>| | ><link rel="alternate stylesheet" type="text/css" href="large.css"
>| | >title="large" />
>| | >
>| | ><script type="text/javascript">
>| | >function setActiveStyleSheet(title)
>| | >{
>| | var i, a, main;
>| | for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
>| | if(a.getAttribute("rel").indexOf("style") != -1 &&
>| | >a.getAttribute("title")) {
>| | a.disabled = true;
>| | if(a.getAttribute("title") == title) a.disabled = false;
>| | }
>| | }
>| | >}
>| | ></head>
>| | ><body>
>| | ><p><strong>Screen Size</strong><br />
>| | ><select name="lbCSS" id="lbCSS"
>| | >onchange="setActiveStyleSheet(this.value);">
>| | <option value="small">Small</option>
>| | <option value="medium">Medium</option>
>| | <option value="large">Large</option>
>| | ></select>
>| | ></body>
>| | >----------------------------------------------------------------------
>| | >If you want the appropriate css to be loaded each time then store the
>| | >value in a cookie and read/update this value.
>| | >
>| | >ALternatively, you could use CSS floating layout. This will allow the
>| | >browser to automatically resize it's contents. You only need 1 CSS
>| | >file to manage the myriad of screen resolutions that are available.
>| |
>| | That's the fall back option I thought of. However its not just the text
>| | I'm scaling, its the graphics as well. I'm using PHP and the GD
>| | extension to generate the six images. These images consume most of the
>| | space on the screen hence the need to scale them correctly.
>| >
>| Use percentages on the width/height.
>| <img src="xyz.gif" width="100%" height="75%" />
>|
>| Why not JavaScript AND PHP:
>|
>| at the very top of the page, put:
>| <?php
>| if( !isset($_GET['x']) || !isset($_GET['y']) ) {
>| echo '<script type="text/javascript">';
>| echo 'window.location="THIS_PAGE.php?x=" + screen.availWidth + "&y="
>| + screen.availHeight';
>| echo '</script>';
>| die();
>| }
>|
>| // now write the rest of your page, with $_GET['x'] and $_GET['y'] as
>| the resolution.
>|
>| ?>
>|
>| this code will refresh the page instantly with the screen width &
>| height.

Well there's no right way or wrong way, IMNSHO.

The problem I see with your code is that you are assuming that the
person has their browser open full screen, this may or maynot be the
case.

Not all browsers implement clientWidth/Height so your code would need
some additional 'sniffing' to work out the values (not to mention that
the data is passed in the url and therefore you'd need to error
detection on these value i.e. index.php?x=apples&y=oranges).
---------------------------------------------------------------
jnorthau@yourpantsyahoo.com.au : Remove your pants to reply
---------------------------------------------------------------

#10 October 18th, 2006, 10:05 PM

Of course I didn't include error detection because it's just for
concept - I'm not writing his code for him. And, he stated this at the
beginning "This is for intranet
application where I know the browser will be IE6 with javascript
enabled
running in full screen mode and toolbars hidden"

Jeff North wrote:

Quote:

On 17 Oct 2006 11:03:20 -0700, in comp.lang.php "maven22"
<mattvenables@gmail.com>
<1161108200.259078.82270@f16g2000cwb.googlegroups. comwrote:
>

Quote:

| Jeff North wrote:
| On Tue, 17 Oct 2006 08:51:08 +0100, in comp.lang.php Steve Wright
| <usenet@wrightnet.demon.co.uk>
| <Kbo62POstINFFwnJ@wrightnet.demon.co.ukwrote:
| >
| | In message <cg88j2t15godhdbdi6s4c62u0d42b6pqav@4ax.com>, Jeff North
| | <jnorthau@yahoo.com.auwrites
| | >On Mon, 16 Oct 2006 23:50:50 +0100, in comp.lang.php Steve Wright
| | ><usenet@wrightnet.demon.co.uk>
| | ><4RLhsRJKzANFFwgU@wrightnet.demon.co.ukwrote:
| | >
| | >>| Hi
| | >>|
| | >>| I'm developing a webpage that needs to include a different stylesheet
| | >>| depending on the screen resolution.
| | >>|
| | >>| I know that I could read the resolution in javascript and then do some
| | >>| sort of stylesheet switcher as part of the onload event but I would
| | >>| rather link in the correct stylesheet for the resolution in the first
| | >>| place.
| | >>|
| | >>| Is there anyway of reading the screen resolution using PHP?
| | >
| | >Not really.
| | >
| | >>| Please don't flame me about "screen resolution being useless as not
| | >>| everyone browses in a maximised window". This is for intranet
| | >>| application where I know the browser will be IE6 with javascript enabled
| | >>| running in full screen mode and toolbars hidden. I also know the three
| | >>| possible screen resolutions that it could be.
| | >
| | >Let the browser do the work (like it should) and let the user select
| | >what option that they want.
| | >-------------------------------------------------------------------
| | ><head>
| | ><link rel="stylesheet" type="text/css" href="small.css" title="small"
| | >/>
| | ><link rel="alternate stylesheet" type="text/css" href="medium.css"
| | >title="medium" />
| | ><link rel="alternate stylesheet" type="text/css" href="large.css"
| | >title="large" />
| | >
| | ><script type="text/javascript">
| | >function setActiveStyleSheet(title)
| | >{
| | var i, a, main;
| | for(i=0; (a = document.getElementsByTagName("link")[i]); i++) {
| | if(a.getAttribute("rel").indexOf("style") != -1 &&
| | >a.getAttribute("title")) {
| | a.disabled = true;
| | if(a.getAttribute("title") == title) a.disabled = false;
| | }
| | }
| | >}
| | ></head>
| | ><body>
| | ><p><strong>Screen Size</strong><br />
| | ><select name="lbCSS" id="lbCSS"
| | >onchange="setActiveStyleSheet(this.value);">
| | <option value="small">Small</option>
| | <option value="medium">Medium</option>
| | <option value="large">Large</option>
| | ></select>
| | ></body>
| | >----------------------------------------------------------------------
| | >If you want the appropriate css to be loaded each time then store the
| | >value in a cookie and read/update this value.
| | >
| | >ALternatively, you could use CSS floating layout. This will allow the
| | >browser to automatically resize it's contents. You only need 1 CSS
| | >file to manage the myriad of screen resolutions that are available.
| |
| | That's the fall back option I thought of. However its not just the text
| | I'm scaling, its the graphics as well. I'm using PHP and the GD
| | extension to generate the six images. These images consume most of the
| | space on the screen hence the need to scale them correctly.
| >
| Use percentages on the width/height.
| <img src="xyz.gif" width="100%" height="75%" />
|
| Why not JavaScript AND PHP:
|
| at the very top of the page, put:
| <?php
| if( !isset($_GET['x']) || !isset($_GET['y']) ) {
| echo '<script type="text/javascript">';
| echo 'window.location="THIS_PAGE.php?x=" + screen.availWidth + "&y="
| + screen.availHeight';
| echo '</script>';
| die();
| }
|
| // now write the rest of your page, with $_GET['x'] and $_GET['y'] as
| the resolution.
|
| ?>
|
| this code will refresh the page instantly with the screen width &
| height.

>
Well there's no right way or wrong way, IMNSHO.
>
The problem I see with your code is that you are assuming that the
person has their browser open full screen, this may or maynot be the
case.
>
Not all browsers implement clientWidth/Height so your code would need
some additional 'sniffing' to work out the values (not to mention that
the data is passed in the url and therefore you'd need to error
detection on these value i.e. index.php?x=apples&y=oranges).
---------------------------------------------------------------
jnorthau@yourpantsyahoo.com.au : Remove your pants to reply
---------------------------------------------------------------

Popular Articles

What is Bytes?