Hello fellow campers,
as I’m about to finish the Java Script module here at fCC, I’m revisiting my Responsive Web Design projects before approaching the Front End Development libraries certificate.
I think I’m more confused now about media queries than I was back then when I was doing the RWD projects.
Let me explain.
I’m not a big fan of large-screen phones (right now I have a 2016 iPhone SE), so I’ve always tested my media queries with the web developer tools on my laptop running Firefox, just resizing the simulated screen area (which now I think was not the way to do that).
Also, trying to visualize my projects from my phone in Codepen is an absolute nightmare, so I never really checked them from my phone.
The point is, I’m realizing these days that my projects really don’t look good on a small screen.
I’d like to fix that, but I don’t understand one thing: activating/deactivating touch simulation changes the appearance of the page dramatically, in general elements are much smaller than I intended them to be.
Have a look at the pictures, it might be easier to understand what the problem is.
I’ve read in some threads here stating that there are some quirks in how Apple devices or Safari handle these things, but I see the same issue simulating other brands’ devices (using web developer tools).
So how should one handle this? Two types of media query, one for the screen size and one for the device type (touch / no-touch)? This looks like a nightmare to me.
Am I missing something here? Please enlighten me.
On a related topic, do you guys use some easy-to-set-up method for visualizing your web pages on multiple devices while you’re working on them (without owning a domain)?
Thank you, and sorry for the long, moaning post.