Hi, I have developed a website using Fireworks + Dreamweaver and website is for 1024X768 pixels. Now I want , it detects the browser and resolution of the user and if user resolution is 800X600 it shows a web page of 800X600 . i have developed in both resolutions. please guide me.

Recommended Answers

All 17 Replies

Hi there, it can't be done solely with php, you need javascript to pull the actual resolution initially, but after that you can store it in a cookie and use php to access it
Put this script on your home page

<script language="javascript">
window.location.href = "resolution.php?width=" + screen.width + "&height=" + screen.height;
</script>

And put this script into a file called resolution.php

<?php
$width = $_get['width'];
$height = $_get['height'];

echo "You are using a $width x $height screen resolution";
// And set them into cookies as well.
//And then redirect to the page of the correct resolution
?>

Adatapost, I have used your code but its just showing message , You are forwarded to 1027X768.htm but its not redirecting. Please guide me with example. I save a page with name 1027X768.htm also but no benefit.

Member Avatar for diafol

Just a thought:

Have you developed two css files or completely different webpages for these resolutions?

The first option is the easiest to deal with. You just use js redirect if a cookie doesn't exist, which will create a cookie and read the right css file into the page. The cookie now firmly planted in your store will continue to serve up the correct css file, unless js detects a change in resolution. This is a common feature that can be used with css-switching.

I have developed 2 seperate pages , both have different resolution. please guide.

please guide me. I really want to know.
I have 2 pages. both are same but resolution is different.
Page1: 800X600
Page2: 1024X768

So when user Resolution is 800X600 its shows page1 else page 2. Is it possible?

please guide me. I really want to know.
I have 2 pages. both are same but resolution is different.
Page1: 800X600
Page2: 1024X768

So when user Resolution is 800X600 its shows page1 else page 2. Is it possible?

screenRes.js

switch(screen.width) {
 	case 640: goToPage('640x480.htm'); break;
 	case 720: goToPage('720x480.htm'); break;
 	case 800: goToPage('800.htm'); break;
 	case 848: goToPage('848x480.htm'); break;
 	case 1024: goToPage('1024.htm'); break;
 	case 1152: goToPage('1152x864.htm'); break;
 	case 1280: goToPage('1280x1024.htm'); break;
 	case 1600: goToPage('1600x1200.htm'); break;
 	default : goToPage('800x600.htm'); break;
}
function goToPage(url) {
   open(url,"_self");
}

index.htm

<html>
 <head>
<script type="text/javascript" src="screenRes.js"></script>
  </head>
<body>
  ...
</body>

Create two files named 800.htm & 1024.htm or change .js content.

in JS can i give name like main.html or main.php?

Thanks. My problem solved now. Thanks. Thanks. Adatapost.

I need something simillar but I need to show div block depend of resolution.. so I need somehing like this

<?php
if browser_resolution_small {
    // div block for browser resolution 1900*800
} else {
    // div block for browser resolution smaller then 1900 * 800
}
?>

but ofcoirse I will use first this script

    <script language="javascript">
    window.location.href = "resolution.php?width=" + screen.width + "&height=" + screen.height;
    </script>

You have already create a website in fireworks and Dreamweaver and which is in 1024x768 pixels. As per the website pixels concern this is best but you have faced sone problems on the other browsers. For that you have to set the property of Ajax that might be useful for you.

My idea was to create with this script variable.. and than use it with PHP.. but problem is that I can not found how to this work...

Member Avatar for diafol

Have a look at responsive web design - this simply put, revolves around media queries and some js. Have a look at Twitter Bootstrap for an example: http://twitter.github.com/bootstrap/scaffolding.html#responsive

PHP is done and dusted when it leaves the server, so it doesn't have a way of knowing about any changes to screen size/res. You could use ajax, but IMO, that's a round-trip to the server for just layout - unless you're serving different data that is.

Thanks @diafol .. this is great replay.. and I need exactly what you say "need to serving different data" and try to find best solution.. so I need like I say before

    <?php
    if browser_resolution_small {
    // one type of data
    } else {
    // another type of data for big resolution
    }
    ?>

so I need to pull different data but I do not want to create all different template for mobile version, you know, one theme for desktop and second theme for mobile... because everything else can be done with css and media css syntax.. only need to find how to create this part of code...

Member Avatar for diafol

OK - one question - do you want ajax refresh of data on window resize? For example if you have say a 1000x800 - full data display, but then you resize to say 400x800 - should the content change? Or are you setting a static size on page load, and no matter what the user does to the window, the same data persists?

Thanks @diafol .. this is great replay.. and I need exactly what you say "need to serving different data" and try to find best solution.. so I need like I say before

    <?php
    if browser_resolution_small {
    // one type of data
    } else {
    // another type of data for big resolution
    }
    ?>

so I need to pull different data but I do not want to create all different template for mobile version, you know, one theme for desktop and second theme for mobile... because everything else can be done with css and media css syntax.. only need to find how to create this part of code...

Sorry.. here is the new discussion... Click Here

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.