CODEWITHSUNDEEP
google-chromewebviewandroid-webviewcss
Milkmannetje
Milkmannetje

Reputation: 1182

CSS Difference on Android 4.4 WebView and Chrome Browser for Android

Trying to implement a style for a WebApp. It seems that the CSS propery 'line-height' is different in the WebView.

I used this pen as example: http://codepen.io/bbredewold/pen/gGbht

The code is nothing special:

.flip {
  position: relative;
  width: 100px;
  height: 100px;
}

.front {
  width: 100%;
  height: 100%;
  font: 6em arial;
  line-height: 100px;
  text-align: center;
  border: 2px solid #b4b4b4;
}

<div class="flip">
  <div class="front">A</div>
</div>

Is this a bug? Or do I miss something? Any ideas how to work around this? It's a headbreaker... These are pictures with the differences. Picture 1 is problematic, picture 2 is nicely centered...

Android WebView (Chromium)

Chrome for Android

Upvotes: 1

Views: 793

Answers (1)

Henning Michael M&#248;ller Just
Henning Michael M&#248;ller Just

Reputation: 313

(I can't comment the original question, as my score is currently too low)

I realize this is a slightly old question but here goes:

I ran into something similar recently (Android 6, Chrome 55 etc) and I found that some of the Web Settings for WebView can make it interpret the page as if you had used the viewport metatag

<meta name="viewport" content="width=device-width, initial-scale=1">

In order to get the same result in Chrome I had to insert that viewport metatag.

Upvotes: 2

Related Questions