Fit to height in Android Chrome

HTML & CSS
1

I’m trying to get this page displayed at maximum height at 16:9 ratio. It works fine in all browsers except in android chrome browser where the bottom is cropped.
Here’s the link to the page:
https://www.inmatrix.com/temp/pikapaint/index6.html
You can see it fits perfectly in desktop.
Here’s how it looks on Andriod Chrome:

720×1280 182 KB

You can see the bottom is cropped.

I want the page to be displayed at full height in Android chrome.

Please help.

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body{
height: 100%;
}	

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

#embedboxbg {
position: absolute;
background-color: #0f3d59;
width: 93.7%;
height: 45.73%;
opacity: 0.85;
left: 3.15%;
top: 15.44%;
filter: alpha(opacity=85); /* For IE8 and earlier */
}

.embedded_image {
position: relative;
width: 100%;
height: 100%;
}

.embedded_image_hyperlink {
position: absolute;
object-fit: contain;

width: 87.4%;
height: 42.2%;
top: 17.2%;
left: 6.3%;
margin-left: auto;
margin-right: auto;
}

.banner {
position: absolute;
width: 93.7%;
height: 21.66%;
bottom: 15.4%;
left: 3.15%;
}

.bannerbox {
position: absolute;
background-color: #227099;
width: 100%;
height: 100%;
display: block;
margin-left: auto;
margin-right: auto;
opacity: 0.85;
filter: alpha(opacity=85); For IE8 and earlier */
}

.googlelogo{
position: absolute;
width: 22%;
height: 12.5%;
bottom: 1.3%;
left: 3.15%;
}

</style>
<title>Share page</title>
</head>
<body style="margin:0; pbannerding:0;"  bgcolor="#313131">
     <div class="container">
         <div id="embedboxbg"></div>
     <div class="embedded_image">
    <a href="https://pikapaint.com/downlobanner.jpg">	      
    <img class="embedded_image_hyperlink" src="img/embedded_image.png"/> 
    </a>    
     </div>	 
       <div class="banner">
       <div class="bannerbox"></div>	    
       </div>	 
            <div class="googlelogo" onclick="location.href='https://play.google.com/store/apps/details?id=com.embarcbannerero.PIKAPAINT';" style="cursor: pointer;">
    </div>
       </div>
</body>
</html>
2

Thank you for posting the working page (code). It would be helpful if the links to the images worked. Yes, I could post a probable solution, but I would rather work with the actual image in the page. Is this a fluid layout or are breakpoints used?

3

I haven’t used any breakpoints as of now, i just want to get it working in android chrome because that’s the only browser it doesn’t display correctly but the goal is to have the layout displayed in all browsers correctly. The entire layout is scaled proportionally(16:9 ratio). The height of the layout should fit the browser, which i have set it to 100%.
I updated the html that now links to the image.
<a href="https://www.inmatrix.com/temp/pikapaint/img/embedded_image.png ">

4

I believe the problem is explained here:

The URL bar takes up space and if you scroll it disappears and then your page will probably fit.

I don’t have an android device to test but it seems to sound like the problem you have.

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
6

Thank you for the help. I tested the demo and It works perfectly fine now in Andriod chrome but if you notice the background image isn’t scaled proportionally, it looks squeezed. At full height the width should be less in your sample image. See below screenshot of your demo in my phone, I’ve highlighted in red to show the correct width it should be.

720×1280 255 KB

Can that be fixed so everything is scaled proportionally ?

7

Is that a problem just in the android version?

It looks ok to me in others.

I’m guessing that the android version will be wider because it is reporting a greater height as it includes the url and status bars as mentioned before. I’m not sure you can get it much closer but I won;t have time to test until tomorrow…

As an aside you would rarely scale a background image to fit a page at every resolution because of course the aspect ratio of devices/ screens etc is never going to be exactly the same as your image.

1 Like
9

Tests on the android emulator seem to confirm this and I can’t see an easy solution.

If you change the background-size to contain you will get the image perfect but then your absolute elements will be slightly out horizontally because the image no longer fills the whole width.

Other browsers will be unaffected because they have constructed the right size container to start with.

10

I see the issue. Can we detect only chrome and apply the values so it looks proportional on chrome andriod only?
I only need to change this:
width: calc(100vh * 0.512);

By using the value ‘0.512’ it looks proportional in chrome andriod but of course doesn’t look right in the rest of the browsers. So is there any way to detect only andriod chrome and apply that value while use the original value ‘0.563’ for the rest of the browsers?

11

@agf007,

So far you have only shown us a smartphone layout. Do you have other expectations for the content on this page or for the devices on which it is to be displayed?

Have you considered what this layout will look like if the user uses a larger font-size than you are using? It is unlikely that your design will fit within a 100% high smartphone window without distorting the layout. If you do not have Firefox on your computer, I recommend that you install it and set the Zoom parameter to Text Only. You will be able to see how larger or smaller font sizes affect your design.

Allowing the width of the background image to squeeze (distort slightly) so the height is preserved to accommodate Chrome doesn’t seem like a big challenge (eg: the checkerboard would not be distorted) so perhaps you have other concerns.

12

Browser/Device sniffing is evil and unreliable and should be avoided and only used as a last resort.

You can find some info here but it would be better if you answered Ron’s questions above and we learn more about what is going to happen in your page so that we can discuss your options beforehand. Historically browser detection routines have caused more harm than good and should be avoided at all costs.

13

The main content in this layout will be the preview image which will be displayed in the checkerboard area and banner in the bottom dark area. Our expectations is that the layout displays on all browsers at 9:16 ratio without any distortion or cropping. Resizing the browser should also resize the layout proportionally maintaining its aspect ratio. I tested it in all browsers and they all work as expected but only chrome on andriod has the issue which i mentioned. There will be no text in the design, only images so i believe text zooming isn’t an issue.

14

Thank you for the description. It’s helpful.

Is the checkerboard simply being used to reserve the space near the top? Will that space always be square? Likewise, will the banner always havew the same aspect ratio?
Can you separate the Google logo from the pickapaint background image? In other words, are they separate images that you merged with an image editor or did they come to you as one image?

I need to experiment a bit with your layout. I’ll get back with you when/if I have tested some code that works. Anyone else may post a solution ahead of me if I am taking too long :wink:

1 Like
15

What about device orientation change. The images will be minuscule if based on the height?

If all you are going to have is images and no text then combine it all into a single image and set the height to 100% and it will scale correctly everywhere. :slight_smile:

Otherwise the only solutions would be to detect android and change the ratio (could be unreliable) or use JS to detect viewport height instead of using vh and update dynamically (would need to be throttled and account for resize and orientation change).

Of course Ron may have a better solution by breaking down the components into smaller chunks which may help to disguise the android issue.

1 Like
16

It seems unusual to me that anyone would intentionally want a design that is not responsive. But I guess there could be good reason.

As I see it, there are two options.

  • use fixed dimensions so that when the page doesn’t fit the viewport scroll will be needed to see everything
  • display the page smaller in smaller viewports

Might it be as simple as removing the meta viewport tag?

17

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.