Question

I’ve designed a responsive website here: http://zarin.me/cce/

I’ve used Twitter Bootstrap for the responsive design. One of the responsive breakpoints is at 641px (see http://zarin.me/cce/css/responsive.css), which works great when I change the browser width on my laptop.

However, when I access the site on an iPhone 4s, the responsive design doesn’t change. I’ve also set the breakpoint to 480px, and no luck. What am I missing?

Answer 1

You need a viewport meta tag to inform the mobile browser that the website is compatible with mobile , otherwise mobile tries to display 900 pixels and css feels the device is 900px

try this in your head

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