Media Query для Samsung
Здравствуйте.
Столкнулся с проблемой понимания стандартным андроидным браузером моих media query.
Тестил:
на Iphone4-5 - все ок;
на Samsung Note 2 - Crome - все ок;
на Samsung Note 2 - стандартный браузер - дикая каша;
на Samsung Galaxy S 2 - стандартный браузер - дикая каша.
Не могу понять, в чем прокол. Сейчас приведу код реализации Media Query, только сразу попрошу гнилыми помидорами в меня не бросать, потому как в работе с этими штуками я новичок. :)
@media screen and (max-width: 707px) {
.moneyPackInfo {
margin: 0px 9% 30px;
}
}
@media screen and (max-width: 690px) {
.moneyPackInfo {
margin: 0px 8% 30px;
}
}
@media screen and (max-width: 675px) {
.moneyPackInfo {
margin: 0px 7% 30px;
}
}
@media screen and (max-width: 660px) {
.moneyPackInfo {
margin: 0px 6% 30px;
}
}
@media screen and (max-width: 645px) {
.moneyPackInfo {
margin: 0px 5% 30px;
}
}
@media screen and (max-width: 630px) {
.moneyPackInfo {
margin: 0px 4% 30px;
}
}
@media screen and (max-width: 617px) {
.moneyPackInfo {
margin: 0px 3% 30px;
}
}
@media screen and (max-width: 604px) {
.moneyPackInfo {
margin: 0px 2% 30px;
}
}
@media screen and (max-width: 593px) {
.moneyPackInfo {
margin: 0px 1% 30px;
}
}
@media screen and (max-width: 581px) {
.moneyPackInfo {
margin: 0px 0% 30px;
}
}
.........
@media screen and (max-width: 329px) {
.importantInfo span {
left:25%;
top:-48px;
font-size:12px;
}
}
В <head></head> прописано:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" />
<link rel="stylesheet" href="css/style.css" />
Помогите, плиз, разобраться с этой ситуевиной, а то ни один из вариантов, которые удалось нагуглить, не подошел. (
Спасибо.