css - my responsive design doesn't work on safari/ iPhone 5s -

css - my responsive design doesn't work on safari/ iPhone 5s -

i working on responsive design , started using firefox responsive design view media queries, work on it..but when start using safari on iphone5s doesn't work. have

<meta name="viewport" content="width=device-width, initial-scale=1.0" /> in head tag...am missing needs there safari/iphone 5s ? in advance!

i've tried these

/* iphone 5 retina regardless of ios version */ @media (device-height : 568px) , (device-width : 320px) , (-webkit-min-device-pixel-ratio: 2) /* , (orientation : todo: can add together orientation or delete comment)*/ { /*iphone 5 css here*/ }

or seek @media screen:

@media screen , (device-aspect-ratio: 40/71) { }

it might improve not focus on designing iphone 5, given iphone 6 , 6+ have entered fray (and users still using 4s devices well).

it improve think device-agnostically , design viewport width. @yoshi has said, specifying viewport ensure devices show site @ intended pixel width.

although guard against disabling zoom (by specifying maximum-scale). breaks affordance , makes hard users interact site may expect able to.

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

from there can specify pixel based media queries:

.item { width:25%; } @media screen , (max-width:750px) { .item { width:33%; } } @media screen , (max-width:450px) { .item { width:50%; } } @media screen , (max-width:250px) { .item { width:100%; } }

this simple illustration of how item adapt across different browser widths.

this approach far more future-friendly well, knows how big or little devices come out. luck! =)

css css3 responsive-design