css media-query for tablets [closed]

StackOverflow https://stackoverflow.com/questions/23683118

  •  23-07-2023
  •  | 
  •  

题

Now-a-days tablets with 1024x768 are rare. Is it still okay to write media query for 1024x768? do those retina tablets upscale the rendered website in order take advantage of the media queries. twitter bootstrap still goes the old way. what is the real meaning in doing so?

有帮助吗？

解决方案

By default, high resolution tablets/phones will assume around 1024px (it will vary; in my tests a retina iPad defaults to 980px on a page with no body content). Mobile browser zoom the page layout in and out (this is different from user interaction) as necessary. You do not need to create special media queries for 2048 x 1536 retina resolutions. HTML pages can tell mobile browser how to handle layout with the meta viewport tag. See https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag

其他提示

Mention the minimum dpi there to specify specific css for those high resolution displays

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 1024px) { 
    /* Retina-specific stuff here */
}
// "Retina" being "2x":
许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top