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: Notre mission et nos actions 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
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).
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.
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%
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.
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.
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).
I’m facing the exact same issue. I have a single page app, in which every section has min-height: 100vh; but apparently some users have their device scaling settings set to something different than 100%. On the setting above 100% (like 150%) sections’ heights get too small, and on the ones below it gets too large. Looks ugly. I’m so confused, should we not use vh anymore? and what do I use instead.
