Про векторную графику слышал?

media query </thread>

Ты нихера не понял.
CSS пиксель ≠ физический пиксель.

Про векторную графику слышал?

да, иконка меню на svg, но причём это к разнице между интерфейсами desctop/mobile?

<svg viewBox="0 0 30 30" preserveAspectRatio="xMinYMax meet">
  <line x1="3" y1="5" x2="30" y2="5"/>
  <line x1="3" y1="13" x2="30" y2="13"/>
  <line x1="3" y1="21" x2="30" y2="21"/>
</svg>

CSS пиксель ≠ физический пиксель

thx попытаюсь осознать

media query
что делать, ведь на них будут подтягиваться стили с наибольшим разрешением, вместо мобильной версии.

fish_fuck_himself_in_eyes.jpg

https://www.w3.org/TR/CSS21/media.html#media-types

https://www.w3.org/TR/CSS21/media.html#media-types

handheld
Intended for handheld devices (typically small screen, limited bandwidth).

гуглю статью 2010го года: https://habrahabr.ru/post/107764/

Строка с media=«screen» соотвествует обычному компьютеру, media=«handheld» — это мобильное устройство. Новые устройства отказываются от такого подхода и необходимо использовать запросы внутри атрибута media.
<link rel=«stylesheet» href=«mobile.css» media=«only screen and (max-device-width:480px)»/>
Комбинируя оба способа можно написать:

media=«handheld, only screen and (max-device-width:480px)» т.е. нужно крафтить отдельную цсску со стилями для мобайлдевайсов и он её будет подтягивать в нужном сеансе?

бампану ещё раз, ибо кран. Какой media max-width подтянет IPad4 с разрешением 2048×1536?

Еще раз, физическое разрешение экрана и разрешение экрана в ксс это ращные вещи. Гугли device-pixel-ratio.

Media query и dpi

Емы и ремы!

пикселИ, пикселЕй, пикселЯ

физическое разрешение экрана
разрешение экрана в ксс

понял, понял, но может есть какое нить выражение для перевода с физического разрешения в css-resolution? Что нибудь a la «поделить на dpi»?

Емы и ремы!

ничоси!

выражение для перевода с физического разрешения в css-resolution?

Умножаешь на device-pixel-ratio и получаешь физическое разрешение.

Умножаешь на device-pixel-ratio и получаешь физическое разрешение.

т.е.

Samsung Galaxy S7 Разрешение: 2560 х 1440 пикс (Quad HD) 577ppi

2560 / 577 = 4.436741768, это же дюймы, правильно? а дальше как, я гоню или в css 1 in соответствует 96 pixels?

2560 / 577 = 4.436741768

Вот что ты тут посчитал? Какое разрешение у тебя будет в ксс это вообще зависит только от левой пятки разработчиков девайса.

Samsung Galaxy S7

http://devicepixelratio.com/

Вот что ты тут посчитал?

посчитал сколько дюймов в ширину, разделив «разрешение» на точек в дюйме

Какое разрешение у тебя будет в ксс это вообще зависит только от левой пятки разработчиков девайса.

если в запросе будет хандлед с разрешением с max-width 2560, он подтянет его на S7??? Мне уже припекать от этой бессмысленной чехарды параметров, как подтянуть css rules для хайрезных наладонных говноподелий?

если в запросе будет хандлед с разрешением с max-width 2560, он подтянет его на S7???

Нет

Мне уже припекать от этой бессмысленной чехарды параметров, как подтянуть css rules для хайрезных наладонных говноподелий?

У меня припекает от твоего неумения читать. Гуглеж по device-pixel-ratio должен был ответить на все твои вопросы.

https://habrahabr.ru/post/237931/

Один нормальный пиксель равен 4 пикселям retina.

https://habrahabr.ru/post/150071/

на Retina-экранах плотность пикселей в 4 раза больше, чем на обычных

window.devicePixelRatio

курю отсюда http://www.coolmobmasters.com/mobile-design/31-master-css-pixels-retina-displ... т.е. стандартный css ppi сейчас 96, и если мне нужно натянуть стиль на устройство с 192 ppi, я пишу запрос

