bug(Breakpoints): Incorrect upper boundary lead to wrong match result

[tomrlq]

Reproduction

Use StackBlitz to reproduce your issue: https://components-issue-r4nh9s.stackblitz.io

Steps to reproduce:

1. change browser size to 960 * 600
2. apply following code

this.breakpointObserver.observe(Breakpoints.Handset).subscribe((result) => {
    this.isHandset = result.matches;
});

Expected Behavior

matching result should be false

Actual Behavior

matching result is true

Environment

• Angular: 5, 6, 7, 8, 9, 10
• CDK/Material: 5, 6, 7, 8, 9, 10
• Browser(s): Chrome, Firefox, Safari, Edge
• Operating System: Windows, macOS, Ubuntu

How to fix

If we take a look at Bootstrap's source code, we can see that, their upper boundary is using numbers like xxx.98, while in Angular Material, the upper boundary is using numbers like xxx.99, and this lead to the bug.
I take size 960*600 as example, in browser, if you match something like

'(max-width: 599.99px) and (orientation: portrait), ' +
 '(max-width: 959.99px) and (orientation: landscape)'

browser will give you true, only if you match something like

'(max-width: 599.98px) and (orientation: portrait), ' +
 '(max-width: 959.98px) and (orientation: landscape)'

browser will give you false

[jelbourn]

Confirmed that .98 falls under the boundary and .99 counts as over. Feel free to send a PR!

[tomrlq]

#20866
I have just submitted a PR, thanks