Sidebar Sidebar
Become a MacRumors Supporter for $50/year with no ads, ability to filter front page stories, and private forums.

Looking for a mobile webpage emulator.

PinkyMacGodess

PinkyMacGodess

Suspended
Original poster
Mar 7, 2007
10,271
6,228
Midwest America.
I am looking for a way to test mobile websites on Firefox on my Mac Pro. I haven't looked that far yet, but am finding some sites that offer that, for a cost. I can't afford to pay for that functionality on a progect I get no money out of.

Thanks for any ideas...

So far, my experience has been that when I try to go to a mobile site on the iMac version, it automagically flips to the standard, non-mobile, website...
 
PinkyMacGodess said:
I am looking for a way to test mobile websites on Firefox on my Mac Pro. I haven't looked that far yet, but am finding some sites that offer that, for a cost. I can't afford to pay for that functionality on a progect I get no money out of.

Thanks for any ideas...

So far, my experience has been that when I try to go to a mobile site on the iMac version, it automagically flips to the standard, non-mobile, website...
Click to expand...
Not sure, if it's exactly what you're looking for, but Firefox comes with responsive design mode that allows you to test the reponsiveness of websites. https://developer.mozilla.org/en-US/docs/Tools/Responsive_Design_Mode
 
PinkyMacGodess said:
I am looking for a way to test mobile websites on Firefox on my Mac Pro. I haven't looked that far yet, but am finding some sites that offer that, for a cost. I can't afford to pay for that functionality on a progect I get no money out of.

Thanks for any ideas...

So far, my experience has been that when I try to go to a mobile site on the iMac version, it automagically flips to the standard, non-mobile, website...
Click to expand...
Make the window smaller.

If the page retains the desktop styling the developer has used the outdated user agent/browser sniffer method of determining which stylesheet to load as opposed to using a layout which is actually responsive, in which case you can use a user agent switcher and refresh the page to see the different layouts.
 
Rab Simpson said:
Make the window smaller.

If the page retains the desktop styling the developer has used the outdated user agent/browser sniffer method of determining which stylesheet to load as opposed to using a layout which is actually responsive, in which case you can use a user agent switcher and refresh the page to see the different layouts.
Click to expand...

The main site is hosted through a company called 'club express'. I have *some* control over things, but a lot of the basics are out of my control. I found out that they use a menu on the bottom of the mobile screen, which makes things easier to use. I checked, and there are very limited things that I can do. I will probably have to keep my iPad next to the monitor to keep referencing the changes. They also make it hard to 'revert'. The changes are 'permanent'. It makes development rather an example of, perhaps, driving the rovers on Mars. Frustrating, but it's what I have to live within.
 
PinkyMacGodess said:
The main site is hosted through a company called 'club express'. I have *some* control over things, but a lot of the basics are out of my control. I found out that they use a menu on the bottom of the mobile screen, which makes things easier to use. I checked, and there are very limited things that I can do. I will probably have to keep my iPad next to the monitor to keep referencing the changes. They also make it hard to 'revert'. The changes are 'permanent'. It makes development rather an example of, perhaps, driving the rovers on Mars. Frustrating, but it's what I have to live within.
Click to expand...
It sounds like a SAAS site as opposed to a site which has been developed bespoke.
 
PinkyMacGodess said:
I am looking for a way to test mobile websites on Firefox on my Mac Pro. I haven't looked that far yet, but am finding some sites that offer that, for a cost. I can't afford to pay for that functionality on a progect I get no money out of.

Thanks for any ideas...

So far, my experience has been that when I try to go to a mobile site on the iMac version, it automagically flips to the standard, non-mobile, website...
Click to expand...

you have a variety of options. To start with, in Firefox, get the http://getfirebug.com/ extension. This is probably one of the best tools around, and it does offer the ability to preview a site simulating various browsers, operating systems and platforms.
Also, enable the developer tools in Safari, which as a very nice 'responsive design mode' that will let you preview a site simulating various phones, tablets, etc...

Now, if you're technically inclined, https://www.browsersync.io/ is a great option, especially if you use Grunt or Gulp as a web designer.
 
Safari can (enable the developer menu) and it's pretty nifty.
Chrome (again enable developer)

But why you want to pay to those online services, would be to test on different web-engines (i.e. IE, Firefox etc.) there are some sites that do it for free, but yeah, it's impossible to think of "all" the use-cases and you can't be 100% sure it all works as intended all around.
 
Virtual Machine Software can be a great option, too. VirtualBox is free and open-source. With that, you can spin up any Linux variant in OS X, and even Microsoft is getting into the act. https://dev.windows.com/en-us/microsoft-edge/tools/vms/mac/ allows you to run any combo of IE, from IE6 on XP to Edge on Windows 10. Each VM expires after 90 days and needs to be re-created, but it is an excellent test resource, and Microsoft deserves some credit for providing this (and making their browsers better)
 
  • Like
Reactions: dan1eln1el5en
There are 2 general ways to run a mobile version of a website on a desktop browser and you should never pay for software to do this. Which one you need to use depends on how the site was designed.

1) Setup your browser to send a different User Agent. This is the way to go if the website was designed in such a way to render differently depending on the user agent. On Safari, enable the developer menu, Develop->User Agent, select the one you want, refresh the page. This is common for websites that only have 2 versions: a desktop version and a mobile version.

2) Simply shrink the size of your browser window. Some websites render their layouts differently depending on the window size, instead of relying on the User Agent to determine how to render it, in order to accommodate lots of different screen sizes/resolutions. Websites that follow the responsive web design approach use this method.

Try both to determine which one is appropriate.
 
I use chrome dev tools.
Also,
xcode has iPhone and iPad emulation.
right click on Xcode app> show package contents > contents >developer > applications > simulator
 
You must log in or register to reply here.
Register on MacRumors! This sidebar will go away, and you'll see fewer ads.
Top Bottom
Back