Search code examples
htmlcssretina-displayretinapixel-ratio

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

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.

Solution

  • 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,