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

Answer 2

尝试在em中设置font-size而不是px。使用px值从未使用移动设备。还尝试将您的nastier规则与媒体查询分开。虽然对于调试设置，有问题标签的ID可以帮助您进行调试。

Answer 3

尝试使用身体上的CSS

  

-webkit-text-size-adjust：none;

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