I'm creating a responsive landing page and when I test it in different tablet devices, there are adjustments I want to make (paddings, margins, etc). I managed to target the normal breakpoints but I need to target more specific ones such as:
iPad Mini - 768 x 1024 with 324ppi
iPad 10 - 810 x 1080 with 264ppi
iPad 9 - 768 x 1024 with 264ppi
Can I get this specific? When I try, it ends up messing up my non-ipad media queries.
use media query with same parameters like
#media screen and (max-width:768px) will works for and iPad 9
#media screen and (max-width:768px) and (min-resolution: 300dpi) will works for iPad Mini
#media screen and (max-width:810px) will works for iPad 10
If you want to be as specific as you can, try setting the min and max widths, as well as device orientation and pixel ratio:
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (-webkit-min-device-pixel-ratio: 1) and (orientation: portrait)
For more you can check this article: Popular Devices Media Queries
Related
I am having difficulties by this mobile responsive from portrait to landscape view. I am using this code
#media only screen and (min-device-width: 375px) and (max-device-width: 480px) and (-webkit-min-device-pixel-ratio: 3){
but this code is for only iPhone x screen size, and it's not working to some different screen sizes. Is there a way/ codes that can apply for all mobile media sizes? Can you give me a tip, how is the right coding to do the responsive portrait to landscape? or is there a way can disable the mobile landscape?
I need to make specific changes to the page layout for iPads 3.There is any media query css for I-pad3 9'7inch screen 1536 x 2048 pixels (~264 ppi pixel density)
The media query itself doesn't appear to have changed significantly from the previous iterations of the iPad with the exception that pixel ratio is set to handle retina displays via the -webkit-min-device-pixel-ratio attribute :
#media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (-webkit-min-device-pixel-ratio: 2) {
/* Place iPad 3 Styles Here */
}
These higher-resolution retina displays generally still report the same device-width as earlier versions, but you can think of the previously mentioned attribute effectively as a "multiplier" to your minimum and maximum values.
I used media query to put my Homepage from Smartphone to Tablet and for this I used the size of a iPad 1/2.
After I finished my Website (for Tablet) it was looking fine on my Acer Tablet but on my Girlfriends iPad its completely messed up because its seems like its not loading the Tablet Version.
Is my Media-Query wrong but if this is the Problem why is it on my Acer Tablet fine?
#media only screen
and (min-device-width: 768px)
and (max-device-width: 1024px)
and (-webkit-min-device-pixel-ratio: 1)
If you want I can put in pictures of the fail iPad Version of the Homepage
That's probably happening due to the devise orientation (Portrait, Landscape).
iPad screen sizes
I'm on the latest version of Firefox on OSX (v46.0.1) and have implemented a tablet specific design using the following media query:
#media only screen and (min-device-width : 768px) and (max-device-width : 1024px){}
Firefox ignores it completely. It also render the bootstrap xs size media query completely wrong but I don't expect anyone to ever see it (Firefox mobile works fine). I've turned off all the extensions in Firefox just in case but it didn't help.
Has anyone else experienced this?
Change min/max-device
#media only screen and (min-device-width: 768px) and (max-device-width: 1024px)
To min/max-width
#media only screen and (min-width: 768px) and (max-width: 1024px)
The Reason
min/max-width
The width media feature describes the width of the rendering surface of
the output device (such as the width of the document window, or the
width of the page box on a printer).
min/max-device-width
Determines whether the output device is a grid device or a bitmap
device. If the device is grid-based (such as a TTY terminal or a
phone display with only one font), the value is 1. Otherwise it is
zero.
I'm using Twitter Bootstrap to responsive website and I don't understand the difference between
#media screen and (min-width: 768px)
#media (min-width: 768px)
"Screen" or not? any help?
http://www.w3.org/TR/CSS21/media.html#at-media-rule
#media screen is computer screen, so
The first rule is for computer screens only with resolution width at least 768px.
The second rule is just for devices with width >=768px including tablets, phones, printers etc., that have high enough resolution.
screen is a media type and means that rule will be used on computer screens. Without it it's just a general rule and will be applied for all media types.
The browser identifies itself as being in the “screen” category.
Specification
applies to devices of a certain media type (‘screen’) ,screen is intended primarily for color computer screens. So it identifies roughly to modern devices desktop smartphone etc
So it will work for color computer screens at differing resolutions e.g.
Mobile
only screen and (min-width: 480px)
Tablet
only screen and (min-width: 768px)
Desktop
only screen and (min-width: 992px)
Huge
only screen and (min-width: 1280px)