Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Register Log in
  • Congratulations gkittelson on being selected by the Tek-Tips community for having the most helpful posts in the forums last week. Way to Go!

PHP to determine resolution and switch css 1

Status
Not open for further replies.
Antonimo

Antonimo

Technical User
Jun 26, 2003
86
SE
I would like to use a php script that determines the screen resolution or browser size of a visitor to the site and then deliver a php/html page that links to a particular css based on the result.

I have found an example of how to deliver the css based on the type and version of the browser, but not screen size or resolution.

I would prefer to do this (it is possible) than to use a javascript approach.

Is anybody able to assist me with this enquiry?

 
Sort by date Sort by votes
PHP can not determine resolution of the screen since PHP runs on the server and has no knowledge of the final output device.

Instead of designing your site for specific resolutions, try to make a fluid design that is based on percentages instead of fixed units.

Ken
 
Upvote 0 Downvote
I am in fact creating a "liquid" design that can be resized and still look good, but the purpose of the php would be to restrict the expansion of the page on screen resolutions larger than 1024 (ie 1200 +).

If php is unable to achieve this (because I guess it would have to obtain the resolution informtion from a javascript), is there any other way?
 
Upvote 0 Downvote
the normal way of doing it is for php to output the page with some javascript onload code that returns the script with the resolution information to the server if the browser resolution is not what the served page expects.

the script can then adjust the css or display a notice to the user as the coder wishes.
 
Upvote 0 Downvote
I guess that if most people have javascript "on" then it will work and presumably it will use a default css for the few who don't..

I can css but I know zilch about php / javascript.

What would this php / javascript look like? Is this a big, "ask"?

 
Upvote 0 Downvote
Depending on your layout you may just be able to set the max width of your page with CSS.

Code: 
body { max-width:800px; }

That will work in Firefox and other "nice" browsers.
For IE you will need to use either Javascript or an IE only Conditional statement.

Code: 
width:expression(document.body.clientWidth < 800? "800px": "auto" );

Have a go with those. The exact usage depends on your specific layout as you may have to do some creative thinking on how your page is structured.

Foamcow Heavy Industries - Web design and ranting
Toccoa Games - Day of Defeat gaming community
Target Marketing Communications - Advertising, Direct Marketing and Public Relations
"I'm making time
 
Upvote 0 Downvote
Thanks for the answers...

max-width seems to be the solution for my immediate challenge.

I would prefer to design it only for Firefox et al, but I have to think about the others too :)
 
Upvote 0 Downvote
basically something like this should do it. caveat - i haven't tested this and i've proven time and time again that i'm pretty lousy at javascript. still this looks simple enough...


Code: 
<html>
<head>

<?
$maxheight = 600;
$maxwidth=800;

if (isset($_POST['resolutionreset']))
{
  $stylesheet = "revised_stylesheet.css";
  $maxheight = 768; //new max height to stop endless cycles
  $maxwidth = 1024; //new max width to stop endless cycles
}
else
{
  $stylesheet = "defaultstylesheet.css";
}

//if you want more refinement than this use a switch statement instead
?>
<link href="file://<?=$stylesheet?>" rel="stylesheet" type="text/css" />

</head>
<body>
<form id="resolutionform" method="post" action="<?=$_SERVER['PHP_SELF']?>">
<input type="hidden" name="height" id="height" value="" />
<input type="hidden" name="width" id="width" value="" />
<input type="hidden" name="resolutionreset" id="resolutionreset" value="" />
</form>
<script type="text/javascript">
var height = window.screen.availHeight;
var width = window.screen.availWidth;
var trigger = false;
if (height > <?=$maxheight?> )
{
	document.getElementById("height").value = height;
	trigger = true;
}
if (width > <?=$maxwidth?>)
{	
	document.getElementById("width").value = width;
	trigger = true;
}
if (trigger)
{
	document.getElementById("resolutionform").submit();
}
</script>
Rest of html goes here
</body>
</html>
 
Upvote 0 Downvote
Status
Not open for further replies.

Similar threads

cdlvj
  • Question
PHP Debugging
Replies
1
Views
277
cdlvj
cdlvj
W
  • Locked
  • Question
how to send checked row data in php
Replies
0
Views
134
wiltang2004
W
R
  • Locked
  • Question
How Can I Use MySQL To Send Data To An Email
Replies
1
Views
373
Chris Miller
Chris Miller
P
  • Locked
  • Question
JPgraph - How to stop a line graph from dropping to zero?
Replies
2
Views
437
Chris Miller
Chris Miller
Mandy_crw
  • Locked
  • Question
How to send sms in PHP using usb gsm modem?
Replies
1
Views
407
vishvajit
vishvajit

Part and Inventory Search

Sponsor

Back
Top