Question 249270 in CSS Question posted in
Some basic documentation can be found here.

CSS Media query for iOS device not working?

I’m using the below styles to try and customize my site on iPad (10th generation, 10.2"). But for some reason when I hit the site on the iPad, none of the styles are picked up. Even when I use Safari’s develop tool, it doesn’t seem to see any of the CSS I’ve put into the stylesheet:

    <head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    
    <style>
    
    
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 3)
  and (orientation: portrait) { 
  
    
    
    .master-container {
    
    scale: 1.0 !important;
    margin-top: -310px !important;
    
    }
    
    .logo {
    
    text-align: center;
    padding-left: 0%;
    width: 99%;
    
    }
    
    .welcome-fb {
    
    width: 99%;
    padding-left: 0%;
    text-align: center;
    
    }
    
    }
    
    </style>
    
    </head>

Any idea what I’m doing wrong here? Oddly, my CSS with orientation landscape using the exact same @media structure DOES appear on the iPad…

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    Finally found the solution. Posting it incase it helps anyone else! The below works for the 10th Gen iPad!

    @media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (-webkit-min-device-pixel-ratio: 1)
  and (orientation: portrait) {

}

  2. 0

    Try using min/max-width instead; device-width has been depreciated since 2018.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search