[feature request] Specific Devices

[Alex Cory]

Sometimes you need to do custom css that only applies for specific devices (i.e. iphone x). Would be cool if you had built in features for these.

Here's an example:

const Cool = styled.div`
  ${media.iphonex`
    /* styles to be applied to iphonex only */
  `}
`

Or something like

const Cool = styled.div`
  ${media.device('iphonex').orientation('portrait')`
    /* styles to be applied to iphonex only */
  `}
`

Here's some iphone device media queries

const media = {
  iphonex: (...args) => css`
    @media only screen 
    and (device-width : 375px) 
    and (device-height : 812px) 
    and (-webkit-device-pixel-ratio : 3) {
      ${css(...args)}
    }
  `
}