Results 1 to 5 of 5

Thread: Determining Viewport Size (Device) Before Output To Browser

  1. #1
    IBM Midrange Veteran Poddys's Avatar
    Join Date
    Jun 2011
    Location
    Southampton
    Posts
    109
    Rep Power
    352

    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.

  2. # 666
    Circuit advertisement
    Join Date
    Aug 1965
    Location
    Yakutsk, Russia
    Posts
    1,000,000
     

  3. #2
    Experienced Forum Member
    Join Date
    Sep 2012
    Location
    Milwaukee, WI
    Posts
    684
    Rep Power
    1718

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

  4. #3
    IBM Midrange Veteran Poddys's Avatar
    Join Date
    Jun 2011
    Location
    Southampton
    Posts
    109
    Rep Power
    352

    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.

  5. #4
    Experienced Forum Member
    Join Date
    Sep 2012
    Location
    Milwaukee, WI
    Posts
    684
    Rep Power
    1718

    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.

  6. #5
    IBM Midrange Veteran Poddys's Avatar
    Join Date
    Jun 2011
    Location
    Southampton
    Posts
    109
    Rep Power
    352

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

    That might work, thanks Scott.

  7. # 666
    Circuit advertisement
    Join Date
    Aug 1965
    Location
    Yakutsk, Russia
    Posts
    1,000,000
     

Facebook Comments


Similar Threads

  1. Determining if a JOBD is in use.
    By JayNak in forum Iseries System administration
    Replies: 6
    Last Post: August 29th, 2012, 07:53 AM
  2. Replies: 2
    Last Post: December 21st, 2011, 04:49 PM
  3. Replies: 2
    Last Post: May 24th, 2011, 11:44 AM
  4. Determining the first day & Last day of Month
    By dcutaia in forum /Free format
    Replies: 6
    Last Post: September 19th, 2007, 09:26 AM

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
  •