Increase all content by 20% for all 1920×1080 browsers?

  • Increase all content by 20% for all 1920×1080 browsers?

    I am using a 14-inch 1920×1080 screen and I’ve noticed that newer ones have even higher resolutions. Nothing looks good this small and I’ve set my browser to zoom in to 120 % by default. In my newer designs I’m often using the Twenty Twenty Two and Twenty Twenty Four themes and when I do the designs on my default i.e. 1,2x resolution they look good, but when I zoom out to what should normally appear in front of the client, they don’t. Is there a way to force zoom-in to the browser of the client as well, and is that a good idea?

    If it is possible, it should probably be defined for certain resolutions only – as increasing to 120% on older, e.g. 1280×720 screens would probably look bad; but for newer, more pixel-dense screens, the increase should probably be even higher. How do we deal with so many, constantly increasing in terms of pixels resolutions?

Viewing 3 replies - 1 through 3 (of 3 total)

  • This could certainly be achieved with some customised CSS. However, I wonder whether this makes sense. If you have a very large screen, you don’t always use the browser in full screen. Many people use the width of the screen to view several windows at the same time. So it doesn’t matter for the website – it doesn’t have more space in the viewport just because the screen is larger. I would therefore reconsider this.

    Thread Starter wordzebra

    (@wordzebra)

    Hi @threadi

    Thank you for the answer!

    My thought was primarily that if you google most common resolutions, at the moment it seems to be 1920×1080 or 1920×1200. In other words, people who use regular laptops get a view with impractically small content area in the middle. Don’t they usually have their browsers in full screen?

    What if you have a higher resolution – like 2560×1664 – on a laptop (that is the case for MacBook Air M2 13 inch I just checked) – do you keep the browser as half the size of the screen, in spite of it being as small as 13 or 14 or even 15 or 16 inch?

    After determining whether it is a good idea or not, what would be the CSS code to achieve this with?

    You should not search for resolution (this is what you are more likely to search for when looking for a new monitor) but for viewport. This is the term for the dimensions in which a website is displayed on a screen.

    An example for CSS would be

    @media (min-width: 1500px) {
     body { transform: scale(1.5) }
    }

    However, as I said, it is rather unusual to use something like this.

Viewing 3 replies - 1 through 3 (of 3 total)
  • You must be logged in to reply to this topic.