用iPhone覆盖@media CSS

Question

The issue I'm encountering is text gets cut off in this HTML email on Android (4.0 with Samsung Galaxy).

I've used @media queries to address this, but they adversely affect the iPhone, scaling down the width too much. I'm trying to cancel out the width: 300px !important; just for the iPhone with no luck.

Thanks in advance for any suggestions.

Current @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;
}

}

Without Media query Android text gets cut off:

Media query also shrinks the width of td/table to 300px on the iPhone adversely affecting its display

Answer 1

Make sure your CSS definition that you want to be applied is more specific;

@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;
    }
}

Where .container is a hypothetical container.

Answer 2

As the alternative to "-webkit-min-device-pixel-ratio: 1.5" I suspect you want "-webkit-max-device-pixel-ratio: 1". I don't know what browsers will do with Media Queries that are neither "min-" nor "max-" (such as "-webkit-device-pixel-ratio: 1"); I suspect some browsers will interpret the Media Query to mean equality, but many will just barf and always say the query was false.

Does your browser perchance put error messages about Media Queries it doesn't understand into the "Error Console"?

The case of a handheld device reporting density 1 but a very large width like 800 (the "viewport" width) will sometimes occur. Your current code seems to send no CSS to such devices, which I doubt is what you intend. Having a particular Media Query (such as max-device-width:) on some parts of your CSS but not others is often a hint some edge cases aren't being considered.

Answer 3

try playing with max-width and min-width , to satisfy both androids and iphones. It worked for me.