I am currently supporting iPad Pro for the iPad app that is being developed.
·9.7" model
·10.5 inch model
·12.7" model
I need to deal with
For example, there is an image called hogehoge.png.
If you want to see this,
The 9.7-inch model displays the hogehoge.png file.
The 12.7-inch model displays the [email protected] file.
The trouble was with the 10.5 model, and even with this model
Same as the 12.7-inch model, [email protected] is
It will be displayed.
For the 10.5" model,
hogehoge.png for the 10.5" model.
I would like to display it, but what should I do?
Will it be like [email protected]?
If anyone knows,
Could you teach me?
Thank you in advance.
The values for each media query appear to be as follows:
Model terminal resolution (horizontal x vertical) real resolution (horizontal x vertical) pixel (ppi) device pixel ratio
12.7 2,048px2732px1024px1366px264ppi 2.0
10.5 1,668px2,224px834px1,112px264ppi 2.0
9.7 2,048px2048px768px1024px264ppi 2.0
The CSS/srcset breakpoint value is 9.7" 768px x 1024px.
Would it be better to change it to 10.5" 834px x 1112px or divide it into 3 types?
Reference Site
What is the resolution of the iPad Pro?Check your display thoroughly!
The 10.5" iPad Pro media query is available in 834 px by 1112 px CSS Technique
CSS3: Latest Bootstrap-enabled iOS media query template
About the srcset attribute
How to Write a Media Query "How to Deploy a Responsive Web Design"
What do you need to know before configuring a responsive breakpoint
There was an article about the 3rd generation machine, so I added: The actual resolution and device pixel ratio are estimated values
Model terminal resolution (horizontal x vertical) real resolution (horizontal x vertical) pixel (ppi) device pixel ratio
12.9 2,048px2732px1024px1366px264ppi 2.0
11.0 1,668 px 2,388 px 834 px 1,194 px 264 ppi 2.0
© 2024 OneMinuteCode. All rights reserved.