Dev tools phone size
When i click on the dev tools in chrome and choose a phone size, lets say iphone XR. it shows my page being responsive but when i zoom out the positioning and margins/padding are completely off. What actually resembles the actual size of the device in the dev tools,t he initial time i choose a mobile size or when i fully zoom out?
My apologies for the post being confusing but this is the best i can explain it.
17 Replies
minimal demo would help a lot
but in devtools the size is the size its not based on when you load
zooming will act like mobile responsiveness if done right too.
media and container queries rely on the viewport so when it changes so does your styles
so if the mobile user doesnt zoom out it should technically be fine?
depends? xD
again can't say without seeing it
ya idk i rarely ever zoom out so it spooked me tbh
zooming out would make it have a larger viewport in a sense
so if it breaks you probably break at that same px vw
This is why I squish test lots of times xD
i do use a touchpad on my laptop and that might be why, im trying to replicate it with my mouse and not sure how
then based on where it breaks I either check if I need a breakpoint(media query) or if matters (if any device would even see it)
again we can't help without an example
🤷♂️
yep but it was more so about the question
this kinda answered it
so ill look into that stuff, thanks!
👍
Like b1 said, dev tools responsive mode only emulates the screen size/aspect ratio and sometimes the address bar ; it can not actually emulate the browser engine and OS of that device. It’s strictly showing the screen size.
what is a good way to find out how it would be displayed on those screens aside from hosting it and looking it up on a phone
I’ve only ever looked it up on several phones. I have some old ones just for testing but there’s some services I think that can try to come close like Testing Bot or Browser Stack
TestingBot
TestingBot: Cross Browser Testing and Mobile App Testing
Instant access to over 5200 browsers with physical iOS and Android devices. Parallel Testing. Automated Testing. Boost your UI test suite in minutes with TestingBot.
BrowserStack
Most Reliable App & Cross Browser Testing Platform
Instant access to 3000+ browsers and real iOS and Android devices for cross browser testing. Ship apps and websites that work for everyone, every time. Get Free Trial.
a better question then, how can i know if my website is somewhat responsive on mobile devices
its more so about showing that i can create responsive/mobile sites to future employeers and not about actually creating a pixel perfect site thats viewable on mobile
Dev tools is a good way in general, but best is to host and test on the device. Most times if it looks good in dev tools responsive modes it will on the device ( nuance being the height because of mobile bars).
I love using polypane but it is pay for. I use it for more features than just responsive panes though too
If you're just needing to test if your project can be responsive on small screen sizes and different aspect ratios dev tools responsive mode can do that for you. Was just letting you know responsive mode can only show you the screen duze of thst device; it is not able to emulate how the project will actually render on that devices browser engine and OS.
But sounds like you just need to check screen sizes so you're good to go.
I've been curious about polypane , what are some of your favourite or most used features ?
Ctrl F5 sometimes you have to do that for some reason it is crazy
I use it for testing while building, from contrast/color blind views other accessibility checks and testing, to meta card previews. It is really handy to have synced panes too.
Also I like to help support the developer behind it