Search code examples
iosfacebookbrowsersafariin-app

Safari (in-app) browser breaking website rendering


I have some issues with the browser safari(in-app). I have a website http://www.instylebuzz.com working perfectly. Somehow I see very different versions of my website when I open it within in-app browser (specifically FB)

When I say different versions, it means depending on the browser version (or maybe the app version), the website style is looking different. It is right I have a lot of differences between my mobile, tablet, and desktop version, but nevertheless, I should not see broken style, because the three of them are styled ok.

So, my questions is simple, how can I effectively target in-app browser, knowing the user agent can change per app version/browser/os version? How can I fix my website rendering on in-app Browser.

I'm searching days and nights for this solution, it would be very kind if someone know/can help with my problem.

Thanks,

Simon

PS: for purposes, you should check a post rendering on the website, not a category or homepage.


Solution

  • I know this has been some time since this thread. But if someone encounters the problem, here is the solution.

    Because the safari (in-app) and Safari classic on iOS have different default browser styles, if you see some css issues, it is because each browser interpret your css in a different way, and sometimes it might not be the result you expected.

    Therefore, you can use: Meyer Reset CSS, but you will probably have some work to do on your CSS to make everything good again. https://meyerweb.com/eric/tools/css/reset/

    User normalize.css https://necolas.github.io/normalize.css/