Search code examples
cssmobileresponsive-designremote-debugging

CSS is different in smartphones/mobile

I am building a website but the responsive CSS is not applied on mobile as I would want it to be. I would like my site to be displayed like so (checked by Chrome dev tools): enter image description here

However, when my site is deployed in production, the site's layout is completely different and it differs between Chrome, Safari and SNS browsers.

For Chrome enter image description here

For Safari enter image description here

For SNS browsers (FB Messenger in this case. Slide is different but the styling is practically the same for all) enter image description here

I've had many problems like this where the design I applied to in Chrome Dev Tools is not applied in real life, and everytime these kind of things happen and so far I just use navigator.useragent to detect the browser type and apply specific css for each type of browser, but I'm sure this is an overkill.

When this happens, is this usually because chrome dev tools is not accurate, or because my logic is weak? And are there any way to remotely inspect DOM elements on mobile (I'm using OSX) so that I can check what exactly is going on?

Thank you!

Solution

  • Each browser renders differently but I think you might have hidden root or body padding or margin I suggest you play with those either through * {} or body {}