Retina display device width is not autofit in on ipad when using device width

Question

Currently I am working for a website where I used Retina Ready Coding. The retina display (new iPad) has a resolution of 2048 x 1536 pixels while the general iPad/Tab has resolution of 1024x768 pixels. As per Retina’s law, Whenever I used body width / container width 1536px in

@media only screen and (min-device-width: 768px) and (max-device-width : 1024px) and (-webkit-min-device-pixel-ratio: 2) { body{ width: 1536px !important; }, .container{ width: 1536px !important; } }.

This should autofit the width:1536px into 768px(as its pixel-ratio-2). But It showing zoomin the full site into iPad. Whenever I touched into the iPad it goes to fit into 768px from 1536px in width. Do anyone have any solution for this? I am facing same problem for Retina display Mobile device.

Answer 1

Have you set a viewport using meta tags? this behaviour looks like there is no viewport meta tag. Try changing/adding the viewport settings with this meta tag:

<meta name="viewport" content="width=device-width">

or this:

<meta name="viewport" content="initial-scale=1.0">

or both:

<meta name="viewport" content="width=device-width, initial-scale=1">

also check this link for explanations

Answer 2

Problem is solved !!!

I have to used this meta TAG

<meta name="viewport" content="width=device-width, maximum-scale=1.0, user-scalable=1" />

Thank you,