team1504 — 2010-06-12T20:33:21-04:00 — #1
Could someone help me write a PHP script that detects the user's viewport width, and I am guessing stores this in a variable, then checks if it is less than or equal to 1024px using an if statement and if so attaches a certain stylesheet, lets say alternative.CSS, but in the else part of the statement; therefore, if the viewport width is greater than 1024px, it attaches or links default.css
Thanks for your help, I apologise— im new to PHP, in advance.
I hope someone can help me write this script!
alexdawson — 2010-06-12T20:40:14-04:00 — #2
team1504 — 2010-06-12T20:52:56-04:00 — #3
Oh man that sucks.... how do PHP scripts that detect mobile devices or and redirect to the mobile version of the site?
Or how facebook redirects to a specific page almost exactly to what device your using, iPhone, Wii, android, etc..?
Sorry if it sounded like I am saying that in a rude tone, I am not— its just I am frustrated and a little bummed out.
mittineague — 2010-06-12T21:03:05-04:00 — #4
I agree with Alex. PHP can't detect a browser's viewport dimensions.
But I see nothing wrong with making a page better for those that have their browsers set up to allow it.
About a year and a half ago I did an experiment to see what viewport dimensions my site visitors had. I used the YUI library, but I imagine others have similar capability.
then refenced my custom js file and called the functions. The info was passed to a PHP file that put it into a db. The results:
I imagine you could do something similar. I don't know about using it to reference a special CSS file, but you could manipulate the DOM and change style values.
alexdawson — 2010-06-12T21:06:34-04:00 — #5
What they do is they read the request header (for the browser value) and then try and decide based on the name whether it's a mobile device... they have to-do it for EVERY one of the hundreds of thousands of devices and as such, all of those scripts are SERIOUSLY flawed in that their miss a number of devices, require heavy maintenance, slow down the page loading and force people to be pushed to a mobile friendly site they may not want. If you're building a mobile friendly version of a site, just link to it and let people know it exists, redirection scripts and trying to mobile friendly your existing site isn't going to be a solid solution. Mobile devices are as bad as HTML email clients in that they don't follow the standards properly and thereby the only want to cover all bases is to have a desktop version of the site (at the usual www) and then have an independant mobile version (I use m.yoursite.com as people recognise the m subdomain to be mobile as a convention).
team1504 — 2010-06-13T09:45:37-04:00 — #6
My site looks okay in viewport/ resolutions with a width of 1024 or less. Lets see, the first and third posts of thos thread started
The former explains my problem and the latter has screenshots with context of what im trying to
Thanks for everything and I hope to hear back soon.
felgall — 2010-06-13T18:41:41-04:00 — #7
The width, min-width, and max-width properties are what you use to define the width the page content is to display in. A minimum specified in px, a maximum in em with a % for the width to use within those limits us usually the most flexible.
team1504 — 2010-06-13T18:49:58-04:00 — #8
Okay I haven't used min and max width before.
so width would be in px
min-width would be set to a value in px too.
But how would I code the max-width having the percentage to use in limits?
Setting the max-width to a value in em would be as simple as max-width:800em;
But how do I also add a percentage value and set limits of allowable use is what I think im trying to ask?
felgall — 2010-06-13T19:35:03-04:00 — #9
If width is in px you don't need min-width or max-width because with a width in px it never changes regardless of viewport size or font size.
Your width should be specified as a % eg. width:95%; That way the width changes based on the browser viewport size. You then specify a minimum width in pixels to prevent the content getting too narrow eg. min-width:450px; and a maximum width iin em to prevent the lines of text becoming too long for easy reading eg. max-width:25em;