So I have the following situation : $iphone : 320px (max-height 568px); This is the iphone dimensions. However, when i resize my browser to these exact values the media queries won't work. If i input the viewport instead of this by checking the display size using a browser extension it works. Should i be using device width and height or the viewport ? Seems weird to use the viewport.
Here is an example of my variables for breakpoint : Am i fixing the issue by adding "device" ? Do I have to add "device" to all of them ?
/* Motorola RAZR V8 (240 x 320) */
$motorola-portrait : 240px (max-device-height 320px);
/* Blackberry 8300 (320 x 240) */
$blackberry-portrait : 320px (max-device-height 240px);
/* iphone 3-4 (320 x 480) */
$iphone4-portrait : 320px (max-device-height 480px);
/* iphone 5 (320 x 568) */
$iphone5-portrait : 320px (max-device-height 568px);
/* Sasmung Galaxy S3/S4 (360 x 640) */
$samsunggalaxy-portrait : 360px (max-device-height 640px);
On this site you can test your media queries
You don't have to do for all devices! Just do it for a range!