CODEWITHSUNDEEP
androidhtmlcssgoogle-chrome
skolind
skolind

Reputation: 1754

Website text is bigger in Chrome on Android

I am making a site for a client. I have some issues in Chrome on an Android phone. I have attached an image of some normal text in a normal div that just blows up to 42px or something. The phone is a normal Samsung Galaxy S3.

There's no problems in Firefox on the same phone. And no problems at all on a desktop computer.

Big text on Chrome in Android

The CSS is like this:

#content.is-front .post:first-child .post-title-excerpt {
   left: 2%;
   float: left;
   z-index: 99;
   bottom: 2%;
   border: none;
   width: 92%;
   padding: 2%;
   overflow: hidden; /* not on the online site. Would prevent text from going out of box, but would not change the big font. */
   color: #ffffff;
   max-height: 133px;
   position: absolute;
   font-size: 14px !important;
   background: rgba(0, 0, 0, .7);
}

And the HTML would be similar to this:

<div id="post-138" class="post-138 post type-post status-publish format-standard hentry category-torsten tag-featured">
    <div class="post-header">
       <a href="http://copenhero.dk/torsdagsbar-guide/">
       <img width="940" height="390" src="http://copenhero.dk/wp-content/uploads/2014/03/Torsdagsbar-forside-featured2.jpg" class="attachment-front-featured-thumb wp-post-image" alt="Torsdagsbar forside featured2">              </a>
<div class="post-title-excerpt">
    <div class="post-category"><a href="http://copenhero.dk/kategori/torsten/">Tørsten</a></div>
    <div class="post-title"><a href="http://copenhero.dk/torsdagsbar-guide/">Guide: Torsdagsbarer i København</a></div>
    <div class="post-excerpt"><p>Øl, drinks og shots har som bekendt ikke kun den ønskede effekt i weekenden. Torsdag kan være en perfekt gå-ud dag med gode tilbud, flere siddepladser og knapt så meget pres på fadølshanerne rundt omkring i København. Copenhero har været på field-research, og er gået videnskabeligt og alkoholisk til værks for at finde lidt for […]</p>
</div>
<a class="post-permalink" href="http://copenhero.dk/torsdagsbar-guide/">Læs mere</a>
    </div>
  </div>
</div>

Upvotes: 1

Views: 587

Answers (3)

abrosis
abrosis

Reputation: 414

Try in your CSS on your body

-webkit-text-size-adjust: none;

http://css-tricks.com/prevent-iphone-text-enlargement/

Upvotes: 1

user3450768
user3450768

Reputation:

This happens because the Android browser does automatic resizing for non reponsive content. Just use em instead of pixels. Remember: usually 1em = 16px

#content.is-front .post:first-child .post-title-excerpt {
    ...
    font-size: 0.85em !important;
    ...
}

Upvotes: 1

K. N
K. N

Reputation: 81

Try setting the font-size in em instead of px. Using px values never worked me with mobile devices. Also try to separate your nastier rules with media queries. Though for debugging setting an id for the problematic tag helps you debugging.

Upvotes: 0

Related Questions