Fit to height in Android Chrome

HTML & CSS
5

I just downloaded the Android emulator (in android studio) and I can see the google play button is cut off. However the element called ‘googlelogo’ is in exactly the right place but just doesn’t match with the background image.

It’s your background image that gets stretched in android so I would suggest that if you remove the google play image from the container background image and instead apply it directly to the googlelogo div then it will show in the right place. Of course the background of the container will still be too tall but it wont be an issue as such and android users won’t notice the grass is missing.

EDIT:

I just remembered a very old thread I posted in which mentioned a problem with background-size in Android. The thread was a few years old but thought it worth a try.

Adding the code above to the demo I get these results in the android emulator.

android
android392×2000 121 KB

.container {
	position: relative;
 	width: calc(100vh * 0.563);
	height: 100%;
	margin: auto;
	background-image: url(https://www.inmatrix.com/temp/pikapaint/img/bg.jpg);
	background-size:100%;
	background-repeat: no-repeat;
	-webkit-background-size: 100%;
}

The top of the image is your existing code (except I removed some invalid css but has no bearing on this issue) and the bottom part of the image is what happens when I add -webkit-background-size:100%. This seems to cure the problem unless I’ve missed something important.

1 Like