How to emulate the mobile version

I'll list below a number of ways to emulate the mobile version on your Computer.

Shortcut :

• Firefox
  
• Chrome
  
• Internet Explorer
  
• Safari
  
• Opera
  

Firefox

Firefox currently lacks an easy way to spoof your useragent, but it's still possible. First enter the following into your address bar and click enter.

Code:

about:config

It may ask you to confirm, if so, click "ok". Now search general.useragent, and in the blank area below right click, go to new, and choose string.

In the first prompt input the following and click OK.

Code:

general.useragent.override

In the second prompt input a new useragent. The one I provide below is for a mobile browser, you can find more here. Click OK when you're done.

Code:

Mozilla/5.0 (Linux; U; Android 2.3; en-us) AppleWebKit/999+ (KHTML, like Gecko) Safari/999.9

Go to a Forumotion forum and you should now see the mobile version. You can use your devtools (F12), or wrench from the omnibox to inspect the elements and make modifications.

To revert back to your normal useragent follow the same steps, except right click on general.useragent.override and click reset.

Chrome

For Google Chrome press F12, or go to Omnibox > More tools > Developer tools

Click the phone to toggle device mode.

Go to Device and choose a mobile device from the drop down such as the iPhone.

Once selected, reload the page and you should now see the mobile version.

To revert back to your default useragent, simply toggle device mode from the tools and reload the page.

Internet Explorer

For Internet Explorer press F12, or go to Tools > Developer tools

Go to Emulation, and under browser profile choose Windows Phone.

After that you should be met with the mobile version. Note that you may need to change the resolution, because it can be a bit glitchy.

To exit the emulation either change back to desktop, or close the devtools.

Safari

To emulate the mobile version for Safari make sure the develop menu is shown in the menu bar. To do that, go to Settings > Preferences :

Go to the Advanced tab and tick "Show develop menu in menu bar" :

Next go to Page > Develop > User Agent and pick a mobile device from the selection, such as the iPhone.

After that, the page will reload to display the mobile version. To revert back to your default User Agent, follow the previous steps, but choose "Default" from the useragent selection.

Opera

Opera is pretty much the same as Chrome. To change your useragent, right click and choose inspect element from the context menu.


Next follow these 3 easy steps :
1. Click the "toggle device mode" button
2. Choose a mobile device from the device dropdown
3. Reload the page


After this, you will see the mobile version of your website. To undo these changes, simply toggle device mode or close the devtools, and reload the page.

Notice

Tutorial written by Ange Tuteur. Reproduction not permitted without consent from the author.

i did not understand all but
looks good idea
the most thing i do not understand is
the goal of changing to the mobile view

thanks again

Thanks.

It's useful if you want to :

• Preview style changes
  
• Debug any scripts that cause errors on mobile
  
• Get classes to style the mobile version
  

i see
thanks a lot for that great idea
one more thing is this will make all sites work as mobile view ?
thanks again and Merry Christmas

Yes, it'll also make other sites that have a mobile version show it.

Happy holidays.

wow
i wish i have 1% of your skills
is this trick possible for Safari
you are amazing

I'm not sure as I've never used Safari.

http://support.apple.com/kb/DL1531
this is the link to Safari
i like to use that one cuz its cool while internet speed down
its the only version for PC

Thanks, sorry I was busy working on this yesterday.

Safari is pretty simple actually.

Go to Settings ( cog icon ) > Preferences > Advanced and enabled "Show develop menu in menu bar"

Go to Page settings ( page icon ) > Develop > Useragent and choose "Safari iOS - IPhone"

 
you dont have to apologize
i know your busy coding a lot of things also thanks for the help
i did not thought it would be that easy
also as soon as you free look at this topic
http://help.forumotion.com/t137975-problem-with-title-of-watched-topics-in-notifications
i wonder how i should thank you
you are my savior

You're welcome

I'll have to add it to the list when I get the chance.

Added Safari to the list.

Thanks Ange. Works perfect for Firefox, can you please add for Opera if you find and if it's possible on it?

Ikerepc wrote:Thanks Ange. Works perfect for Firefox, can you please add for Opera if you find and if it's possible on it?

I'll have to download Opera and check it out. It should most likely, but I can't confirm since I've never used it before. When I get the change I will check it.

Ok, thanks

@Ikerepc,

I added Opera to the list. In case you didn't know, you can also open the developer tools by pressing CTRL + SHIFT + I on windows.

I know that, same like Firefox but Firefox is better a lot.

Thanks

WOW, that was so easy, I need just click at button with mobile lol
I feel soo stupid now, I tryed everything except it