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

Тема в разделе "Верстка", создана пользователем Me. Zezya, 24 окт 2012.

Информация :
Уважаемые пользователи, прежде чем ответить в теме или создать новую, внимательно ознакомьтесь с Правилами раздела и Правилами форума
Для быстрого поиска ответов на ваши вопросы воспользуйтесь Картой раздела и/или Поиском по разделу
Модераторы: ultra
  1. Me. Zezya

    Me. Zezya Постоялец

    Регистр.:
    21 май 2010
    Сообщения:
    102
    Симпатии:
    22
    Добрый день.
    Решил освоить адаптивную верстку. Все, вроде, и понятно, и делаю верно, но мобильный отказывается воспринимать верстку так как это нужно.

    Есть такой 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;}
     
    

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

    [​IMG]


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

    [​IMG]


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

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

    mxa Постоялец

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

    Возможно Вы не учли то что на айфоне-айпаде стоит ретина-дисплей. Вот тут есть чуток: http://habrahabr.ru/post/139682/
     
    Me. Zezya нравится это.
  3. Me. Zezya

    Me. Zezya Постоялец

    Регистр.:
    21 май 2010
    Сообщения:
    102
    Симпатии:
    22
    Решилась проблема следующим образом. При верстке не прописали строку
    Код:
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    Странно что ни в одной статье об адаптивной верстке этого не упоминали...
     
    mdss нравится это.