My device has 720px resolution but in browser width is 360px

Question

My mobile device is HTC One X, resolution: 720x1280

I need to do responsive web-page

in html i write <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;" />

But in browser i have 360px width. I have checked it using $(window).width() or document.width

Answer 1

It renders at 360px wide, but the depth is 720px. In other words, it uses 4 pixels to display 1 normal pixel. So all normal graphics will appear blurry as it's upscaling the image twice the size. So the solution would be to create twice as big images, and scale them down 50%.