Media query is not working for 768px ipad portrait
For iPads in portrait mode it is generally best to be more specific in the media queries, so try something like this:
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles Here */
}
This way you target devices with screen width between 768px
and 1024px
which is what the iPad is, then you filter your targets by specifying the orientation as portrait.
You could try something like this - reducing the max-width
- to minimize any other screens that it could effect, but I haven't tried it so can't verify it works.
@media only screen
and (min-device-width : 768px)
and (max-device-width : 770px)
and (orientation : portrait) {
/* Styles Here */
}
@media queries not working on my iPad
Your problem is likely the virtual viewport that some devices provide. The viewport is larger than the physical screen and content is scaled down by the browser. If you want to work in device pixels you need to add a meta tag
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This tells the browser to set the viewport to the same size as the device with no pixel scaling.
Why does my mini iPad still won't display with my media query?
Iphone 6 and iPad have an horizontal resolution bigger than 760px
so both media queries are false and whatever css rule you have inside will not be applied.
You need a "tablet" rule for the landscape mode e.g. with 1024px
or even higher breakpoint
min-width media query not working on ipad?
The iPad is always reporting its width as 768px and its height as 1024px, so you have to find out how it is rotated with orientation
and use min-device-height:1000px
like so:
/* This will apply to all screens with a width 999px and smaller */
* {
color:green;
background-color:black;
}
/*
This will apply to all screens larger then 1000px wide
including landscape ipad but not portrait ipad.
*/
@media (orientation:landscape) and (min-device-height:1000px),
all and (min-width:1000px) {
* {
color:white;
background-color:red;
}
}
Results:
- iPad
- Portrait - green text - black background
- Landscape - white text - red background
- iPhone
- Portrait - green text - black background
- Landscape - green text - black background
- Computer (resolution)
- 1680x1050 - white text - red background
- 800x600 - green text - black background
Using chrome & firefox (does anyone even use IE anymore?)
References:
w3 media queries
Safari CSS Reference
Optimizing Web Content
CSS media Query not working on ipad landscape (Bootstrap)
Have a peek at this css-tricks article which has a bootstrap for standard device resolutions: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/
There are specific media queries for landscape
and portrait
listed below:
/* iPads (landscape) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
/* Styles */
}
/* iPads (portrait) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
/* Styles */
}
I want to stress, though, that from a "mobile-first" approach, you shouldn't be designing for devices, but rather for resolution breakpoints that fit your design. Try starting with a very small resolution, like 320 x 480. From there, increase the browser width until that design "breaks" (i.e. looks like crap) and then add a breakpoint at that resolution. A handy way of checking the browser width is to open up your developer console in Chrome (or Firebug for Firefox) and typing in document.body.offsetWidth
and hitting enter. That will show the pixel amount of the width of the browser. Keep adding / rearranging things until you get the experience you want on a wide range of devices.
The web is moving forward. This means that we have to think about smartphones all the way up to TVs and projectors. Design your site with that in mind.
I hope this helps.
CSS media query to target iPad and iPad only?
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:
- https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariCSSRef/Articles/OtherStandardCSS3Features.html
Related Topics
Chrome Cut Off Oswald-Light Font
CSS Modules - Exclude Class from Being Transformed
CSS Select First Child Only If Two Children
Not (Max-Width: 512Px) Not Working
Flex Direction: Row-Reverse in React-Native
Using Background-Attachment:Fixed in Safari on The Ipad
How Come My Float Elements Aren't Within Their Parent
Ie Not Styling HTML5 Tags (With Shiv)
100% Width Divs Not Spanning Entire Width of the Browser in Webkit
CSS Fixed Div Within Container
What's the Point of the ::Before and ::After Pseudo-Element Selectors in CSS
How to Create a 'Parallelogram' Shape in CSS with a Straight Side
Prevent Element Fragmentation in Multi-Column Layout
Why Can't I Make My Div 100% Height If I Use an HTML5 Doctype? How to Get It 100% Height