0

My HTML fluid site isn't scaling properly on iPhone 4/S/5 and iPad devices. My minimum container div scale is set to 480px. I do not see why it's not scaling properly. Might it be in my meta: initial-scale=1.0?

jsfiddle here: http://jsfiddle.net/CtPpg/2/

user1040259
  • 6,369
  • 13
  • 44
  • 62

2 Answers2

3

Could it be that you are setting a px width for your min-width? Correct me if I am wrong, but it should be a percentage value, to make it truly fluid.

Rchristiani
  • 424
  • 3
  • 18
1

the max-device-width for ipads is 1024 whereas for iphones, its 480px. you may need to use media queries to address both the devices.

ipads : @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {

iphones: @media only screen and (max-device-width: 480px) {

look at this jsfiddle

changes:

 max-width: 480px; 
 /*max-width: 800px;  #### set your max width here #### */
Teena Thomas
  • 5,139
  • 1
  • 13
  • 17
  • shouldn't my fluid widths take care of this? I also want this to be viewable on desktop browsers, so a minimun of 480 isn't great. Thanks for your help – user1040259 Sep 24 '12 at 19:00
  • I have put together a blog http://silence-uncovered.blogspot.com/ , with whatever I learnt when I did an HTML email for desktops, mobiles etc, shouldn't be much different for websites. Basically, you would need to read/experiment a bunch :) ...good luck! could you pls accept my answer, helps me get some points. – Teena Thomas Sep 24 '12 at 19:06
  • to make it work on desktops as well you would probably need `width='100%' min-width='480px'` – Teena Thomas Sep 24 '12 at 19:14