If this is your first visit, please click the Sign Up now button to begin the process of creating your account so you can begin posting on our forums! The Sign Up process will only take up about a minute of two of your time.

Page 2 of 2 FirstFirst 1 2
Results 11 to 12 of 12
Like Tree5Likes

Thread: A problem with height around different browsers

  1. #11
    Junior Member
    Join Date
    Jan 2016
    Member #
    Quote Originally Posted by Ronald Roe View Post
    The viewport is measured in pixels. That's where resolution comes in. Oh, and here's the funny thing: pixels aren't all created the same. There are physical pixels, device pixels and CSS pixels. All of them are different, and vary by device, screen, browser and video hardware.

    There's a couple of ways to do this, if you must.

    A) Thinking more on it, it can be done with CSS. If you use vh units for heights and vw units for width, you can painstakingly make everything fit. And on smaller screen sizes, everything will be painfully tiny to read or will overflow the containers. You will have to use media queries to reconfigure the page based on size, device pixel ratio and orientation. Oh, and don't use px. Use em, en or rem units.

    B) JS is probably the better option, here, but will yield similar results. You need to grab the height and width of the viewport using these statements:
    var w = Math.max(document.documentElement.clientWidth, window.innerWidth || 0);
    var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0);
    Then, you'll need to use them to calculate the screen orientation. From there, you can calculate the size of everything, and when I say everything, I mean EVERYTHING. The font sizes, element heights, widths, padding, margins, whether there's multiple form elements on one line, how that's affected by height, width and orientation, and a slew of other things I'm probably forgetting to mention. Then, you need to apply all of those calculated sizes to the items. You'll run that on a window load event and you'll need to re-run it on a resize event so it recalculates and reapplies everything every time the user resizes their browser or changes the orientation of their device. Oh, and you'll need to also make sure nothing breaks when they zoom in because everything is way too small, so use em, en or rem units, not pixels.

    In fewer words, and as I originally said, it isn't a question of can. It's a question of should. You technically can do it...
    That's exactly what I am thinking, and to answer your question yes I should do it.
    the only problem with JavaScript is that I need to include the styles in the HTML page, not in a separate CSS file (at least as far as I know).


  3. #12
    Senior Member Ronald Roe's Avatar
    Join Date
    Mar 2011
    Oklahoma City
    Member #
    959 times
    I'm not sure why that's a problem. JS will apply the styles inline anyway.
    Ron Roe
    Web Developer
    "If every app were designed using the same design template, oh wait...Bootstrap."

Page 2 of 2 FirstFirst 1 2

Remove Ads

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
All times are GMT -6. The time now is 12:51 PM.
Powered by vBulletin® Version 4.2.3
Copyright © 2021 vBulletin Solutions, Inc. All rights reserved.
vBulletin Skin By: