Android上的Chrome浏览器中的网站文字较大 [英] Website text is bigger in Chrome on Android

问题描述

我正在为客户建立网站.我在Android手机上的Chrome浏览器中遇到一些问题.我在普通div中附加了一些普通文本的图像，该图像刚好达到42px左右.该手机是普通的三星Galaxy S3.

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.

在同一部手机上的Firefox中没有问题.在台式计算机上完全没有问题.

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

CSS如下:

#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);
}

HTML与此类似:

<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>

推荐答案

之所以会发生这种情况，是因为Android浏览器会自动调整非响应内容的大小.只需使用em而不是像素.请记住:通常1em = 16px

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;
    ...
}

这篇关于Android上的Chrome浏览器中的网站文字较大的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！