Адаптивная верстка. Айфон воображает себя айпадом :)

[Me. Zezya]

Добрый день.
Решил освоить адаптивную верстку. Все, вроде, и понятно, и делаю верно, но мобильный отказывается воспринимать верстку так как это нужно.

Есть такой css :

@charset "utf-8";
/* CSS Document */
 
@font-face {
    font-family:'GradPlain';
    src: url('../fonts/gradplain-webfont.eot');
    src: url('../fonts/gradplain-webfont.eot?#iefix') format('eot'),
        url('../fonts/gradplain-webfont.woff') format('woff'),
        url('../fonts/gradplain-webfont.ttf') format('truetype'),
        url('../fonts/gradplain-webfont.svg#') format('svg');
    font-weight: normal;
    font-style: normal;
    }
 
* {
    margin:0;
    padding:0;
    }
 
html,
body {
    font-family:Georgia, "Times New Roman", Times, serif;
    font-size:100%;
    color:#333;
    background:url(../images/bg_body.png) repeat;
    }
div {display:block;}
img {border:none;}
 
 
 
h1 {
    font-family:GradPlain;
    }
 
 
 
 
#header {
    margin:32px 0 0;
    }
    #header_content {
        position:relative;
        background:url(../images/bg_header.png) repeat;
        }
        #logo {
            position:absolute;
            top:-32px;
            left:50%;
            margin:0 0 0 -82px;
            }
            #logo a {
                font-size:0;
                line-height:0;
                }
        #left_menu {
            float:left;
            width:50%;
            height:auto;
            }
            #left_menu .region-header-left {
                margin:0 90px 0 0;
                }
                #left_menu .content ul.menu {
                    display:block;
                    float:right;
                    overflow:hidden;
                    }
                    #left_menu .content ul.menu li {
                        float:left;
                        display:block;
                        margin:0 20px 0 0;
                        padding:0 45px 0 0;
                        line-height:50px;
                        background:url(../images/li_header_menu.png) right center no-repeat
                        }
                    #left_menu .content ul.menu li.last {
                        padding:0;
                        background:none;
                        }
                        #left_menu .content ul.menu li a {
                            font-family:GradPlain, Tahoma, Geneva, sans-serif;
                            font-size:140%;
                            color:#EBE5CD;color:#D9CDB1;
                            letter-spacing:1px;
                            text-decoration:none;
                            }
                        #left_menu .content ul.menu li a:hover,
                        #left_menu .content ul.menu li a.active {
                            color:#EBE5CD;
                            }
        #right_menu {
            float:right;
            width:50%;
            height:auto;
            }
            #right_menu .region-header-right {
                margin:0 0 0 110px;
                }
                #right_menu .content ul.menu {
                    display:block;
                    float:left;
                    overflow:hidden;
                    }
                    #right_menu .content ul.menu li {
                        float:left;
                        display:block;
                        margin:0 20px 0 0;
                        padding:0 45px 0 0;
                        line-height:50px;
                        background:url(../images/li_header_menu.png) right center no-repeat
                        }
                    #right_menu .content ul.menu li.last {
                        padding:0;
                        background:none;
                        }
                        #right_menu .content ul.menu li a {
                            font-family:GradPlain, Tahoma, Geneva, sans-serif;
                            font-size:140%;
                            color:#EBE5CD;color:#D9CDB1;
                            letter-spacing:1px;
                            text-decoration:none;
                            }
                        #right_menu .content ul.menu li a:hover,
                        #right_menu .content ul.menu li a.active {
                            color:#EBE5CD;
                            }
     
@media screen and (max-width: 1024px) {
#left_menu .region-header-left {
    margin:10px 90px 0 0;
    }
    #left_menu .content ul.menu li {
        float: none;
        display:block;
        margin:0 0 10px 0;
        padding:0 0 0 40px;
        line-height:28px;
        background:url(../images/li_header_menu.png) left center no-repeat;
        }
    #left_menu .content ul.menu li.last {
        padding:0 0 0 40px;
        background:url(../images/li_header_menu.png) left center no-repeat;
        }
 
#right_menu .region-header-right {
    margin:10px 0 0 90px;
    }
    #right_menu .content ul.menu li {
        float: none;
        display:block;
        margin:0 0 10px 0;
        padding:0 40px 0 0;
        line-height:28px;
        text-align:right;
        background:url(../images/li_header_menu.png) right center no-repeat;
        }
    #right_menu .content ul.menu li.last {
        padding:0 40px 0 0;
        background:url(../images/li_header_menu.png) right center no-repeat;
        }
 
}
 
@media screen and (max-width: 480px) {
#left_menu {
    float:none !important;
    width:100%;
    margin:0 auto;
    padding:100px 0 0;
    }
    #left_menu .content ul.menu {
        float:none;
        text-align:center;
        }
#left_menu .region-header-left {
    margin:0;
    }
    #left_menu .content ul.menu li {
        float: none;
        display:block;
        margin:0 0 10px 0;
        padding:0;
        line-height:normal;
        background:none;
        }
    #left_menu .content ul.menu li.last {
        padding:0;
        background:none;
        }
        #left_menu .content ul.menu li a {
            font-family:GradPlain, Tahoma, Geneva, sans-serif;
            font-size:300%;
            color:#EBE5CD;color:#D9CDB1;
            letter-spacing:1px;
            text-decoration:none;
            }
#right_menu {
    float:none !important;
    width:100%;
    margin:0 auto;
    }
    #right_menu .content ul.menu {
        float:none;
        text-align:center;
        }
#right_menu .region-header-right {
    margin:0;
    }
    #right_menu .content ul.menu li {
        float: none;
        display:block;
        margin:0 0 10px 0;
        padding:0;
        line-height:normal;
        text-align:center;
        background:none;
        }
    #right_menu .content ul.menu li.last {
        padding:0;
        background:none;
        }
        #right_menu .content ul.menu li a {
            font-family:GradPlain, Tahoma, Geneva, sans-serif;
            font-size:300%;
            color:#EBE5CD;color:#D9CDB1;
            letter-spacing:1px;
            text-decoration:none;
            }
 
 
}
 
#wrapper {
    width:95%;
    max-width:1000px;
    margin:0 auto;
    text-shadow:1px 1px 0px #ffffff;
    background:#090;
    }
 
.clear { clear:both;}

Для каждого разрешения прописано свое свойство. Если смотреть в тестере, то все выглядит правильно и как задумано.

Но при этом айфон видит все вот так:

Непонятно почему все уменьшено. Непонятно откуда отступы такие сбоку взялись и почему вообще на айфоне все выглядит так как должно быть на айпаде.

Прошу помощи. Заранее спасибо!

 

[mxa]

Не верно все делаете. Посмотрите сколько у Вас пикселей в коде. Все пиксели должны быть заменены на относительные единицы: %, em... Это если делаете адаптивную верстку. Читайте Итан Маркотт - Отзывчивый веб-дизайн.

Возможно Вы не учли то что на айфоне-айпаде стоит ретина-дисплей. Вот тут есть чуток: Для просмотра ссылки Войди или Зарегистрируйся

 

[Me. Zezya]

Решилась проблема следующим образом. При верстке не прописали строку

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

Странно что ни в одной статье об адаптивной верстке этого не упоминали...