DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’»

DEV Community πŸ‘©β€πŸ’»πŸ‘¨β€πŸ’» is a community of 963,274 amazing developers

We're a place where coders share, stay up-to-date and grow their careers.

Create account Log in
Calin Baenen
Calin Baenen

Posted on

As someone who can only primarily test (web)apps on PC, how can I make sure my site looks good or mobile?

Top comments (10)

Collapse
 
joelbonetr profile image
JoelBonetR

Open Google Chrome, visit your site, press F12 key or mouse right click -> inspect.

At the top left of the developer tools you'll see an icon of a phone in front of a tablet, like that:

but without the desktop screen.

Hit it, and then at the top of Chrome, just below the address bar you'll see a drop down, where you can select multiple devices.

Hope it helps

Collapse
 
fairolesia profile image
Olesia_Fair • Edited on

search.google.com/test/mobile-frie...
But resizing the browser window isn't even close to the same as testing on a real device. You're going to end up in a situation where someone with a certain iPhone model exhibits a bug, which you cannot reproduce on a desktop browser.
Another option is to run android/iOS on a virtual machine, but especially the latter may be difficult, as iPhone emulator is only available for MacOS.

Third, obvious and expensive option is to buy a bunch of different mobile phones to test with, and periodically buy the new models.
printsbery.com/digital-planners/go...

Collapse
 
baenencalin profile image
Calin Baenen Author

search.google.com/test/mobile-frie...
But resizing the browser window isn't even close to the same

So, are you saying that the test site checks only by resizing the browser, or are the URL and the sentences after separate?
I'm assuming the former but wanna be sure.

Collapse
 
baenencalin profile image
Calin Baenen Author

and periodically buy the new models.

Huuuh.
So thaaaat's how it started!
Β Β Β Β /j

Collapse
 
shinspiegel profile image
Jeferson 'Shin' Leite Borges

On the devtools you have the option to test the your webapp on the mobile version, including the touch funcitonality.

Collapse
 
taufik_nurrohman profile image
Taufik Nurrohman

I’d rather borrow my friend’s phone and then browse the web there.

Collapse
 
baenencalin profile image
Calin Baenen Author

then browse the web there.

What is "there"?

Collapse
 
taufik_nurrohman profile image
Taufik Nurrohman • Edited on

On his/her web browser. If you just want to check different screen width and don’t care about the actual user agent, then you can use native web developer feature on Chrome or Firefox.

Ctrl+Shift+M on Firefox.

Thread Thread
 
baenencalin profile image
Calin Baenen Author

I see.
Why do you prefer an actual phone over dev-tools?

Thread Thread
 
taufik_nurrohman profile image
Taufik Nurrohman • Edited on

Touch screens have different web API. You will know the difference, for example, when your draggable element suddenly not working on mobile because your draggable functions uses mousedown event instead of touchstart.

It is also not possible to simulate pinch/zoom event using mouse. Because unlike hand, mouse only have one cursor/pointer.

Take a look at this:

Settings

Go to your customization settings to nudge your home feed to show content more relevant to your developer experience level. πŸ›