在iPhone上颤抖的文字

Question

这是一个奇怪的错误,出现在iPhone(4S)上,而不是iPad(3)或任何桌面浏览器.当我从这个网站加载任何页面时,请说:

http://www.courtniv.com/what-is-eco-fashion/

在我的iPhone上,面包屑("Home»JustMeans»什么是Eco Fashion？")文本似乎是精神分裂症.它可以快速改变尺寸,来回,大约每秒三次,从正确的尺寸到大一点的尺寸.有时文章文本也是不稳定的,有时从第二段开始.有时页脚版权文本也不稳定.

我尝试删除:

<?php get_template_part('includes/scripts'); ?>

从页脚开始,起初它似乎工作,但随后一些刷新后问题又回来了.当我从自定义样式表中删除font-size声明时也是如此.我在我的iPhone上禁用了Javascript,问题仍然存在.

奇怪的是,我每次在iPhone上加载页面时都不会这样做,但大部分时间都是如此.通常,如果我在代码中更改某些内容,它将在下次刷新时停止,但稍后会返回一些刷新.有时如果我加载页面并等待一段时间,什么都不做,精神分裂症就会停止.有时文章文字会停止摇晃,但面包屑会继续晃动.刷新页面几乎总是把它带回来.并且在页面加载完成后它肯定会继续.现在它已经持续了十分钟.屏幕锁定,改变方向,再次关闭和打开Safari后,它会继续摆动.

在我10年的网页设计中,我从来没有见过这样的东西.是什么导致这个和/或如何解决它？谢谢!

Answer 1

我以前从未遇到过此类问题。但是，这里有两个解决方案。

解决方案#1

将以下内容添加到 css 应该可以防止字体调整大小。

html {
  -webkit-text-size-adjust:none;
}

由于这似乎只是 iPhone 上的问题，因此仅针对该终端进行媒体查询是有意义的：

@media only screen and (max-device-width: 960px) { 
  html { 
    -webkit-text-size-adjust:none; 
  }
}

html您可以将其添加到，而不是应用它#breadcrumb, .post-meta具有相同大小调整问题的其他选择器，

解决方案#2

该问题似乎还与以下规则集有关：

a,
.textwidget a img,
div.category a,
.sociable ul li {
  -webkit-transition: all .3s ease;
  -khtml-transition: all .3s ease;
  -moz-transition: all .3s ease;
  -ms-transition: all .3s ease;
  -o-transition: all .3s ease;
  transition: all .3s ease;
}

将其更改为：

@media only screen and (max-device-width: 960px) { 
  a,
  .textwidget a img,
  div.category a,
  .sociable ul li {
    -webkit-transition: none;
    transition: none;
  }
}

也将解决问题。

在你的情况下，我会选择解决方案＃2，因为解决方案＃1缩小了目标元素的文本大小。