13

I'm developing a mobile website for iPhone, Android, etc. using jQuery Mobile. I'd like to be able to test this in my desktop browser and was wondering what the best approach is. I guess I could use a plugin to change the User-Agent header to the appropriate value and manually resize the browser to the device's width, but is there a simpler/more reliable way?

Update

Sorry, I should have mentioned that the only hardware available is a Windows laptop

Dónal
  • 185,044
  • 174
  • 569
  • 824

7 Answers7

7

Well if you have a Mac and xCode is installed you can use the Simulator. Open Mobile Safari and point to you web page on all Apple devices

You can also use the Android Emulator ( But I've not tested that it can access the web from the browser )

Alternatively you could use a plugin ( as you have suggested ).

I personally use Chrome with this plugin:

with pretty good results.

I've used Device Anywhere before

you access the device through a web portal/site and control it, but this costs $$$

Actual device testing in going to be the most reliable

related:

Community
  • 1
  • 1
Phill Pafford
  • 83,471
  • 91
  • 263
  • 383
  • 3
    Chrome comes with a UA changer and Device Metric "matcher." In Chrome, open the dev tools (F12) and then click the Preferences icon (a gear at the bottom right), then click on the "User Agent" tab and choose "Override User Agent" and "Override Device Metrics" (by default when you change the UA to something mobile, Chrome should automatically setup the device metrics for that device). I know this is available since Chrome 21 and it may have been offered sooner. – Jasper Sep 14 '12 at 16:49
  • @Jasper Thanks! that's a gem I'm going to have to start using – Phill Pafford Sep 14 '12 at 17:35
6

In Chrome hit F12 to open the Developer Toolbar. Then click 'Toggle device toolbar' (tablet icon, top left next to select element). You can then choose the device at the top to test.

Jay Walks
  • 333
  • 3
  • 11
  • 1
    This is certainly a useful feature, but it doesn't actually run Chrome Mobile, so there are at least minor differences in what you'd actually see on a mobile device. For instance, I was fixing a CSS layout issue that was visible from my Android phone running Chrome Mobile, but not from this interface. – kevinmicke Apr 09 '18 at 20:35
  • This only changes width and height of browser but there can be a lot of things that could differentiate phone from desktop browser – Ferus Apr 17 '20 at 12:26
1

There's also PerfectoMobile for testing on devices remotely...though it can be painfully slow. I'd really recommend at least getting some 'base' testing devices, if possible.

Rosie Sherry
  • 41
  • 2
1

There is also http://www.browserstack.com/responsive that can be used to get a screenshot of what your site would look like on a number of given devices.

There is however a limitation of how many screenshots you can get in the free version I have linked to here.

DevJoe
  • 419
  • 3
  • 17
1

I got nice results, visualy, by using Chrome add-on called Ripple Beta. Bad thing is that there is no ability to add some custom device, like tablets of 8" or 9" or bigger... but works. I'm not sure is it able to show some errors visible on real device but seems nice.

Ludus H
  • 239
  • 2
  • 15
0

Manymo should work very well simulating Android for you. It shows me exactly what my cell phone shows, even though my desktop browsers don't. Manymo is a website with a lot of Android phones pictured. Just click one and enter your URL. There are options such as Android versions and screen sizes.

frayser
  • 1,754
  • 10
  • 17
0

Look for the Chrome plugin Responsive Web Design Tester - you'll be able to emulate mobile browsers for different device sizes on all platforms.

Brian Burns
  • 20,575
  • 8
  • 83
  • 77
MantasG
  • 223
  • 1
  • 2
  • 12
  • On the link, the developer appears to have lost their domain, or at least it doesn't point where it used to. – kevinmicke Apr 09 '18 at 20:38