mobile - Resolution of smartphone browsers -

mobile - Resolution of smartphone browsers -

i'm curious how android phones calculate resolution of responsive web pages. example, know while iphone 5s has native resolution of 640x1136, resolution uses webpages 320x568. (so can measure elements of design accordingly when needed - typically utilize percentages, need measure elements in pixels)

so, when android phone visits responsively designed website, , has native resolution of 1920x1080, elements on web page beingness rendered in terms of size? 1/2? or different between devices?

the testing i've done isn't giving me clear thought of what's happening.

thanks!

in experience, of time can results want if construction correctly , focus on device width.

device width true measure of pixels on smartphone or tablet, figures resolution typically double retina devices.

structuring correctly means:

(1) in head of doc include meta tag

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

optionally prevent zooming with

<meta name="viewport" content="width=device-width, user-scalable=no" />

(2) in css utilize media queries like

@media (max-width: 480px) { ... } @media (max-width: 767px) { .... } @media (min-width: 768px) , (max-width: 979px) { ... } @media (min-width: 1200px) { ... }

the break points take aren't of import rather prinicple manipulating on-screen display based on pixel widths , not complicating life pixel ratios, resolution, orientation , other related details.

for sure encounter exceptions if start simple , gets results want, avoid slippery slope of trying target devices, , helps future-proof design.

good luck!

mobile browser responsive-design smartphone