Support for Mobile/Tablet in general would be cool (Feature Request)

[ghost]

I can say specifics for ipad and iphones, but I would love to just target "tablet" or "mobiles".

[rafalbromirski]

the problem I've found here is with the default approach that people are choosing. Some of them want mobile-first and some mobile-last – there might be even a case when you have to use both at the same time. If you look at example below:

// mobile-last
@include tablet { ... } // => @media screen and (max-width: 1024px) { ... }
@include mobile { ... }  // => @media screen and (max-width: 768px) { ... }

// mobile-first
@include tablet { ... } // => @media screen and (min-width: 768px) { ... }
@include desktop { ... } // => @media screen and (min-width: 1024px) { ... }

you will see that tablet != tablet

What I recommend is creating an alias method using max-screen or min-screen mixins that fit your needs:

$breakpoint-tablet: 1024px;

@mixin tablet { 
  @include max-screen($breakpoint-tablet) {
    @content;
  }
}

On the other hand, I could assume that I can pick the "default" approach (and control it using global variable) but I don't like this solution because it's hard to stay agile.

Do you have any suggestions? :)

[ghost]

Oh, you already closed that Topic :)
I'm currently came back to my project where I used your scss queries extension and just noticed that I thought 2 Month ago something that still seems to hit some kind of barrier to achieve when using media queries. You asked for my suggestion (as why I could need it I guess) and I will now delayed mention the case:
My Project is an App with an HTML WebView Container that is running in Orientation landscape & protrait. The Thing is, the WebViews Viewport ist only the size of (fullScreenHeight * .4). By doing this, the Aspect Ratio as always triggering "landscape" as the height is smaller then the width, even tho the user is still holding his phone in portrait; the Viewport just happens to be landscape, but not the whole screenarea of the device.
Because of this, I'm back to this constrcution side of my project and were wondering how this could be solved. There is no "true" orientation I guess, as orientations always seems to be a calculated aspect ratio. Or am I missing something here? Because of this I was wondering if In could somehow target my media queries with "mobile only" so my app I could target every app webview call.

[rafalbromirski]

Have you tried to use aspect-ratio?

https://github.com/paranoida/sass-mediaqueries/blob/master/_media-queries.scss#L121

From MDN:

Describes the aspect ratio of the targeted display area of the output device. This value consists of two positive integers separated by a slash ("/") character. This represents the ratio of horizontal pixels (first term) to vertical pixels (second term).

https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries#aspect-ratio