@media only screen and (-webkit-min-device-pixel-ratio: 2), only screen and (-moz-min-device-pixel-ratio: 2), only screen and (-o-min-device-pixel-ratio: 2/1), only screen and (min-device-pixel-ratio: 2), only screen and (min-resolution: 2dppx) {

body { ...... } 

Общая логика более менее верна, но забудь про ппи. Ты только себе лишние расчеты делаешь. То что на ретине ксс пиксель вдвое больше это проблема эпловцев.

если мне нужно натянуть стиль на устройство с 192 ppi

У тебя как то странно вопрос стоит. Нет практической необходимости натягивать ничего на хайрез экран. Ты как писал девайс-мин-видс: 1024px так и пишешь. Единственное где нужно ловить размер пикселя это чтобы картинка для хайреза подгружалась большего качаества. Остальной ксс под хайрез менять надобности нет.

так как же будет выглядеть запрос под тот же S7 кстати, нужно же, что бы распознавал хэндлед, правильно, т. е.

@media only screen and (-webkit-min-device-pixel-ratio: 2 )
  {
    @media only screen and ( min-width: 800px) {
        body {
            background-color: grey;               
        }
    }      
  }

only screen and ( min-resolution: 200dpi),
only screen and ( min-resolution: 1.25dppx)

И ещё крайний вопрос и я отстану, «почему мы пишем screen, почему не handled?»

Общая логика более менее верна, но забудь про ппи

ещё раз, так ли это, что дефолтный ппи 96, коэффициент (-webkit-min-device-pixel-ratio: 2) - это во сколько раз дюйм экрана «насыщеннее» пикселями относительно дефолтного?

То что на ретине ксс пиксель вдвое больше это проблема эпловцев.

у меня босс наяривает на свой новенький айпад, не получится свалить на эйпловцев. может у кого есть пример рабочий, а?

В данном случае он у тебя распознает не только твой с7 а любой девайс с такими же параметрами. Я не очень понимаю для чего делать разный фон при разных разрешениях но да это будет работать.

Скрин пишут т.к. для печати это неважно.

это во сколько раз дюйм экрана «насыщеннее» пикселями относительно дефолтного?

Что такое дефолтный в твоем понимании?

Этот параметр показывает во сколько раз виртуальный ксс пиксель больше реального. При чем в штуках.

не получится свалить на эйпловцев

Ты бы хоть задачу описал

ну если поможешь - будет круто. в общем меню списком, в десктопе просто список, а начиная с max width 800px и вниз до 400px меню display:none и благодаря jquery выезжает по клику на svg объект (иконка гамбургера) Вот и как мне собрать правила. что бы на его iPad4 подтягивалась мобильная версия?

html

<nav style="overflow-y:auto">
        <ul>
            <li id="icon">
                <svg viewBox="0 0 30 30" preserveAspectRatio="xMinYMax meet" >
                    <line x1="3" y1="5" x2="30" y2="5"/>
                    <line x1="3" y1="13" x2="30" y2="13"/>
                    <line x1="3" y1="21" x2="30" y2="21"/>
                </svg>
            </li>
            <li class="category" onclick="cat_filter(0)" style="">
                <div>ВСЁ</div>
            </li>
            <li class="category" onclick="cat_filter(10)" style="">
                <div>НОВОСТИ</div>
            </li>
            <li class="category" onclick="cat_filter(6)" style="">
                <div>ПРОИШЕСТВИЯ</div>
            </li>
            <li class="category" onclick="cat_filter(9)" style="">
                <div>ПОДРОБНОСТИ</div>
            </li>
            <li class="category" onclick="cat_filter(5)" style="">
                <div>ГОРОД</div>
            </li>
            <li class="category" onclick="cat_filter(3)" style="">
                <div>СПОРТ</div>
            </li>
        </ul>
    </nav>

body{
	font-family: 'Roboto', sans-serif;
	background-image: url("paper_fibers_@2X.png");
	background-color: lightgrey;
	margin: 0 auto;
	padding: 0px;}
a{text-decoration:none;}	
svg {
	width: 4.5em;
	height: 2.5em;
	background: none;
	stroke: rgb(0,210,0);
	stroke-linecap: round;
	stroke-width:4px;}
nav{
	font-weight: 500;
	position:fixed;
	z-index: 9999;
	top: .5em;
	z-index:999;}

nav li:hover{
	cursor:pointer;
	text-decoration: none;}
nav li:active{
	color:rgb(0,150,0);
	text-decoration: none;}
nav ul {
	top:0em;
	border: none;
	font-size: 1.75em;
	margin: 0em 0em 0em 0em;
	text-decoration: none;}

#icon {
	border:none;
	background: none;
	display: block;
	padding: 0em 0em 0em 0em;
	margin: .5em 0em 0em .9em;
	background-color: none;}
nav ul li {
	list-style: none;
	border: none;
	border-radius: .3em;
	display: block;
	padding-left: 0em;
	background-color: lightgrey;
	padding: .50em 1em .5em 1em;
	margin: 0em 0em .25em .85em;
}
.category {
	display: none;}

jquery

<script type="text/javascript">
    $(document).ready(function()
		{
			var flag=true;
			$("#icon").click(function()
			{
				if(flag==true)
					{$(".category").slideDown(0100);
					flag=!flag;}
				else
					{$(".category").slideUp(0100);
					flag=!flag;}
				});
			$(".category").click(function()
			{
				if ($("body").width()<800) {

					if(flag==true)
						{$(".category").slideDown(0100);
						flag=!flag;}
					else
						{$(".category").slideUp(0100);
						flag=!flag;}
				}
			});
		});

    </script>

Резмер айпада в ксс 768х1024. Исходи из этого. Это же справедливо и для многих других планшетов.

Внятного способа отличать десктоп с мелким экраном от планшета нет. Как вариант ориентироваться на тач экран, но и десктоп бывает с тачем. В тавоем случае реальное разрешение девайса совершенно неважно. Забудь про него.

спасибо, буду копать дальше, всё таки такие вещи нужно делать, жаль, девайса на руках подходящего нет. /thread

/thread

Для этого есть ссылка под ОП.

открыл для себя йоба-телефоны с разрешением 2к+ типа галактики с7, что делать, ведь на них будут подтягиваться стили с наибольшим разрешением, вместо мобильной версии. или я что то непонимать?

А user-agent для кого придумали?