视网膜显示屏和1080p手机等高DPI设备如何处理媒体查询中的像素? [英] How do high-DPI devices like Retina displays and 1080p phones handle pixels in media queries?

问题描述

例如，带有Retina显示屏的iPhone在媒体查询中显示多少个像素?是320像素还是640像素?如果是640像素，网站如何处理不同的设备分辨率?不管屏幕的分辨率如何，有没有办法使用相同的单位?

For example, how many pixels does the iPhone with a Retina display appear to a media query? Is it 320 pixels or 640 pixels? If it's 640 pixels, how can a website deal with different device resolutions? Is there any way to use units that are the same regardless of a screen's resolution?

推荐答案

诸如iPhone和iPad的视网膜设备通常使用2个设备像素= 1个CSS像素.像这样的媒体查询:

Retina devices like the iPhone and iPad usually use 2 device pixels = 1 CSS pixel. So a media query like this:

@media all and (max-width: 320px) {
}

实际上，即使它的宽度为640个设备像素，它也将定位到iPhone(纵向).

actually will target an iPhone (portrait), even though it is 640 device pixels wide.

这篇关于视网膜显示屏和1080p手机等高DPI设备如何处理媒体查询中的像素?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！