12

I'm developing homepages to myself. The pages looks good on my laptop but I would like to see if it looks good also in my mobile. Can I test how the sites looks in mobile without publishing the site first in the Internet? My laptop has Ubuntu 20.04.

guest
  • 131
  • 4
  • 7
    THis has nothing to do with Ubuntu (or unix, linux, whatever) – Hobbamok May 12 '20 at 02:51
  • 4
    @Hobbamok why do you think? I disagree. The Q is about how to achieve something in Ubuntu. OP did not know that one solution is cross-platform. It could have been placed somewhere else, but it's ok here. – pLumo May 12 '20 at 06:42
  • How would you test once the site has been published? Honest question. – Carsten S May 12 '20 at 14:43
  • Note that you can install a webserver (the software) on your own machine and access that using your mobile if they can see each other on your home network. That allows you to be certain. – Thorbjørn Ravn Andersen May 13 '20 at 07:07

2 Answers2

31

Firefox and Chromium have Responsive Design Mode:

Press Ctrl+Shift+M

(For Chromium accessible only in Developer Tools, in Firefox globally)

enter image description here

muru
  • 69,900
  • 13
  • 192
  • 292
pLumo
  • 22,231
  • 2
  • 41
  • 66
  • 3
    `Super+Alt+M` in Firefox on macOS. – Kusalananda May 11 '20 at 08:18
  • 1
    An alternative, on Chrome, is to press F12 and then click the tiny symbol after the cursor symbol, on the top right corner. – Ismael Miguel May 12 '20 at 12:53
  • 3
    One small note: This method only sets the window size the page is displayed in. Although this is a fairly good preliminary testing method, it does not emulate mobile browser bugs and shortcomings; also, you need to keep in mind that there still are differences between mouse and touch input. The last test before deployment should be on the real device (or in an emulator; Android Studio contains one and is available as a linux build). – orithena May 12 '20 at 13:29
  • @orithena This actually also sets the user agent string (if you use a preset), which (sometimes) is needed to view the mobile version. You may need to refresh once for this to work. – Ismael Miguel May 13 '20 at 08:52
  • @IsmaelMiguel Okay, you're right. I was getting at "it's not a full emulation", but technically you're right. I'll correct myself to "primarily" instead of "only". – orithena May 13 '20 at 08:59
  • @orithena You are right, it isn't full emulation. But it is "good enough". You can test touch events with the mouse, simulate gyroscope and gps location, simulate orientation and it's events and even network conditions. It doesn't simulate the whole mobile rendering, but it's close enough for testing. – Ismael Miguel May 13 '20 at 09:08
  • 1
    @IsmaelMiguel "The last test before deployment should be on the real device" is what I was getting at (yes, I was glossing over details in the sentences before)... and judging by your words, I think we can agree on that. – orithena May 13 '20 at 09:12
  • 1
    @orithena I totally agree! If you have a *real* device, test on it before deployment. You never know which nasty bugs you will find. If you don't have a real device, try installing Android on a VM. Or use Mac's xtools to simulate an iPhone (I found it to be really close, but still not perfect). But the last step should always be to double-check on a real device. – Ismael Miguel May 13 '20 at 09:16
2

IF YOU ARE WILLING TO USE WINE,

Try the chrome based Blisk (blisk.io). It's great for web design as you can preview for tons of common mobile platforms.

Yellowsink
  • 21
  • 2