CODEWITHSUNDEEP
javascripthtmlcssjquery-mobilecordova
lomas09
lomas09

Reputation: 1104

Phonegap Application text and layout too small

I recently build an android app using html, css, javascript and running them through phonegap to create the actual app. One of the problems I encountered in one phone is that the text looks too small. Also some images are a little small as well. I added a viewport meta tag but it doesnt seem to work either. Here are the meta tags:

    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="format-detection" content="telephone=no" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densitydpi=device-dpi" />`

This is how it looks
This happens in a particular phone(Samsung Galaxy)

This is how its supposed to look:
This is how it looks in htc wildfire s

Upvotes: 50

Views: 34762

Answers (7)

MazarD
MazarD

Reputation: 2740

I had the same problem and solved it changing the viewport. I also thought the problem was phonegap, but it really was that the devices used for testing had different dpi.

My solution was to change the target-densitydpi on the viewport to:

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />

Upvotes: 144

l2aelba
l2aelba

Reputation: 22217

Updated answer: for Android

The problem is on Android devices has this Accessibilly settings, You can try to change font-size (search font size on android setting) and run you app again.

So your fonts on app will be changed as your setting

Accessibilly font size

So here is a solution for Cordova

Use : mobile-accessibility to disabling PreferredTextZoom

Install mobile-accessibility on your Cordova project

$ cordova plugin add https://github.com/phonegap/phonegap-mobile-accessibility.git

And JS part is something like :

document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
   if (window.MobileAccessibility) {
      window.MobileAccessibility.usePreferredTextZoom(false);
   }
}

Upvotes: 1

ESP32
ESP32

Reputation: 8723

For Windows Phone (WP8) I've found the following solution: https://github.com/phonegap/phonegap-app-developer/issues/92

  1. add to css: @-ms-viewport{ width: device-width; }
  2. add to html: <meta name="viewport" content="width=device-width, initial-scale=1" />

  3. add to to patch IE 10:

    (function() { if ("-ms-user-select" in document.documentElement.style && navigator.userAgent.match(/IEMobile/10.0/)) { var msViewportStyle = document.createElement("style"); msViewportStyle.appendChild( document.createTextNode("@-ms-viewport{width:auto!important}") ); document.getElementsByTagName("head")[0].appendChild(msViewportStyle); } })();

Upvotes: 0

ffrappo
ffrappo

Reputation: 5415

It appears that removing the target-densitydpi altogether brings the best results.

<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height" />

This should be more than enough to control your app's appearance in most cases.

Upvotes: 5

Alex Beauchemin
Alex Beauchemin

Reputation: 1181

Adding this solution here

For me, some text were rendering really big, others were the correct size. The problem was with the use of rem values for font-size in the css. For some reason, elements where the font-size was the base value (defined in the body) were rendered way bigger than they should.

The fix was to reassign a global value for the rem font-size in a wrapper element for the entire site.

(my .font-size(1.4) is only a mixin rendering: font-size: 1.4rem; )

So this 

html {
  font-size: 62.5%;
}

body {
  .font-size(1.4);
}

h1 {
  .font-size(2.6);
}

Can be fixed with this

html {
  font-size: 62.5%;
}

body {
  .font-size(1.4);
}

.wrapper {
  .font-size(1.4);
}

h1 {
  .font-size(2.6);
}

Upvotes: -2

vodov
vodov

Reputation: 214

I had a similar problem and did some research I thought is worth sharing:

  • Set the viewport's target-densitydpi to medium-dpi (=160dpi), as already suggested. This virtualizes the px unit, e.g. 1px in html/css then corresponds to 2 physical pixels on a 320dpi device. Note that images are scaled (and blurred) as well.

    <meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=medium-dpi" />

  • CSS: Use media queries to implement conditional styling. Adapting for different screen sizes dependent on width, height, aspect or orientation is straight-forward. Different pixel densities can be handled with device-pixel-ratio (thanks to Marc Edwards for providing an example: https://gist.github.com/marcedwards/3446599).

    @media screen and (-webkit-min-device-pixel-ratio: 1.5),
       screen and (-o-min-device-pixel-ratio: 15/10)
{
  body { background-image: ... } /* provide high-res image */
}

    The media feature resolution is cleaner than device-pixel-ratio, but it lacks mobile browser support.

  • Javascript: Adapt button sizes, images etc. based on window.devicePixelRatio and window.screen.width and window.screen.height. Layouting per Javascript is considered as bad practice. Also flickering might result during loading as the execution starts after the pageload event.

  • -webkit-image-set and image src-set make it easy to provide high-res images for retina displays, see http://www.html5rocks.com/en/mobile/high-dpi/#toc-bff. Browser support is limited.

     background-image: -webkit-image-set(
   url(icon1x.jpg) 1x,
   url(icon2x.jpg) 2x
 );

Upvotes: 7

apachebite
apachebite

Reputation: 41

target-densitydpi=medium-dpi Worked for us.

Scenario Faced this issue when ee upgraded from PhoneGap 2.2 to 3.3.

Upvotes: 4

Related Questions