Mobile pixels are different than desktop pixels?

Question

I'm used to develop for desktop computers (10''+ inchs). I'm trying to make a web site to be used ONLY on mobile.

My doubt is the following: I tried to create a a simple large 500x500px.

I tried the resulting page on both Chrome emulated "Nexus 5" (1920x1080 , pixel ration 3) and on real Nexus 5. Same result: in both cases the div is much larger than the screen itself.

I guess this has to do with pixel ration. but I don't understand the link. Any clue?

thanks in advance

Answer 1

When you are developing websites for mobile (especially coming from a desktop background), it is recommended that you use HTML boilerplate as a starting point. There are important and subtle differences for mobile, not to mention edge cases arising from cross-browser issues.

For this specific problem, I suspect that you just need to set set the viewport meta tag, and the image will appear correctly sized:

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