▼
Streaming live at 10am (PST)

Issue with 100vh on windows displays that defaults to 150% resolution

Design help General
#1

Hi everyone,

I’m Max,
This is my first question on the forum. I’ve tried to find an answer everywhere but couldn’t find out.

I designed a website with a hero section of 100vh, it looks perfect as it should on my mac, taking up 100% of the view height. But I got complaints from windows users and realized that the recommended and default display resolution settings on windows is 150% (100% being too small for the majority, 1920x1080px display on the one I tested). The problem is, even though let’s say on chrome it is written to be zoomed at 100%, it is therefore in fact zoomed in to 150% and my 100vh doesn’t work anymore, the website looks pretty bad on these screens, that a majority seems to use. Is there a workaround? Have I done something wrong? I guess there must be a way? Most websites look pretty unprofessional zoomed in at 150% when not done purposefully to check something specifically before going back to 100%.
The website is: www.france-tourette.org
And here is the link to the read only: Link to designer

Also, this page: france-tourette with it’s 55vh size is messed up on screens with a display resolution of 150%, definitely not showing 55% of the view width anymore :confused:

Thanks a lot in advance for your help. And if you see other improvements in regards to use of responsive ways to help with typography that will be welcome, I mixed a bit of px, vh and % values here and there over the time as I tried to fix things. The whole page got a little complicated over the time. (for ie. If I check the website on chrome at 67% zoom to counteract the 150% display resolution, the fonts look thin compared to what I see on my mac or other devices).

A beautiful day to you all,
Max

#2

Live link does not work.

But what do you mean “recommended display resolution is 150%”? I’ve never heard about anything like that, and I’m on a Windows PC. Designing websites for 150% zoom sounds like a pain.

#3

Hello,
Thanks for your reply. Sorry, fixed the live link www.france-tourette.org.

I mean in the windows parameters, on display resolution settings, there are different options, on the one tested it was set to 150% (with recommended written next to it, what microsoft recommends therefore).

Can you check your display resolution settings and let me know the settings you see?
It is indeed a pain, especially since many just use native resolution of 100%

#4

I realize that the recommended 150% resolution are for the 1920x1080p display, but on 1440x900 for ie it is recommended 100%, with then the website would appear fine.
But it seems many viewers of that website use laptops that suggests 150% resolution, and they sent me screen shots, and it definitely looks crappy, no margin on the left for example, like the container would be full width.

#5

I’m using a 1080p monitor here and I’ve never done anything but 100%. I’ve never heard about 150% being the standard for 1080p. I don’t really understand what you mean about that to be honest. Pages looking weird at 150% zoom is pretty normal.

I’m guessing you mean that the main target for the site uses zoom, so then you need to redesign it so it looks good there I guess? Or add some kind of in-page resizing where you have more control.

#6

Thanks!
Actually, it depends on the screen, I checked on an asus 14inch laptop and with display resolution set to 1920x1080, the recommended size is 150% (and if set to 100%, everything looks very very tiny, that’s why it’s recommended and people leave it at that), therefore that person has everything showing zoomed 150%, I found workarounds for chrome tweaking in the parameters for that specific person, but everyone else (with the zoomed in display) going to the website will just see a zoomed in version of that website (and all others websites actually), which is a problem for all of us, especially when you design a hero section that is 100vh.
Check this image, windows recommends 150% display: Link to img

I don’t actually know the statistics of how many use 100% (the majority I hope), or 125% or 150%, but the thing is when it looks bad people start complaining. And they don’t realize it is on their end the issue. If I arrange the page for 150% zoomed screens, what happens to the others on 100%, I think I have to stick to using 100vh for people using their display the way they should… don’t you think?
I wish, chrome automatically detected that and showed everyone my hero section at 100vh (especially since they think they are watching it at 100% and therefore think it looks cropped and all weird).