モバイルの問題：transform：scale（）クリック時の画像のサイズ変更

Question

私は4つのソーシャルアイコンに、ホバー上のスケール（1.5）の値を持つトランスフォームプロパティを持っています。

.social-icon 
     margin: 0 20px 
     transition: scale 200ms ease-in-out 

     &:hover 
      transform: scale(1.5) 

ホバー効果は、デスクトップ上の意図したとおりに動作しますが、社会的なアイコンをクリックして携帯電話の画面上で1.5のスケールにサイズを変更し、そこに滞在するためにそれらの原因となります。私はこれを引き起こしているのか分かりません。何かご意見は？

Answer 1

これは、モバイルデバイスが:hover疑似クラスと同じ方法で動作しないためです。ブラウザーは、要素をタップするまでホバーオーバーしている場所を知る方法がなく、ホバースタイルを追加するときです。他の場所でタップするとスケーリングが消えてしまいます。

悲しいことに、幸いなことに、このままではCSSソリューションはありません。 JavaScriptが必要です。純粋なCSSソリューションでは、@mediaクエリを使用して:hoverスタイルを大きなビューポートに割り当てることをお勧めしますが、タブレットの問題にぶつかります。