Got a message from one of our internal users today complaining that the TOC wasn't displaying for the help site. They are on a Mac with a 13.3 inch monitor at 2560 x 1600 resolution with the browser set at 100% zoom.
I've been doing all my testing on Windows with a 1920 x 1200 monitor set at 150% scale. I need to exceed 100% for the side out position settings to kick in.
My question is this, should I tweak the Tablet Breakpoint in the Responsive Output Settings? If so, to what?
Thanks.
Responsive Output Settings - breakpoints question
-
David Skoglund
- Propeller Head
- Posts: 14
- Joined: Wed Dec 07, 2022 1:37 pm
-
David Skoglund
- Propeller Head
- Posts: 14
- Joined: Wed Dec 07, 2022 1:37 pm
Re: Responsive Output Settings - breakpoints question
Experimenting with the "Use device width media queries" setting. Maybe this is what I was looking for?
Re: Responsive Output Settings - breakpoints question
Not sure if "Use device width media queries" will help. Also, device-width in CSS is on the 'deprecated' list so is probably best avoided.
A 13.3 inch screen is small - it's the size of a large tablet or small laptop.
So what you're seeing is kind of what I'd expect, and I'd guess this user might often see 'tablet' views of websites.
TLDR explanation...
Small screens with high resolutions (tablets, phones, laptops) usually have a device pixel ratio that's higher than 1:1, whereas your desktop monitor will have a device pixel ratio of 1:1.
The device pixel ratio (also called CSS pixel ratio) is the ratio of - (actual pixels on the screen) : (pixels used by the browser for CSS)
This ratio is reported by the device itself, and might be around 2:1 on tablets and nearer 3:1 on phones.
This site shows your device's effective screen size and ratio: https://screenresolutiontest.com/
The browser uses this device pixel ratio to calculate a "CSS pixel" screen size that's going to be used when it does anything with CSS.
So if the Mac has a device pixel ratio of 2:1, then the browser treats the "CSS pixel" screen size as 1280x800 instead of 2560x1600. So if your desktop/tablet breakpoint is 1280 or lower, the Mac will not reach the desktop breakpoint. That would also match what you see on your monitor at 150% zoom as 1920 / 1.5 = 1280.
So lowering the breakpoint from 1280 should fix this, although other devices like tablets might start showing the desktop view.
(There's no facility in Flare to use more complex media queries that would incorporate the device pixel ratio.)
Note that browsers on phones/tablets usually have a "Desktop site" setting, so you can display the pixel ratio at 1:1. That helps when using old non-responsive websites, although the screen can be impossible to read at 1:1.
A 13.3 inch screen is small - it's the size of a large tablet or small laptop.
So what you're seeing is kind of what I'd expect, and I'd guess this user might often see 'tablet' views of websites.
TLDR explanation...
Small screens with high resolutions (tablets, phones, laptops) usually have a device pixel ratio that's higher than 1:1, whereas your desktop monitor will have a device pixel ratio of 1:1.
The device pixel ratio (also called CSS pixel ratio) is the ratio of - (actual pixels on the screen) : (pixels used by the browser for CSS)
This ratio is reported by the device itself, and might be around 2:1 on tablets and nearer 3:1 on phones.
This site shows your device's effective screen size and ratio: https://screenresolutiontest.com/
The browser uses this device pixel ratio to calculate a "CSS pixel" screen size that's going to be used when it does anything with CSS.
So if the Mac has a device pixel ratio of 2:1, then the browser treats the "CSS pixel" screen size as 1280x800 instead of 2560x1600. So if your desktop/tablet breakpoint is 1280 or lower, the Mac will not reach the desktop breakpoint. That would also match what you see on your monitor at 150% zoom as 1920 / 1.5 = 1280.
So lowering the breakpoint from 1280 should fix this, although other devices like tablets might start showing the desktop view.
(There's no facility in Flare to use more complex media queries that would incorporate the device pixel ratio.)
Note that browsers on phones/tablets usually have a "Desktop site" setting, so you can display the pixel ratio at 1:1. That helps when using old non-responsive websites, although the screen can be impossible to read at 1:1.
-
David Skoglund
- Propeller Head
- Posts: 14
- Joined: Wed Dec 07, 2022 1:37 pm
Re: Responsive Output Settings - breakpoints question
Thank you. That is valuable information.
I did a test build with "Use device width media queries" enabled. When I zoom in on the browser on my machine it never resets to the tablet configuration. I haven't heard back from the person who raised the issue with me.
I'll play with the breakpoint settings since you pointed out that option is deprecated.
I have old eyes. I don't know how anyone can use a 13 inch laptop as their only display,
I did a test build with "Use device width media queries" enabled. When I zoom in on the browser on my machine it never resets to the tablet configuration. I haven't heard back from the person who raised the issue with me.
I'll play with the breakpoint settings since you pointed out that option is deprecated.
I have old eyes. I don't know how anyone can use a 13 inch laptop as their only display,