Detect viewport width and link stylesheet with if statement

JavaScript
1

Hello,
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!

Regards,
Team 1504

2

You can’t do it using PHP, server-side languages process all their actions before the requested file gets downloaded by the end user therefore no information about the users PC will be received (apart from the IP address of course). There are only two ways you can perform such an action, the first is using JavaScript (bad idea for the many who have scripting disabled) or through CSS3 media queries (not supported in IE). If you want something cross browser that does the job and will work for everyone, you’re out of luck. The fact of the matter is, your design should be naturally flexible, not dependant on certain widths anyway.

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.

What if I added JavaScript that detected the viewport size because it is client side and then links a stylesheet accordingly… and also if I added mediaqueries. That way I would cover all the bases I could with this solution for now, correct?

4

I agree with Alex. PHP can’t detect a browser’s viewport dimensions.

And I agree that a page should look good (or at least OK) for those without javascript (or without CSS or images for that matter).

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.


<script type="text/javascript" src="http:// ... /yahoo-min.js"></script>
<script type="text/javascript" src="http:// ... /yuiloader-min.js"></script>
<script type="text/javascript" src="http:// ... /event-min.js"></script>
<script type="text/javascript" src="http:// ... /dom-min.js"></script>
<script type="text/javascript" src="http:// ... /connection-min.js"></script>

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.

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). :slight_smile:

PS: About 8% of all users can’t or refuse to make use of JavaScript, you can’t depend on it for the site to function else it’ll break :wink:

6

True, I agree with the not having the site based on JavaScript completley. There should always be the way to keep the integrity structure and function without javascript.

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
achieve.

Thanks for everything and I hope to hear back soon.
Regards,
Team1504

7

The way the web page looks should never depend on JavaScript. The correct language to use to define the appearance is CSS.

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.

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?

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;