0

私が遭遇している問題は、Android (Samsung Galaxy の 4.0) でこの HTML メールのテキストが途切れることです。

これに対処するために @media クエリを使用しましたが、iPhone に悪影響を及ぼし、幅を縮小しすぎました。width: 300px !important;運が悪いので、iPhone専用をキャンセルしようとしています。

ご提案いただきありがとうございます。

現在の @Media:

@media only screen and (-webkit-device-pixel-ratio: .75) {
  /* CSS for Low-density screens goes here *
   * Ex: HTC Evo, HTC Incredible, Nexus One */
   /* Styles */
      table[class="table"], td[class="cell"] {

width: 300px !important;
}
}

@media only screen and (-webkit-device-pixel-ratio: 1) and (max-device-width: 768px) {
  /* CSS for Medium-density screens goes here *
   * Ex: Samsung Ace, Kindle Fire, Macbook Pro *
   * max-device-width added so you don't target laptops and desktops */
   /* Styles */
      table[class="table"], td[class="cell"] {
width: 300px !important;

}
}


/* iPhone 4 ----------- */
    @media
    only screen and (-webkit-min-device-pixel-ratio : 1.5),
    only screen and (min-device-pixel-ratio : 1.5) {
      table[class="table"], td[class="cell"] {
          width:auto !important;
}

}

メディア クエリがないと、Android のテキストが途切れます。

メディア クエリがないと、Android のテキストが途切れる

メディア クエリも、iPhone で td/table の幅を 300px に縮小し、表示に悪影響を及ぼします

メディアクエリを使用すると、iPhone は td/table の幅を 300px に縮小します

4

3 に答える 3

0

適用するCSS定義がより具体的であることを確認してください。

@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
    .container table[class="table"], .table td[class="cell"] {
        width: auto !important;
    }
}

.container架空のコンテナはどこにありますか。

于 2012-09-26T18:28:07.570 に答える
0

Android と iPhone の両方を満足させるために、max-widthとで遊んでみてください。min-widthそれは私のために働いた。

于 2012-09-28T16:29:59.633 に答える
0

「-webkit-min-device-pixel-ratio: 1.5」の代わりに、「-webkit-max-device-pixel-ratio: 1」が必要だと思われます。「min-」でも「max-」でもないメディア クエリ (「-webkit-device-pixel-ratio: 1」など) をブラウザーがどのように処理するかはわかりません。一部のブラウザは、Media Query を同等と解釈するのではないかと思いますが、多くのブラウザは単にバーフし、クエリが false であると常に言います。

お使いのブラウザは、理解できないメディア クエリに関するエラー メッセージを「エラー コンソール」に出力する可能性がありますか?

ハンドヘルド デバイスが密度 1 を報告しているが、800 のような非常に大きな幅 (「ビューポート」幅) を報告している場合が時々発生します。あなたの現在のコードは、そのようなデバイスに CSSを送信していないようです。特定のメディア クエリ (max-device-width: など) を CSS の一部で使用し、他の部分で使用しないことは、多くの場合、いくつかのエッジ ケースが考慮されていないことを示唆しています。

于 2012-09-27T04:19:42.403 に答える