Safari media Query for ipad

10,924

CSS Media Queries for iPads & iPhones

iPad in portrait & landscape

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px)  { /* STYLES GO HERE */}

iPad in landscape

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : landscape) { /* STYLES GO HERE */}

iPad in portrait

@media only screen 
and (min-device-width : 768px) 
and (max-device-width : 1024px) 
and (orientation : portrait) { /* STYLES GO HERE */ }

Browser Specific Hacks

/* saf3+, chrome1+ */
@media screen and (-webkit-min-device-pixel-ratio:0) {
#diez  { color: red  }
}

 /* iPhone / mobile webkit */
 @media screen and (max-device-width: 480px) {
  #veintiseis { color: red  }
 }

ThankYou

Share:
10,924
Dhruvang Gajjar
Author by

Dhruvang Gajjar

Super Coder | Introvert | Straightforward Currently I work on JavaScript and its frameworks and libraries. My specialities include quick learning and understanding requirements, problem solving, Web standards, Website optimization, Object oriented programming, Modal View Controller method and Project design. So far I have an expertise in Vanila JavaScript, Node js, Express js, React Js, jQuery, PHP, Hubspot, MongoDB, mongoose, MySQL, Sequelize and API integration of many platforms. Moreover, I have a good knowledge of Shopify, Laravel, Slim and Firebase. I also have a hands on knowledge of Digital marketing tools such as Google Tag Manager, Google analytics and Facebook Pixel. This knowledge is very useful when I work with the sales and marketing team for an automation, marketing or cookie consent related tasks. Connect with me at [email protected]

Updated on June 13, 2022

Comments

  • Dhruvang Gajjar
    Dhruvang Gajjar almost 2 years

    @media only screen and (min-width: 768px) and (max-width:1199px) {}

    I want to put Media query only for safari browser for given Size of device.

    @media screen and (-webkit-min-device-pixel-ratio:0) and (min-width: 768px) and (max-width:1199px) { ::i-block-chrome,.allsearch-in select{display:none;} }

    still not Working...