ipad - カスタムCSS用のmodernizrでiPadを検出するにはどうすればよいですか？

Question

iPadで奇妙なWebレイアウトビューがありますが、ユーザーのWebブラウザーでは問題ありません。iPad専用に作成したいカスタムCSSの検出としてmodernizrを使用したいと思います。

ありがとう。:)

score 4 · Accepted Answer

この質問は1歳ですが、同じ問題に遭遇しました。ModernizrでiPadを検出する…</ p>

Modernizrがos-ipadクラスを追加するのを見たことがありません…実際にiPadを検出するには、たとえば次のようなカスタムテストを設定する必要があります。

Modernizr.addTest('ipad', function () {
    return !!navigator.userAgent.match(/iPad/i);
});

それで、前の答えが最良の答えとして受け入れられたのを見て、私は非常に驚いています…あるいは、そのオプションが現在のModernizrビルドから削除されたのでしょうか？

score 2 · Accepted Answer

私はこれが古いスレッドであることを理解しています-そしておそらくすでに他の場所でカバーされています。しかし、私はまだここにたどり着くことができ、私のニーズに対して良い答えを得ることができませんでした。

私の一般的なニーズのほとんどで機能することがわかったのは、Modernizrhtmlクラス「touch」です。たとえば、デスクトップでは、いくつかの「固定」背景画像を使用します。モバイルデバイスはそれをあまり好まないので...

scssで：

html.touch {
   .element {
      background-attachment: scroll;
      background-size: cover;
   }
}

これは特にiPadを対象としたOPの質問に正確に答えるものではないことを私は理解していますが、これは私のものと同様の問題を抱えている少なくとも一部の人々に役立つ可能性があります。

score 0 · Accepted Answer

この答えはもう有効ではありません。

私がこの質問に答えてから、Modernizrは変わりました...

====================

Modernizrは、一連のCSSセレクターをHTMLタグに追加します。

iPadを使用している場合は、セレクター「os-iPad」が追加されます。

したがって、iPad関連のCSSの前に次のプレフィックスを付けることができます。html.os-iPad

html.os-iPad body
{
    background-color: #FF0000;
}

score -1 · Accepted Answer

そのためにcssメディアクエリを使用することをお勧めします。ここにあるlessフレームワークを見てください：http： //lessframework.com/

4 に答える 4