Menu
I am developing a responsive design website. The website will be optimized for iPhone and iPod (Both having width 640px).
I am using the following CSS3 media queries:
@media screen and (max-width: 640px) {
.display-none-mobile{
display: none;
}
}
@media screen and (min-width: 641px) {
.display-none-desktop{
display: none;
}
}
Above code works great on my desktop browsers when i shrink browser width to 640px. However the code does not work when i try to test the website on iPod using Safari browser.
I changed the CSS3 media queries to
@media screen and (max-device-width: 640px) {
.display-none-mobile{
display: none;
}
}
@media screen and (min-device-width: 641px) {
.display-none-desktop{
display: none;
}
}
Now, the responsive design worked for Safari on iPod but it messed up with layouts on all other desktop browsers. Those css3 media queries were totally ignored by oChrome, IE, FF on my desktop (for width 640px).
So by now i have figured out there is something related to cross browser compatibility with css3 media queries, but could not find much info about this. what can be the ways i can update my code to make css3 media queries working for all browsers (or atleast major ones). I am targeting atleast
797
If you don't add the following <meta> tag on your HTML the device will ignore your media queries
<!DOCTYPE html>
<html lang="en-us">
<head>
<meta name="viewport" content="width=device-width">
</head>
<body>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
