Is there a way to properly check how your website looks on different devices?

I've seen that some components in my website look differently when using a Samsung A11 VS Xiami Mi Note Pro 10 for example. But I had to physically check this to know it, since on Firefox/Chrome responsive view it looks fine, so I was wondering if there's a (ideally free) way to properly check how your website looks on different devices. Like, truly simulation software?

b1mind•1/19/23, 9:16 PM

There is no free vm solution unfortunately... Cost money to emulate/vm so. Browser stack is the one though

b1mind•1/19/23, 9:33 PM

Also know that if you are using vw/vh it can display differently than responsive devtools because of mobile bars and how it handles the ICB

b1mind•1/19/23, 9:34 PM

Hard to say without seeing the site but yea. Just something to keep in mind/avoid.

Bb1mind Also know that if you are using vw/vh it can display differently than responsive...

MuhctOP•1/19/23, 9:41 PM

Yup, in my experience vw/vw is too unpredictable so I don't use it

MuhctOP•1/19/23, 9:41 PM

In your experience, what things or CSS properties did you notice that behave differently in different devices? For example on google chrome+firefox the text-clamp I had worked great, but didn't worked at all on a iOS device using Chrome

b1mind•1/19/23, 9:44 PM

so right now iOS is all webkit skinned

b1mind•1/19/23, 9:44 PM

by 2023 because of EU laws they have to free the browsers to be real thing. So you battle is with Safari period

b1mind•1/19/23, 9:45 PM

https://joyofcode.xyz/test-your-site-in-every-browser is a great way to test webkit for free

b1mind•1/19/23, 9:46 PM

still not going to catch all teh iOS stuff that might differ though. Honestly most things work the same now days. But when its wrong its normally because of a shorthand or property not supported well yet. https://caniuse.com is a great source to check properties you are unsure of.

b1mind•1/19/23, 9:47 PM

Somethings still need a prefix -webkit- too not many but some

b1mind•1/19/23, 9:47 PM

for that I normally use autoprefixer plugin with postCSS/scss

b1mind•1/19/23, 9:48 PM

aka welcome to web development, cross browser support has been a thorn (and was way way worse) since the start of it.

MuhctOP•1/19/23, 10:02 PM

Nice, that Playwright way of testing webkit emulates both desktop and mobile?

MuhctOP•1/19/23, 10:02 PM

Seems like the framework I'm using (NextJS) uses PostCSS right off the bat, so that's nice

b1mind•1/19/23, 10:08 PM

no its just webkit desktop, you can't emulate mobile bars without the device (like BrowserStack does it)

b1mind•1/19/23, 10:09 PM

Also it will not be as performant, like for me some animations will appear to lag or slow down Playwright. Far as CSS is concerned its helped me a lot testing with it though.