CODEWITHSUNDEEP
cssresponsive-design
Knownow
Knownow

Reputation: 385

What is a CSS pixel in mobile devices?

I have been programming the backend mostly and started learning CSS two weeks back .All these days I was working with laptops and have now started learning responsive design and how things behave in mobile devices . I have been really struggling to understand few concepts for devices with higher pixel density especially how big pixels end up displaying in mobile devices . I've read a lot and ended up being more confused than before .

I understand there are two types of pixels : a) Device Pixels - The actual pixels in a device ( eg my laptop has 1366 x 768 ) and b) CSS pixels - The pixels that we use in CSS (eg width :200px) . There is also a device to pixel ratio which signifies how many device pixel equals to how many CSS pixels . On my laptop this ratio is 1 , so each pixel I use in the CSS maps to each device pixels .On my laptop if I create a box with width : 660px this will be rougly half of my viewport width : (1366-45)/2 =660px , the 45px for the scrollbar etc .

However I do not understand what happens when we use pixel values for mobile devices . Consider the case of Apple iphone 6 which has 750 device pixel and 375 CSS pixel with a pixel ratio of 2 . Now If I draw a box with width : 375px , it shows up as 150 ( do not know what px this is ) in my Chrome Mobile emulator like shown below :

enter image description here

My questions are :

  1. Is'nt the ruler in the mobile emulator in CSS pixels ? ( Since the width of the ruler shows up as 375 px ) .
  2. If the ruler is in CSS pixel then why does my box ( whose width is 375 CSS px) shows up being 150 px on the ruler ? What is the relation between the ruler in the mobile emulator and the px that I use in my CSS ?
  3. What exactly is the use of device pixel then ? Cant I see it ?

What I am trying to understand is how do I know how big my pixels will display in relation to the CSS width / physical width of the device in question .

Upvotes: 1

Views: 1742

Answers (1)

Jkarttunen
Jkarttunen

Reputation: 7621

Adding this to might help to reset the browser zoom level or page width

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5.0, minimum-scale=0.5">

Upvotes: 2

Related Questions