从我所看到的，它看起来像你妻子的手机已经打开了gmail应用程序内浏览器上的网站，所以它与你使用Chrome在Android上略有不同.
我的建议是删除你所有的text-size-adjust个样式，因为它是一个试验性的功能，伴随着结果不一致的不利方面，而是实施以下更改:
- 使用Viewport meta tag:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
简而言之，viewport Meta标签将控制您的网站在手机上的显示方式.如果没有它，移动设备将渲染每个页面，就好像它是在桌面屏幕宽度上渲染，然后zoom 以适应用户的屏幕.
- 使用media queries设置断点:
/*
Only do these setting when screen is 639px maximum based on root font-size 16px
*/
@media screen and (max-width: 39.9375em) {
/* ... */
}
仅当检测到在这种情况下的screen与括号(max-width: 39.9375em)内的标准匹配时，才应用媒体查询.
- 删除
font-size的硬编码px号，代之以rem号.每个浏览器都有一个基本的字体大小(通常是16px)，但用户可以根据自己的需要(视力障碍等)设置更小或更大的字体.通过将所有字体设置为在浏览器基础上工作，您可以在不影响用户设置的情况下获得统一的zoom 比例.例如，在Chrome中从18px更改为1.125rem将如下所示:
.list_message_title_old {
font-family: Arial, Helvetica, sans-serif;
/* font-size: 18px; < delete */
color: #000000;
/* line-height: 20pt; < delete */
/* text-size-adjust: 250%; < delete */
/* -webkit-text-size-adjust: 250%; < delete */
/* -ms-text-size-adjust: 250%; < delete */
/* -moz-text-size-adjust: 250%; < delete */
min-height: 1px;
font-size: 1.125rem; /* < add this [16px x 1.125 = 18px] */
}
.white_text_L {
font-family: Lucida Sans Unicode, Lucida Grande, sans-serif;
/* font-size: 18px; < delete */
/* line-height: 24pt; < delete */
font-weight: bold;
color: #ffffff;
/* text-size-adjust: 200%; < delete */
/* -webkit-text-size-adjust: 200%; < delete*/
/* -ms-text-size-adjust: 200%; < delete */
/* -moz-text-size-adjust: 200%; < delete */
font-size: 1.125rem; /* < add this [16px x 1.125 = 18px] */
}
- 现在您有了使用
rem的font-size设置，在@media查询中只需覆盖它，较大的字体将应用于较小的屏幕，如下所示:
@media screen and (max-width: 39.9375em) {
.list_message_title_old {
font-size: 2.5rem; /* < add this [16px x 2.5 = 40px] */
}
.white_text_L {
font-size: 2rem; /* < add this [16px x 2 = 32px] */
}
}
Note:您可以在@media个查询中添加许多不同的样式属性，这些属性也将被应用，这并不限于font-size个.您还可以使用多个@media来将样式限制为高于/低于或介于特定屏幕大小之间.
