Strange responsiveness behavior with a website

Question

I would like to say that I am not really experienced with HTML, CSS and etc.. due to the fact that recently I started to read and learn them.

I am trying to make a responsive website but when I was thinking that everything was going really smooth I faced up something that really confused me. When I am browsing the website through my phone (640x320 - landscape or 320x640 - portrait) the website looks great. Exactly how it should be. Then I decided to expand the range of screen resolutions. I am using Google Chrome and the feature called "Toggle device mode". When I am browsing the website with the "Toggle Device Mode" on 640x320 pixels or other variations the website isn't the same as browsing it from the phone. To be clearer, I will attach pictures so you can see exactly what I am talking about.

When I am browsing through the phone: http://s17.postimg.org/bwybjg84f/Phone.png
when I am browsing through the Toggle device mode on Google Chrome: http://s17.postimg.org/xgtgdn31b/Computer.jpg

PS: After "Toggle Device Mode" I tried many other websites which test your website responsiveness and everyone showed that gap between the two sections. Can you tell me if I should be worried or not? From where comes this difference between the phone and the responsiveness simulators? Is it fixable? If someone can help me I would be really grateful. Thanks in advance.

PSS: Sorry for my English but I am not a native speaker.

Please provide also an url to the website. Without the code and web overview, its impossible to help you. — Paweł Skaba, Dec 03 '15 at 10:56
buddy!! whenever you post a question on Stack Overflow, please remember to share your code as well! We can't find mistakes blindly!! — Deepak Yadav, Dec 03 '15 at 10:59
You need to read this http://stackoverflow.com/help/mcve and this http://stackoverflow.com/help/how-to-ask **before** post a question — Marcos Pérez Gude, Dec 03 '15 at 11:01

score 0 · Answer 1 · answered Dec 03 '15 at 10:58

Toggle Device Mode only changes the size of your the viewport the website renders in.

When viewing the website only a mobile phone, the phone is using a different browser to the computer, and that browser is coded differently. Depending on how it has been coded, the result may be different, since it interprets the HTML page in a different way.

This is very similar to problems developers face when making their webpage compatible with multiple browsers (on computers).

Strange responsiveness behavior with a website

1 Answers1