cross browser - CSS3 media queries not working on Safari on iPod/iPhone -


i developing responsive design website. website optimized iphone , ipod (both having width 640px).

i using following css3 media queries:

    @media screen , (max-width: 640px) {         .display-none-mobile{             display: none;         }     }     @media screen , (min-width: 641px) {         .display-none-desktop{             display: none;         }     } 

above code works great on desktop browsers when shrink browser width 640px. code not work when try test website on ipod using safari browser.

i changed css3 media queries

    @media screen , (max-device-width: 640px) {         .display-none-mobile{             display: none;         }     }     @media screen , (min-device-width: 641px) {         .display-none-desktop{             display: none;         }     } 

now, responsive design worked safari on ipod messed layouts on other desktop browsers. css3 media queries totally ignored ochrome, ie, ff on desktop (for width 640px).

so have figured out there related cross browser compatibility css3 media queries, not find info this. can ways can update code make css3 media queries working browsers (or atleast major ones). targeting atleast

  1. ie windows
  2. safari windows
  3. chrome windows
  4. firefox windows
  5. safari ipod
  6. chrome ipod

if don't add following <meta> tag on html device ignore media queries

<!doctype html> <html lang="en-us">     <head>         <meta name="viewport" content="width=device-width">     </head>     <body>     </body> </html> 

Comments

Popular posts from this blog

java - Jmockit String final length method mocking Issue -

asp.net - Razor Page Hosted on IIS 6 Fails Every Morning -

c++ - wxwidget compiling on windows command prompt -