Determining Client Screen width for use in PHP

[Pawka]

You can autosubmit form when page is loaded by this way:

<script type="text/javascript">
        window.onload  = function() {
                var form = document.getElementById('form1');
                form.submit();
        }
</script>


<form id="form1" action="http://www.somepage.com/" method="POST">
        <input type="text" name="name" />
        <input type="submit" />
</form>

You even don't need show input elements by setting type as "hidden". When you get screen size in php script, simply set values to seesion for later use. If you thinking about scripting with JavaScript, I strongly suggest try jQuery or script.aculo.us as I mention before. Scripting would be much easier.

[Verminox]

You must realise though that even if you send the width details to PHP, the next page that loads will be optimized for that screen width, but the user may simple resize the window or change the resolution and your objective might fail. Just keep this in mind when designing the application. Maybe you need to go back and rethink the design goals. Maybe you might find clearner solutions to optimizing the page for different screens, such as CSS.

[brennydoogles]

You must realise though that even if you send the width details to PHP, the next page that loads will be optimized for that screen width, but the user may simple resize the window or change the resolution and your objective might fail. Just keep this in mind when designing the application. Maybe you need to go back and rethink the design goals. Maybe you might find clearner solutions to optimizing the page for different screens, such as CSS.

CSS is part of the solution. I have developed several stylesheets that are optimized for different screen widths, but I would also like to write a fumction that will add in line breaks every so often for smaller screens (mainly for use when I have multiple images that would be wider side-to-side than their parent element on narrow screens)does that make sense?

[MacAnthony]

You must realise though that even if you send the width details to PHP, the next page that loads will be optimized for that screen width, but the user may simple resize the window or change the resolution and your objective might fail. Just keep this in mind when designing the application. Maybe you need to go back and rethink the design goals. Maybe you might find clearner solutions to optimizing the page for different screens, such as CSS.

Which is why I first recommended doing it client side with something like jquery. Not sure the types of modifications you would be making, but they might be just as easy/easier to do client side.

[MacAnthony]

...but I would also like to write a fumction that will add in line breaks every so often for smaller screens (mainly for use when I have multiple images that would be wider side-to-side than their parent element on narrow screens)does that make sense?

Line breaks are a poor solution for adjusting space as different operating systems will use different fonts having different metrics and different browsers will render them differently anyway.

I would just make a blank div with css and change it's height/width to the dimensions you want. It would be way more accurate.

[brennydoogles]

Line breaks are a poor solution for adjusting space as different operating systems will use different fonts having different metrics and different browsers will render them differently anyway.

I would just make a blank div with css and change it's height/width to the dimensions you want. It would be way more accurate.

I have the images in question inside a div right now, but on smaller resolutions they are actually floating outside of the div. What I would like to do is have the br tag in one place on larger resolutions, and in another on the smaller resolutions (since I have the images arranged in a grid-esque format right now). Does that make more sense?


--Edit--

The moving br tags are temporary; I mean to eventually replace the entire thing with a good looking image gallery, but until I roll that out I want it to not look like crap on smaller monitors. I hope to replace the whole thing within a month, but it is a good learning experience until I can.

[Verminox]

CSS is part of the solution. I have developed several stylesheets that are optimized for different screen widths, but I would also like to write a fumction that will add in line breaks every so often for smaller screens (mainly for use when I have multiple images that would be wider side-to-side than their parent element on narrow screens)does that make sense?

By using CSS you should be able to optimize your divs for all screen resolutions (PC, Mac) which would resize/overflow/float in such a way that the images appear wider horizontally on big resolutions and if the resolution is small or the window is resized then they would appear one below the other or whatever.

If you want to optimize for PDAs, Cell Phones, etc. you can just use the handheld media type to add a whole different stylesheet to the elements that you wanna change to optimize for narrow screens.

Client side code to manipulate visual display while workable is messy, often buggy and not well supported (especially on handhelds), not guarenteed to work always, and too much reliance on the script could mean that a non-scriptable browser looks even uglier than your original design, so you've lost the whole point.

Using PHP to manipulate visuals is definitely not the way to go, PHP is meant for server side processing, and you shouldn't be using any logic to handle client devices (screens) or rely on results from a script (which is a bad idea for reasons mentioned above).

If CSS can't do it for you now, write some client side script that only enhances the experience by resizing elements for narrow displays, but make sure it still works (i.e, the page looks decent) when scripting is not available.