CODEWITHSUNDEEP
cssresponsive-design
Ris
Ris

Reputation: 1912

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

I am working on a responsive design and I started using firefox responsive design view with my media queries, they all work on it..but when I start using safari on iphone5s it doesn't work. I do have the

<meta name="viewport" content="width=device-width, initial-scale=1.0" /> in my head tag...am I missing something that needs to be there for safari/iphone 5s ? Thanks in advance!

I've tried these

/* iPhone 5 Retina regardless of IOS version */
@media (device-height : 568px) 
   and (device-width : 320px) 
   and (-webkit-min-device-pixel-ratio: 2)
/* and (orientation : todo: you can add orientation or delete this comment)*/ {
                 /*IPhone 5 only CSS here*/
}

or try with @media screen:

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

}

Upvotes: 0

Views: 4617

Answers (3)

Rob Sterlini
Rob Sterlini

Reputation: 342

It might be better to not focus on designing specifically for the iPhone 5, given that the iPhone 6 and 6+ have entered the fray (and that users are still using 4S devices as well).

It would be better to think device-agnostically and design to the viewport width. As @Yoshi has said, specifying the viewport properly will ensure that all devices show the site at the intended pixel width.

Although I would guard against disabling zoom (by specifying the maximum-scale). This breaks affordance and makes it difficult for some users to interact with your site as they may expect to be able to. 

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

From there you can specify pixel based media queries:

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

This is a very simple example of how an item would adapt across different browser widths.

This approach is far more future-friendly as well, as who knows how big or small the devices will be that come out. Good luck! =)

Upvotes: 3

Tomasz
Tomasz

Reputation: 81

in Your situation I will be try some diference like 

meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,    user-scalable=no"

And in css I will be try this

@media (max-device-width: 640px) { your style }

Upvotes: 2

EdwardM
EdwardM

Reputation: 1146

As far as I know, I think the major responsive frameworks look at the device screen widths. Maybe try utilizing the rules set here:

http://css-tricks.com/snippets/css/media-queries-for-standard-devices/

http://getbootstrap.com/css/#grid-media-queries

http://foundation.zurb.com/docs/v/4.3.2/media-queries.html

Upvotes: 1

Related Questions