Pixels and Font boosting


dips: Device Independent Pixels

HP : Hardware pixels

dips * 2 =  HP


Font Boosting 

Unless you told website in small device

The font size and other elements remain same size as large device.

you will find the font is not fit with new screen.



Question :

You look up the tech specs for the screen of a mobile devices and find it has a resolution of 1920 x 1080 pixel. what are the tech specs referencing

a. Device and Independent Pixels (dips)

b. Hardware Pixels

c. CSS pixels.

The Answer is b ,Tech specs will refer to the number of hardware pixels.

Calculating DPR Quiz 

Screen Shot 2016-05-08 at 4.04.59 PM.png

With one dip for every two hardware pixels, the device pixel ratio is 2!


Different Size ?

Screen Shot 2016-05-08 at 4.07.31 PM.png

The viewport and the device pixel ratio are both likely causes for the differences between devices.


Calculate Pixels size 

Screen Shot 2016-05-08 at 4.11.41 PM.png

Divide 1920px by 2 and you get a viewport width of 960 CSS pixels.

How Wide Is The Viewport? 




Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s