SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Question detect viewport width and link stylesheet with if statement

    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. #2
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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. #3
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #4
    Programming Team silver trophybronze trophy
    Mittineague's Avatar
    Join Date
    Jul 2005
    Location
    West Springfield, Massachusetts
    Posts
    17,270
    Mentioned
    197 Post(s)
    Tagged
    3 Thread(s)
    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.

    HTML Code:
    <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. #5
    Follow: @AlexDawsonUK silver trophybronze trophy AlexDawson's Avatar
    Join Date
    Feb 2009
    Location
    England, UK
    Posts
    8,111
    Mentioned
    0 Post(s)
    Tagged
    1 Thread(s)
    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).

    PS: About 8&#37; 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

  6. #6
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #7
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,872
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    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 &#37; for the width to use within those limits us usually the most flexible.
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">

  8. #8
    SitePoint Guru team1504's Avatar
    Join Date
    May 2010
    Location
    Okemos, Michigan, USA
    Posts
    732
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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. #9
    Programming Since 1978 silver trophybronze trophy felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, NSW, Australia
    Posts
    16,872
    Mentioned
    25 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by team1504 View Post
    so width would be in px
    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;
    Stephen J Chapman

    javascriptexample.net, Book Reviews, follow me on Twitter
    HTML Help, CSS Help, JavaScript Help, PHP/mySQL Help, blog
    <input name="html5" type="text" required pattern="^$">


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •