6

これは、iPhone (4S) では発生するが、iPad (3) やデスクトップ ブラウザでは発生しない奇妙なバグです。このサイトからページを読み込むときは、次のように言います。

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

私の iPhone では、ブレッドクラム ("Home » JustMeans » What is Eco Fashion?") のテキストが統合失調症のように見えます。1 秒間に約 3 回、正しいサイズから数ポイント大きいサイズにサイズをすばやく変更します。記事のテキストが不安定な場合もあれば、2 段落目以降の場合もあります。フッターの著作権テキストも不安定な場合があります。

私は削除しようとしました：

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

フッターから、最初は動作しているように見えましたが、数回更新すると問題が再発しました。カスタム スタイルシートから font-size 宣言を削除したときと同じ話です。iPhone で Javascript を無効にしましたが、問題は解決しませんでした。

奇妙なことに、iPhone でページをロードするたびにこれが行われるわけではありませんが、ほとんどの場合は行われます。コードで何かを変更すると、次の更新で停止することがよくありますが、その後数回更新が返されます。ページを読み込んで何もせずにしばらく待つと、統合失調症が止まることがあります。記事のテキストの揺れが止まることがありますが、ブレッドクラムは揺れ続けます。ページを更新すると、ほとんどの場合、すぐに元に戻ります。そして、ページの読み込みが完了した後も間違いなく続きます. 今、それは10分間続いています。画面がロックされ、向きが変わり、Safari を閉じて再度開いた後も、ぐらつき続けます。

私の 10 年間の Web デザインの中で、このようなものは見たことがありません。これを引き起こしている原因および/またはそれを修正する方法の手がかりはありますか? ありがとう！

4

1 に答える 1

2

私はこれまでにそのような問題を経験したことがありません。ただし、ここでは 2 つの解決策があります。

解決策 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;
  }
}

問題も解決します。

あなたの場合、解決策＃1は対象となる要素のテキストサイズを縮小するため、解決策＃2を選択したでしょう。

于 2012-05-31T20:25:23.227 に答える