Media Query on Mobile Device

Media Query on Mobile Device

Media Querys for Browser-View on a Samsung young will not be found using
following code in html-file i have two lines für the styles. Any ideas?
<meta name="viewport"
content="width=device-width,initial-scale=1,maximum-scale=1">
<link href="style.css" type="text/css" rel="stylesheet" media="all" />
css-file:
// ---- MEDIA QUERY
$break-smallest: 240px;
$break-small: 320px;
$break-smart: 480px;
$break-middle: 768px;
$break-large: 1024px;
@mixin respond-to($media) {
@if $media == handhelds {
@media only screen and (max-device-width: $break-smallest) { @content; }
}
@else if $media == small-screens {
@media only screen and (min-device-width: $break-smallest + 1) and
(max-device-width: $break-small - 1) { @content; }
}
@else if $media == smart-screens {
@media only screen and (min-device-width: $break-small + 1) and
(max-device-width: $break-smart - 1) { @content; }
}
@else if $media == medium-screens {
@media only screen and (min-device-width: $break-smart + 1) and
(max-device-width: $break-middle - 1) { @content; }
}
@else if $media == wide-screens {
@media only screen and (min-device-width: $break-large) { @content; }
}
}
targets with
@include respond-to(handhelds) { width: 240px; }
@include respond-to(small-screens) { width: 320px; }
@include respond-to(smart-screens) { width: 480px; }
@include respond-to(medium-screens) { width: 768px; }