Menu
Hi I am working with multiple tablet devices, iPad, Galaxy Tab, Acer Iconia, LG 3D Pad and so on.
I want to target iPad only using CSS3 media query. Since, device width of LG and iPad is same 768px - I am having trouble separating each device.
I have tried following to separate, but does not seem to be working:
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : portrait) /* applied to lg also */ @media only screen and (min-resolution: 132dpi) and (max-device-width: 1024px) and (orientation : portrait) /* applies to lg also */ @media only screen and (device-aspect-ratio: 1024/768) and (orientation : portrait) /* does not work on iPad or LG */ I don't know the -webkit-device-pixel-ratio and other -webkit* options and their values to target for iPad. I don't want to use JavaScript for styles, any ideas?
460
You may use as many media queries as you would like in a CSS file. Note that you may use the and operator to require multiple queries to be true, but you have to use the comma (,) as the or operator to separate groups of multiple queries. The not keyword can be used to alter the logic as well.
If you want to include both min and max width for responsiveness in the browser, then you can use the following: @media (min-width: 768px) and (max-width: 992px){...} @media (min-width: 480px) and (max-width: 767px) {...}
CSS media queries are an excellent way to deliver different styles to different devices. Here are CSS Media Queries for targeting your iPad in portrait or landscape mode. These media queries will target all iPad models.
iPad Media Queries (All generations - including iPad mini) Thanks to Apple's work in creating a consistent experience for users, and easy time for developers, all 5 different iP (iP 1-5 and iPad mini) can be targeted with just one CSS media query. The next few lines of code should work perfect for a responsive design.
So for anyone who did not understood what I meant, the total media query looked like this for portrait: @media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) { //style } You need to target the device by its User Agent, using some script. The user agent for the iPad is: Detecting on the server has some benefits.
CSS Media Queries for iPad Pro. The best example of this is the iPad Pro. The iPad Pro has browser dimensions (1366/1024) that are very similar to common desktop dimensions (1280/800), which can make the management of CSS breakpoints tricky as there will be overlapping breakpoint widths.
Finally found a solution from : Detect different device platforms using CSS
<link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait)" href="ipad-portrait.css" /> <link rel="stylesheet" media="all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape)" href="ipad-landscape.css" /> To reduce HTTP call, this can also be used inside you existing common CSS file:
@media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) { .ipad-portrait { color: red; } /* your css rules for ipad portrait */ } @media all and (device-width: 1024px) and (device-height: 768px) and (orientation:landscape) { .ipad-landscape { color: blue; } /* your css rules for ipad landscape */ } Hope this helps.
Other references:
72
I am a bit late to answer this but none of the above worked for me.
This is what worked for me
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) { //your styles here } If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
