Adding viewport tag
No scale when rotate
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.
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.
- 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.