Device size in JavaScript and media breakpoint in CSS
Adding viewport tag
No scale when rotate
Device Width
@media device-width breakpoint
Browser Width
@media width breakpoint
This width is the screen.width in JavaScript. It is equivalent to the @media device-width in CSS.
Note: There is something special for the iOS's Device Width. For details please check the last test item at the bottom of this page.
The width is tested by the window.matchMedia("(max-device-width: ??px)") function in JavaScript. It is equivalent to the @media max-device-width in CSS.
The width is gotten by Math.max(document.documentElement.clientWidth, window.innerWidth) in JavaScript. In most cases it is the same value of the @media max-width in CSS.
But sometimes it is not the save value. For details please refer to the second last test item at the bottom of this page.
The width is tested by the window.matchMedia("(max-width: ??px)") function in JavaScript. It is equivalent to the @media max-width in CSS.
This lab is designed to test:
- Your mobile browser size and media query breakpoint;
-
Mobile devices will render the page at the correct pixel resolution without zooming out content when viewport tag is added:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />Note: iPhone/iPad has a bug: when mobile orientation is changed the viewport may zoom-in and not fit any more. You will not see the issue in this testing page as it contains the fix script. - Mobile device will get a different browser size if viewport meta tag is not added;
- Mobile device will get a different media query breakpoint if viewport meta tag is not added;
- Media breakpoints will be affected by zooming when testing with desktop browsers, but it will not be affected when testing with mobile devices.
- Device size retrieved by JavaScript screen.width and screen.height is equivalent to the CSS @media device-width/height.
- In most cases browser size calculated by JavaScript Math.max(document.documentElement.clientWidth, window.innerWidth) is equivalent to the CSS @media (max/min)-(width/height). But if testing with mobile devices, and when the page contains content that is more than 100% of the screen width(e.g. it contains a <div style="width:1024px;">...</div> element), then they may not be the same when the page is zoomed out.
- If you are testing this page with iPhone/iPad, you will see the device width and @media device-width is always the width in portrait orientation even if you have rotated device to landscape orientation. With other devices, its device-width changes depending on its orientation.