What is correct media query for IPad Pro?

前端 未结 8 1065
-上瘾入骨i
-上瘾入骨i 2020-12-23 09:32

I have these two but they are not working. I\'m simulating in Chrome

    /* Landscape*/

    @media only screen and (min-device-width: 1024px) and (max-devic         


        
8条回答
  •  挽巷
    挽巷 (楼主)
    2020-12-23 10:14

    Note that there are multiple iPad Pros, each with a different Viewports: When emulating an iPad Pro via the Chrome developer tools, the iPad Pro (12.9") is the default option. If you want to emulate one of the other iPad Pros (10.5" or 9.7") with a different viewport, you'll need to add a custom emulated device with the correct specs.

    You can search devices, viewports, and their respective CSS media queries at: http://vizdevices.yesviz.com/devices.php.

    For instance, the iPad Pro (12.9") would have the following media queries:

    /* Landscape */ 
    @media only screen and (min-width: 1366px) and (orientation: landscape) { /* Your Styles... */ }
    
    /*Portrait*/ 
    @media only screen and (min-width: 1024px) and (orientation: portrait) { /* Your Styles... */ }
    

    Whereas the iPad Pro (10.5") will have:

    /* Landscape */ 
    @media only screen and (min-device-width: 1112px) and (orientation: landscape) { /* Your Styles... */ }
    
    /*Portrait*/ 
    @media only screen and (min-device-width: 834px) and (orientation: portrait) { /* Your Styles... */ }
    

提交回复
热议问题