css media queries: target mobile devices without s

2019-03-20 18:17发布

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?

3条回答
够拽才男人
2楼-- · 2019-03-20 18:53

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.

查看更多
祖国的老花朵
3楼-- · 2019-03-20 19:05

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.

查看更多
对你真心纯属浪费
4楼-- · 2019-03-20 19:05

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.

查看更多
登录 后发表回答