-
Posts
-
How do people design responsive web pages that take into account operating system level display scale?
Recently discovered that Windows 10 is setting a recommended scaling factor of 150% on many laptops, which scales everything until it looks like you’re on a very low resolution monitorSee for example on our webpage:
100%
150%
Is there any way that the website will always be displayed with zero zoom (100%)?
Or how do you guys handle this?Cheers
DennisHi,
Thank you for the inquiry.
Responsiveness of the site is currently determined by the existing css media queries, and the same ones can still be used to adjust the layout of the site on a scaled monitor. So for a monitor with a 1920×1080 display resolution, scaled up to 150%. the effective resolution will be less than 1300px, so the following css media query should work.
@media only screen and (max-width: 1366px) { /* Add your Mobile Styles here */ body { display: none !important; } }Best regards,
IsmaelWouldn’t that mean i neet to adjust for every resolution and sclae level?
i.e. 1920 – 150%; 125%; 1440 -150%; 125% etc?
Or am i understanding it wrong?Thank you
Hi,
Thank you for the update.
The theme already contains responsive styling for smaller screens, so you do not have to do anything. The screenshot of the site scaled to 150% actually looks fine, again because of the existing styles for smaller screens or because of the css media queries from the theme, but you could use additional css media queries to adjust the style of the page if you think that it is not supposed to look that way.
Best regards,
Ismael
- You must be logged in to reply to this topic.