@media only screen and (min-width : 320px) and (max-width : 812px)
{.....
}

@media only screen and (min-width : 320px) and (max-width : 812px) and (orientation: landscape)
{......
}
@media only screen and (min-width: 768px) and (max-width: 1024px)
  and (-webkit-min-pixel-ratio: 2)
  and (orientation: portrait)
{....
}
@media only screen
  and (min-device-width: 768px) and (max-width: 1024px)
  and (-webkit-pixel-ratio: 2)
  and (orientation: landscape)
{....
}

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">