android - Android 版 Chrome 中的网站文字更大

Question

我正在为客户制作网站。我在 Android 手机上的 Chrome 中遇到了一些问题。我在一个普通的 div 中附加了一些普通文本的图像，它只是放大到 42px 或其他东西。手机是普通的三星 Galaxy S3。

在同一部手机上使用 Firefox 没有问题。在台式计算机上完全没有问题。

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>

Answer 1

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

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