2

I am setting up a responsive website and I have breakpoints set up like this using a SASS mixin

@mixin breakpoint($point) {
   @if $point == laptop {
     @media (max-width: 1600px) { @content ; }
  }
    @else if $point == tablet {
     @media only screen 
      and (min-device-width : 768px) 
      and (max-device-width : 1024px) { @content ; }
  }
  @else if $point == mobile {
    @media only screen 
    and (min-device-width : 320px) 
    and (max-device-width : 568px)  { @content ; }

  }
}

And I have this on the header. 

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

When I resize the browser window the breakpoints apply perfectly and everything works just fine and the breakpoints apply perfectly. Chrome, Safari, Firefox all of it.

But when running the Chrome iOS emulator for iPhone or iPad (portrait) the breakpoints do not work and I get this horrendous side-scroll bar. I even forced the wrapper to be 200px and I can see everything fitting to that space but the HTML and Body still seem to be much larger than the phone screen.

Any clues as to why the breakpoints would work great on browser but fail miserably on iOS?

Lucas Urdiales Moreira
  • 44
  • 1
  • 8
  • possible duplicate of [What is the difference between max-device-width and max-width for mobile web?](http://stackoverflow.com/questions/6747242/what-is-the-difference-between-max-device-width-and-max-width-for-mobile-web) – cimmanon Mar 19 '14 at 14:15
  • Cimmanon... thanks man! That is totally totally it. I tried the search but never thought of it being a max-device-width issue. I changed the whole thing over to max-width and it seems to work. Thanks again! – Lucas Urdiales Moreira Mar 19 '14 at 14:33

0 Answers0