Let's say I just want to target every tablet and phone, regardless of size, is there a media query for this? Is it possible to do this without specifying a size? Or is using a size the only way to target mobile devices, and not desktops?
相关问题
- Adding a timeout to a render function in ReactJS
-
Why does the box-shadow property not apply to a
- Add animation to jQuery function Interval
- jQuery hover to slide?
- Issue with star rating css
In the CSS3 spec,
@media handeld
is mentioned but it has perhaps no browser support.So, no.
However, you might find this site useful, it explains other some media query techniques for mobile.
I've been struggling with this for a few days, but a good way to check for handheld devices is the max-device-width. Desktop pc's don't send this to the browser, but most (if not all) handhelds do use this.
In my case I wanted to show a compressed version of the site on all devices (including desktop) when below a certain width, for which I used
@media all and (max-width: 640px)
But a certain overlay popup that used
position: fixed
had to be changed on handhelds only (because the css property works in all desktop browsers but not on all handhelds). So for that I used an additional rule:@media all and (max-device-width: 640px)
In which I target all handhelds below 640 but not desktop browsers. Incidentally, this also doesn't target iPads (which is how I wanted it) because it has a higher device width than 640px.
If you just want to target all devices just pick a low min width (1px) so that it doesn't exclude any device regardless of width.
I don't think you'll have too much luck with a pure css approach. You'll want to do something along the lines of the modernizer.js approach and us JS to detect device and append a class name to body based on that.
What is the best way to detect a mobile device in jQuery?
Then include that class in your media queries to special case mobile devices of varying sizes.