2012-07-13 12 views
5

iPhoneとiPod Touchでモバイルサファリをターゲットにするために、最新のCSSハックを知っている人はいますか?iPhone/iPod CSSハックの携帯サファリ

私は@media screen and (max-device-width: 480px)と見ていますが、これは3年前からのもので、現在はNexus Sと一致しています。

(これは微妙なレイアウトの問題を修正することである。私は、ブラウザスニッフィングは悪などで実現)

答えて

8

http://cssuseragent.orgダークサイドへようこそ。あなただけの携帯電話上のSafariをターゲットにする必要がある場合は

+0

ありがとうございます、私はここでCSSハックが必要な最後の時ではないので、弾丸を噛んで使用します。 – mahemoff

+0

+1ユーザエージェントのハッキングのためのmodernizrをポスティングするために、それは(おそらく)更新/維持され、ある日から別の日に失敗することはありません。 – benzkji

3

あなたがウェブ上で特定のデバイスをターゲットにonly screen and (-webkit-min-device-pixel-ratio: 2)

+2

ターゲットでのSafariを使う人とにかく... Androidデバイスでも、Safariブラウザに影響を与えるが、私のNexus 4 with Chrome –

0

唯一の方法は、ユーザーエージェント文字列をチェックすることです使用することができます。すべてのリンゴデバイスは、ユーザーエージェント文字列に名前があります。例えばiphoneは「iphone」を、ipodは「ipod」を持ちます。これを使用してCSSを動的に適用または読み込みます。

1

-webkit-min-device-pixel-ratio: 2もお聞かせください。私は現時点で2を超えるブラウザを報告しているブラウザはないと信じていますが(一部の報告は低いのでmin-ratioを使用しています)、iPhone 3GSと非網膜iPod Touchデバイスは除きます。そのためには、ユーザーエージェントのスニッフィングを行う必要があります。

0

、ちょうどこのハックにメディアクエリを追加します。

@media screen and (max-width: 767px) { 
    _::-webkit-full-page-media, _:future, :root .safari_only { 
     padding: 10px; //or any property you need 
    } 
} 

そして、あなたがターゲットにしたい要素に.safari_onlyクラスを追加することを忘れないでください例:

<div class='safari_only'> This div will have a padding:10px in a mobile with Safari </div> 

一つの詳細は:これはつもりでは、Androidデバイス:)