CODEWITHSUNDEEP
javascriptcsshtmlzooming
BubbleTree
BubbleTree

Reputation: 606

How do websites make an element scale the same on all devices and scale on zoom?

Right now i am making all of my elements with a percent width and height so that they can scale the same regardless of the device. As an example, whether someone is viewing an input element on a 720p or 4k monitor, it should fit the same across the browser.

Now my problem is that i am trying to make my elements scale upon an increase or decrease in zoom(browser zoom:ctrl and +/-) but because i am using a percentage width and height, the element doesn't scale. Well actually i think when i zoom in the input gets smaller, i'm not sure why that is. Other websites when you zoom in their input gets bigger in width and height. When you zoom out the element gets smaller.

What is the proper way to go about doing this? Obviously it can be done since every site i visit, including stackoverflows elements(search input as an example) looks the same size upon viewing and scales in height and width upon zooming.

What i've tried:

  1. Using a fixed min-width and min-height but it's not exactly what i want. If the width/height percentage is higher than the fixed min-width/height then the element wont resize until the zoom % * the fixed min-width/height pixel count is greater. If the fixed min-width/height pixel count is higher than the width/height % set on the element, then the element will be the size of the fixed min-width/height and the element size wont look the same across all monitors.

  2. using a fixed pixel for the width/height will make the element resize upon zooming but it wont look the same across all monitors.

  3. Using a flexbox on the parent div "search" to make the child input "test" grow/shrink upon zooming. Doesn't seem to do anything.

NOTICE: don't try to zoom in without full viewing the code, otherwise it will make the input scale upon zooming as a result of stackoverflow's own code.

html, body {
    width: 100%;
    height: 100%;
    margin:0px;
}
div#maincontainer {
    height: 100%;
    width:100%;
    background-color: orange;
}
div#search {
    position: relative;
    top: 50%;
    margin:auto;
    height: 5%;
    width: 35%;
}
input#test {
    position: relative;
    width: 100%;
    height: 100%;
}
<div id="maincontainer">
    <div id="search">
        <input id="test" type="text" placeholder="TESTING" />
    </div>
</div>

Upvotes: 3

Views: 5461

Answers (1)

ghybs
ghybs

Reputation: 53185

The browser zooming (using "Ctrl and +/-") actually changes the value that font-size: 100%; (which is equivalent to font-size: 1em;) corresponds to. That is why the text inside your input element is scaled when using this zooming feature. But because the input element size does not change (see explanation below), it looks like the latter gets smaller... whereas in fact it is its inner text that becomes bigger.

As far as I understand, the idea was to give a chance to the visitor to read text (while possibly breaking the page layout), if for some reason they have difficulties with the text size the website designer had chosen.

In the case of the size of your input element, because you define it relatively to the size of its containers (using percentages), up to the body which has 100% of the view port, you are not giving it any chance to be scaled by this feature, but instead you make it dependent on the view port size. So if you do resize your view port (i.e. browser window), you will see your element size changing, but not its inner text. It may sound as what you were looking for at the beginning (rendering with the exact same proportions on different devices, actually on different view port sizes), but what today's websites do is actually a totally different technique.

What they do is called "Responsive Design", i.e. the CSS uses "media queries" that can detect the type of device, screen size (actually view port size), etc. These media queries act as conditional blocks for CSS rules. The typical use case is to render a big menu on a side when the screen is wide enough, but only a menu button when the screen is narrow.

You can also notice that they do not actually render in the exact same proportions depending on the view port size (which was what you wanted to do by using only percentage-based sizes). Most of the time, there is an empty space (on both sides in the case of StackOverflow) that fills the gap, while the content has the same size in pixels, until the view port size changes so much that it triggers a media query, which then applies a different set of CSS rules, possibly changing completely the page layout.

Another good practice is to use as much as possible sizes (but not necessarily positioning) in em units, which refer to the current font size. That way, when the visitor uses the browser zooming feature, these sizes will scale accordingly, not only the text. For your case, you could have defined the height of your input element as 1.5em for example, so that it is always 50% bigger than its inner text.

Finally, I encourage you to use the DOM and Style inspectors of Development Tools featured by most browsers (turn the Development Tools on by hitting F12). They usually also provide element pickers, which allow you to pinpoint an element on the page for which you want to see the exact DOM and applied styling rules. It is a very instructive and ludic way to learn how others design their websites.

Upvotes: 4

Related Questions