sponsored links

Collapse

Announcement

Collapse
No announcement yet.

Determining Viewport Size (Device) Before Output To Browser

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Determining Viewport Size (Device) Before Output To Browser

    I have a program (Websmart ILE but could be any really) that creates a web page with a Sidebar that has a Search Box, under that the Search Results, and in the main body of the window a Google Map. The whole thing is written to use Bootstrap and will resize automagically to fit the window size (responsive layout).

    What we want to do is to change the format so that if the page is being viewed on a Phone, there is no Sidebar, the Search is in the main Window, the Map underneath, and the search results underneath that.

    Bootstrap CSS Classes do allow you to specify which Divs are displayed based on device type (Phone, Tablet, Desktop) and you would normally output some code twice, specifying under which conditions each type would be displayed.

    In this case it's not going to be easy to do that, and I would have to duplicate more or less the whole screen.

    I wondered if when the program loaded there was a way to check the viewport size (or device) it was called from and going to be displayed on, so that only the correct version of the screen could be output.

    Any thoughts please? I hope I explained it clearly enough.
    Poddys Rambles On

  • #2
    Re: Determining Viewport Size (Device) Before Output To Browser

    Viewport size is not static. It can change... for example, in Windows you can easily change the size of the browser window while the application screen is being displayed.

    CSS3 media queries allow you to dynamically adjust the screen size by using different elements of the style sheet (or different style sheets completely) based on ranges of widths/heights of the viewport size. This is a good approach -- but I'm not familiar with "Bootstrap", and do not know how it differs.
    Code:
    @media only screen and (max-device-width: 480px) {
    
      ... CSS code for small screens, here...   set proper font size, element widths, hide other elements, etc...
    
    }
    It's also possible to retrieve the viewport size in Javascript
    Code:
    var viewportWidth  = document.documentElement.clientWidth;
    var viewportHeight = document.documentElement.clientHeight;
    You could potentially have JS logic to add/remove elements, resize things, etc.

    However, I don't think there's a way to know the screen size in advance of displaying the page. You need to have logic like one of the above methods running on the client -- because screen size is not communicated from the client to the server (and even if it were, it could change on-the-fly.)

    Another approach might be to set the width/top/left attributes of screen elements based on a percentage. This would allow you to create screens that expand to the size of the viewport (whatever it might happen to be.)

    Comment


    • #3
      Re: Determining Viewport Size (Device) Before Output To Browser

      Thanks Scott.

      Bootstrap (from Twitter) does have CSS Classes that allow you to turn on/off divs depending on device type, which make it very easy.

      Other than outputting a blank screen which uses Javascript to determine viewport size and then calling the program back, I think this is going to be too hard to do. I believe you are right, only on the browser/client side can you determine the device/window size.

      Maybe I could store whether they are using a phone or not as a cookie. That might work.
      Poddys Rambles On

      Comment


      • #4
        Re: Determining Viewport Size (Device) Before Output To Browser

        If "device type" (as opposed to screen size) is acceptable, it should be possible to figure it out from the user-agent that's sent with the HTTP request. You'd need to maintain a file with a list of devices and which ones would get the special screen size -- this would be a bit of a hassle -- but is possible.

        Comment


        • #5
          Re: Determining Viewport Size (Device) Before Output To Browser

          That might work, thanks Scott.
          Poddys Rambles On

          Comment

          sponsored links

          Collapse

          Working...
          X