css media-query for tablets [closed]

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

  •  23-07-2023
  •  | 
  •  

Domanda

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?

È stato utile?

Soluzione

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

Altri suggerimenti

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":
Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top