How to view the mobile version on your computer Hitskin_logo Hitskin.com

This is a Hitskin.com skin preview
Install the skin • Return to the skin page

The forum of the forums
Would you like to react to this message? Create an account in a few clicks or log in to continue.
The forum of the forums

    How to view the mobile version on your computer

    Ange Tuteur
    Ange Tuteur
    Ange Tuteur
    Forumaster


    Male Posts : 13246
    Reputation : 3000
    Language : English & 日本語
    Location : Pennsylvania
    • Post n°1

    How to view the mobile version on your computer Empty How to view the mobile version on your computer

    Post by Ange Tuteur July 10th 2015, 12:03 pm

    How to view the mobile version on your computer


    This topic will highlight ways to view the mobile version on your computer by using an internet browser. It's something important to learn if you want to inspect the elements on the mobile theme, or preview changes you've made to the templates / CSS. You'll find a list below which contains a walkthrough on how to view to mobile version using a specific browser.

    Select a browser :



    Mozilla Firefox
    Firefox currently lacks an easy way to spoof your useragent, but it's still possible by editing the config. 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.
    How to view the mobile version on your computer Scr10

    In the first prompt input the following and click OK.
    Code:
    general.useragent.override
    How to view the mobile version on your computer Scr11

    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
    How to view the mobile version on your computer Scr12

    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.
    How to view the mobile version on your computer Screen14

    To revert back to your normal useragent follow the same steps, except right click on general.useragent.override and click reset.
    How to view the mobile version on your computer Scr13


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

    Chrome is quite simple, all you need to do is click the phone to toggle device mode.
    How to view the mobile version on your computer Src10

    Go to Device and choose a mobile device from the drop down such as the iPhone.
    How to view the mobile version on your computer Scr14

    Once selected, reload the page and you should now see the mobile version.
    How to view the mobile version on your computer Scr15

    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.
    How to view the mobile version on your computer Scr16

    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 buggy.
    How to view the mobile version on your computer Scr17

    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 :
    How to view the mobile version on your computer Scr110

    Go to the Advanced tab and tick "Show develop menu in menu bar" :
    How to view the mobile version on your computer Scr210

    Next go to Page > Develop > User Agent and pick a mobile device from the selection, such as the iPhone.
    How to view the mobile version on your computer Scr310

    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.

    How to view the mobile version on your computer Scr10

    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

    How to view the mobile version on your computer Scr11

    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.

    How to view the mobile version on your computer Captur29


    This tutorial was written by Ange Tuteur.
    • Back to top