Пиксельные и оптические размеры CSS с новыми разрешениями экрана (например, Retina)

Я хочу, чтобы мои веб-сайты отображались на сетчатке и других экранах с более высоким разрешением того же размера, что и на стандартных экранах. То есть сделать их визуально одинаковыми, но с большей детализацией на экранах с более высоким разрешением.

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

Я изучил это, и оказалось, что решение определяет DPI, а затем загружает другой CSS.

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

Дело в том, что все эти экраны имеют разные DPI.

iPhone 4/4S and iPod Touch (4th generation) -- 326  
iPad (3rd)/4th generation)  -- 264  
MacBook Pro with Retina Display 15" -- 220
MacBook Pro with Retina Display 13" -- 227

Итак, если бы у нас был элемент высотой, скажем, 24 пикселя. Я хотел бы, чтобы он регулировал свою высоту, чтобы точно соответствовать соотношению пикселей. IE. сделать математику и сделать это для всех элементов.


css pixel-ratio retina-display
person RIK    schedule 27.04.2013    source источник

Ответы (2)


arrow_upward
0
arrow_downward

Вы оставляете размеры изображения нетронутыми, вы просто указываете соответствующий источник.

Вы также можете вставлять различные запросы, см. здесь: http://css-tricks.com/snippets/css/retina-display-media-query/

person br4nnigan    schedule 06.05.2013

arrow_upward
0
arrow_downward

Я бы порекомендовал вам прочитать как о dpi, так и о dppx. Когда вы смотрите на дисплеи Retina, вам нужно думать как о CSS-пикселях, так и о физических пикселях, как я уверен, вы знаете.

Если вы хотите, чтобы компоненты веб-сайта отображались в одном и том же физическом размере, то я думаю, что dpi — это то, что вам нужно, но добавьте разные CSS для разных dpi уровней, которые вы хотите покрыть, но если вы хотите различать Retina и обычный дисплей, вам нужно различать dpi и dppx (точек на физический дюйм)

Эти статьи помогли мне:

https://developer.mozilla.org/en-US/docs/Web/CSS/resolution

http://drewwells.net/blog/2013/working-with-dppx/

person Mathias    schedule 27.02.2014