[Помогите] Адаптивная вёрстка

Тема в разделе "Вёрстка (HTML, CSS)", создана пользователем buggy, 6 фев 2013.

  1. buggy

    buggy

    Регистрация:
    6 фев 2013
    Сообщения:
    4
    Симпатии:
    0
    Добрый день.
    Делаю адаптивную вёрстку. Для проверки ширины браузеров пользуюсь Web Developer tool в Мозилле и Resolution Test в хроме. Приведу пример на одном из разрешений - 1024 пикселей по ширине.

    В css стоит условия:
    @media screen and (min-width: 768px) and (max-width: 1024px) {}
    @media screen and (min-width: 1024px) {}
    Т.е. при ширине экрана больше 1024 - один дизайн, меньше 1024, но больше 768 - другой.

    Инструментами устанавливаю ширину экрана на 1024 (два разных инструмента, два разных браузера). Виже что применяется стиль для 768. Полосы прокрутки я убрал, т.е. страница сайта во всю ширину окна браузера.

    Отсюда tigir.com/javascript.htm взял скрипт, определющий ширину окна браузера. Урезал его до:
    function getClientWidth()
    {
    return document.documentElement.clientWidth;
    }
    Поставил на onClick...
    При установленном разрешении 1024 (по словам инструментов обоих браузеров), скрипт выдаёт ширину клиента 1014 (хром) или 1016 (мозилла). Исходя из такой ширины окна стиль применяется правильно. Но откуда они берут эту ширину?!
     
  2. saxum2010

    saxum2010

    Регистрация:
    6 фев 2013
    Сообщения:
    111
    Симпатии:
    34
    попробуйте через window.innerWidth
     
  3. buggy

    buggy

    Регистрация:
    6 фев 2013
    Сообщения:
    4
    Симпатии:
    0
    Те же 1016 пикселей в Мозилле. Но, если предыдущий скрипт при появлении вертикальной прокрутки выдавал ширину 1000 (на 16 меньше), то window.innerWidth выдаёт те же 1016.
     
  4. alxndr52

    alxndr52

    Регистрация:
    5 фев 2013
    Сообщения:
    35
    Симпатии:
    13
  5. buggy

    buggy

    Регистрация:
    6 фев 2013
    Сообщения:
    4
    Симпатии:
    0
    Ммда... Получается, что это невыполнимая задача... А что ж делать-то?
    Придётся подбирать ширину в условиях css под размеры окон, а не использовать стандартные...
     
  6. alxndr52

    alxndr52

    Регистрация:
    5 фев 2013
    Сообщения:
    35
    Симпатии:
    13
    Линейкой мерить :bounce:
    а кстати попробовал window.alert(window.innerWidth + ' ' +window.innerHeight); на 1920х1080 наврал на 1px по высоте и на 1280х1024 наврал на 1px по высоте почти точно
     
  7. sitecreator

    sitecreator

    Регистрация:
    1 фев 2013
    Сообщения:
    291
    Симпатии:
    65
    вероятно, что отрезается рамочка браузера.
    в таком случае - это нормально.