Adaptive Layout doesn't resize to fit when Display Scale is not 100%

We are creating an adaptive CSS layout for varying resolutions as well as web, mobile, tablets, etc.

I notice that when I load the page with my Display Scale and Layout at 100%, it loads as designed.

But if I change my Display Scale to a different size, such as 125%, it doesn't resize it to fit, instead it just makes it larger and throws things off the size of the page.

Is there something we're missing in our CSS that accounts for the Display Scale?


Starr DuskkASP.NET VB.NET DeveloperAsked:
Who is Participating?
Brandon LyonSenior Frontend DeveloperCommented:
I tend to pick a few devices to support based on width.

Desktop > 1280
Laptop <= 1280 & > 1024
Tablet <= 1024 & > 720
Phone <= 720 & > 540
Mini-phone <= 540

Those are numbers I chose based on existing hardware for my usual customer base. Your customers might have different needs. You might want to add a few breakpoints or subtract some. For the end-user changing breakpoints could be a bit more visible and jumpy than you would like but the end-user doesn't usually resize their screen much after they start viewing a website. Check out Youtube as an example. Their breakpoints are fairly obvious but the card sizes don't change.

After that I generally vary a design based on the target widths. In-between each breakpoint the column widths might shrink or expand but some things might remain the same.

If the font-sizes are set as a vw unit then after a while you might need to change that multiplier so that the font doesn't get too small or too large.

Usually when something moves into responsive/adaptive screen widths I don't constrain the heights of objects.

A desktop layout might not have as many scrollable areas or wrapped content.
A laptop layout would take into account the smaller screen so there might be more scrollable or wrapped areas than the desktop and the columns might get skinnier.
A tablet layout could be mostly the same as the laptop layout but without a sidebar. The font-sizes might need to start shrinking depending on the design.
A phone layout would have decreased font-sizes and button sizes in order to make room for the content.
A mini-phone needs to start cutting corners drastically in order to get anything on the screen.

Once you make enough mobile/responsive websites you start to think of the size of components from the start. For example a card which appears in a list might only be 300px wide so that it will always fit on a mobile device without needing to be redesigned. A menu item or hover object probably would be similarly sized, under 300px. Your designs will start to take into account that "thing X might start to scroll" or "what does it look like when thing Y starts to wrap" (Again 300px is relative to existing hardware devices used by my user base and YRMV).
Brandon LyonSenior Frontend DeveloperCommented:
When you change the screen density it impacts how things on the screen will display.

It's hard to know what the problem is without sample code. We don't know what types of units you're using, what the media query conditions are, what sizes you are expecting, etc.

Some media queries are relative to screen density. Some units of measurement are absolute instead of relative (ex: cm). Some things scale and some don't.
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
I can provide a sample next week, but I just thought, based on your response above, someone would say for it to be adaptive when you increase the percentage be sure to use the X unit of measure or whatever, because it scales.

Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Brandon LyonSenior Frontend DeveloperCommented:
Updating the display scaling changes how many pixels the computer thinks are present on the screen.

If your screen is 1920x1080 but you change the scaling to 2x, then the web browser thinks there are 960x540 pixels available when using CSS px units.

Here is a good article about how units of measurement work in CSS.

If you use the following tag in your the head of your HTML then the browser will disallow zooming on touch devices and should set the browser window width to the device width (otherwise the two may vary):

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

Open in new window

Note all of this depends on vendors properly implementing specifications. A browser might not properly understand a screen density, hardware might not properly know or understand its dimensions and density leading to incorrect cm units, or the operating system might not report its screen density setting correctly. The units of measurement also depend on the type of medium being viewed (display vs print for example).

for it to be adaptive when you increase the percentage be sure to use the X unit of measure or whatever, because it scales.

Percent is measured relative to the parent container width. For example when you put something inside a div and set that div to be 1000px wide and tell the contents to be 50% then the contents will be 500px wide, regardless of viewport width. If the size of the parent container changes then the size of the 500px element will change as well. Note that the parent is always going to be 1000px, unless you use max-width or min-width. A common practice is to set a containing div to be 1000px wide AND max-width equal to 85vw so that the container can never be more than the width of the display for adaptive/responsive reasons (unless that is what you want to happen).

Other measurement related tools you can use are:
* CSS calc. For example: width: calc(100vw - 20px);
* SVG or font-face icon sets and imagery which scale with the display density (as opposed to png/jpg/gif).
* Grid or flexbox layouts which will automatically calculate widths based on the desired column count.
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
We are using the viewport as you suggested.

But we now have @media all with a max and min width setup for all the size options, so it is much better.

the height, width, margins, font sizes are all in vw or vh.

The only problem that remains is that it looks great, most of the time, but if I manually change the percentage, like 175% the elements get bigger, but the height of the boxes they are in remains the same, so some items don't fit in their height any longer.

Also if I grab the edge of the browser and manually resize it, it can get hinky here and there. Not horrible, but not perfect.

What is the modus operandi for dynamic layouts? Do you aim for perfection on every single possible pixel size when you slide the size of the browser around, or do you just set for several main sizes and the rest is good enough?

Do you have an example of one of those layout pages that shows the web browser, the tablet, and the phone and do all of them look great when you slide the size around, or only if you remain on that size?
Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
thank you so much for the advice. So you use vw and vh? That's what we are using.

Also, we found out yesterday we need to use responsive instead of adaptive. So we are looking into flexboxes as well.

Starr DuskkASP.NET VB.NET DeveloperAuthor Commented:
thanks so much for the advice!
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.