Responsive design not working on heroku deployed rails app?

Question

I recently deployed a rails app onto: http://secret-brook-8909.herokuapp.com/

I intended it to look on the iphone 4s to look like it would using: http://responsive.victorcoulon.fr/

If you look at the stylesheet of my rails app you will actually see that i hardcoded all the widths of the containers to be 320px. But when I open it on my browser on my iphone it looks like its being opened on a larger resolution screen. Additionally, on the iPhone if you click the profile button, the button doesn't look the same as it does on a normal browser.

What can I do to fix these issues?

Answer 1

您需要在文档的头部添加视口声明

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

Answer 2

I can't see any issues in the HTML code and when I shrink my browser it displays perfectly.

When testing with the iPhone be careful of the caching that Safari does. Make sure you clear the cache and also close down any running instances of Safari before trying again.