Неправильно определяется разрешение экрана

[alleclf]

Разбираюсь с адаптивным дизайном.

 

 

Использую вот такую конструкцию:

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

Стили подключаю вот так:

<link rel="stylesheet" media="all and (min-device-width:320px)" href="{THEME}/css/style_480.css" />

Тестирую на смартфоне с экраном 480х854. При такой конструкции ширина экран определяется в 320 пх. и весь шаблон вроде как растягивается.

 

Если в медиазапросе указать значение больше 320 пх, стили вообще не подгружаются.

 

Если не использовать "viewport" шаблон сильно сжимается, вроде как масштаб уменьшается, причем уменьшаются всё кроме текста - текст отображается нормального размера.

 

Искажения очень хорошо видно на картинках. Для шаблона использую картинки 64х64 пх.

Так вот, БЕЗ использования "viewport" они маленькие - пальцем невозможно попасть.

А С использованием "viewport" - картинки наоборот сильно большие, буквально в треть экрана.

 

Скажите пожалуйста, что я не так делаю, в чём проблема кривого отображения на смарте.

Кстати, на компе всё выглядит как положено. На смарте использовал google chrome, есть еще opera mobile, но она и должна всё перекручивать - опера не показатель.

 

 

 

На скринах:

- первый с использованием "viewport" - всё сильно увеличено

- на втором без использования "viewport" - всё отлично кроме картинок

 

хорошо видно по картинке "меню" (вверху в виде 3х линий). Сама картинка 64х64 пх.

 

Получается что при использовании "viewport" неправильно определяется разрешение экрана.

 

В идеале всё должно быть как на втором скрине при условии что картинка приобретет свой нормальный размер.

Edited February 8, 2015 by alleclf

[antonKar]

Я в проектах использую следующую схему:

1) Цепляю основной стилевой файл style.css;

2) Цепляю стилевой файл с media-запросами style-media.css. И уже в нём прописываю все media-запросы через max-width.

 

Такая схема подойдёт? На мобилках всё очень сложно с разрешениями экрана, у них на телефоне одно разрешение, а при отображении сайтов уже совершенно иное.

 

Вьюпорт использую <meta name="viewport" content="initial-scale=1,user-scalable=yes,width=device-width,height=device-height" />

Edited February 8, 2015 by antonKar

[alleclf]

Я в проектах использую следующую схему:

1) Цепляю основной стилевой файл style.css;

2) Цепляю стилевой файл с media-запросами style-media.css. И уже в нём прописываю все media-запросы через max-width.

 

Такая схема подойдёт? На мобилках всё очень сложно с разрешениями экрана, у них на телефоне одно разрешение, а при отображении сайтов уже совершенно иное.

 

Вьюпорт использую <meta name="viewport" content="initial-scale=1,user-scalable=yes,width=device-width,height=device-height" />

У меня есть основной стиль, который подгружается всегда и для всех устройств, и есть дополнительные - подгружаются в зависимости от разрешения экрана.

На компьютерах всё работает отлично, проблема только с мобильниками и в том что разрешение занижено.