1 decade ago by SteveW
This bug is only applicable for devices that have a screen size >720px, and when the screen returns a pixel density that pushes the returned width from the media query over 720px wide.
For example when a user with a screen size of 768px x 1280px and a pixel density of 2.24 navigates to html5-benchark.com, the container will not scale to fit the window but rather take the width specified in the css and multiple it by the device pixel density (720px x 2.24 = 1440 px) thus the container will be bigger then the actual screen. This is because the page is checking for the device width but also has a fixed meta viewport width specified as well.
CSS of page
@media (min-device-width: 720px)
#canvasContainer {
border-left: 1px solid #3B3D42;
border-right: 1px solid #3B3D42;
width: 720px;
height: 480px;
}
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; user-scalable=0;">
For example when a user with a screen size of 768px x 1280px and a pixel density of 2.24 navigates to html5-benchark.com, the container will not scale to fit the window but rather take the width specified in the css and multiple it by the device pixel density (720px x 2.24 = 1440 px) thus the container will be bigger then the actual screen. This is because the page is checking for the device width but also has a fixed meta viewport width specified as well.
CSS of page
@media (min-device-width: 720px)
#canvasContainer {
border-left: 1px solid #3B3D42;
border-right: 1px solid #3B3D42;
width: 720px;
height: 480px;
}
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1; user-scalable=0;">