Browser Specific Media Queries
Posted By : Gaurav Arora | 28-Sep-2015
As we already know that we use media queries to make our application compatible with mobile devices.
But we can also use them as Browser Specific.
Because there are some properties which creates issue in webkit based browsers like chrome, safari and opera.
Let us suppose that we are using:
.div{
padding: 10px 20px 10px 20px;
}
In some cases we found that there is a pixel bit difference in spacing and we'll have to use
.div{
padding: 10px 20px 11px 20px;
}
In this kind of case we can use browser specific media query.
@media screen and (-webkit-min-device-pixel-ratio:0) { /* properties for chrome, safari and other webkit based browsers */
.div{
padding: 10px 20px 11px 20px;
}
}
In the same manner we can apply media queries for Internet Explorer
@media screen and (min-width:0\0) { /* supports all versions of Internet Explorer */
.div{
padding: 10px 20px 15px 20px;
}
}
Cookies are important to the proper functioning of a site. To improve your experience, we use cookies to remember log-in details and provide secure log-in, collect statistics to optimize site functionality, and deliver content tailored to your interests. Click Agree and Proceed to accept cookies and go directly to the site or click on View Cookie Settings to see detailed descriptions of the types of cookies and choose whether to accept certain cookies while on the site.
About Author
Gaurav Arora
Gaurav is an experienced UI developer with experience and capabilities to build compelling UI's for Web and Mobile Applications.