{"id":16735,"date":"2022-01-24T13:38:24","date_gmt":"2022-01-24T18:38:24","guid":{"rendered":"https:\/\/carleton.ca\/webservices\/?p=16735"},"modified":"2024-06-08T09:43:36","modified_gmt":"2024-06-08T13:43:36","slug":"seeing-the-smaller-picture-why-and-how-to-use-mobile-view-on-desktop","status":"publish","type":"post","link":"https:\/\/carleton.ca\/webservices\/2022\/seeing-the-smaller-picture-why-and-how-to-use-mobile-view-on-desktop\/","title":{"rendered":"Seeing the Smaller Picture: Why and How to Use Mobile View on Desktop"},"content":{"rendered":"\n
\n
\n\n
\n
\n
\n

\n Seeing the Smaller Picture: Why and How to Use Mobile View on Desktop\n <\/h1>\n \n \n <\/header>\n\n <\/div>\n\n <\/div>\n\n <\/div>\n<\/section>\n\n

Did you know that by the end of 2021, mobile users made up 54% of website traffic? (source<\/a>) That means over half of the visitors to your website are browsing from their phones or tablets.<\/p>\n\n\n\n

That is a BIG number! That is also a lot of people to let down if your website content cannot display properly on their small screens!<\/p>\n\n\n\n

\u201cBut how do I know how my page looks on the phone if I\u2019m creating it on desktop?\u201d you may ask. Don\u2019t you worry \u2013 Here are some little tricks to access mobile view from your computer browser.<\/p>\n\n\n\n

Trick #1: The Big Crunch<\/h2>\n\n\n\n
\"\"<\/figure>\n\n\n\n

When you think about it, a mobile display is just a smaller desktop display. So, the quickest and easiest way to resize your browser window is to drag one side horizontally<\/strong> to see the content display changing. Make sure to exit Full Screen mode before you do this!<\/p>\n\n\n\n

It should look like the image on the left:<\/p>\n\n\n\n

The problem with crunching your browser window is that there is a minimum window width that prevents you from simulating smaller mobile phone screens. To resize your window to the size of a mobile phone screen, check out our Trick #2.<\/p>\n\n\n\n

Trick #2: Device Mode<\/h2>\n\n\n\n

Most browsers allow you to approximate how your site looks from a mobile device in Device Mode. While it cannot emulate every aspect of a mobile web browser, it gives a good approximation!<\/p>\n\n\n

[slideme title=”Safari”]<\/p>\n

To access the Responsive Design Mode in Safari, you first need to enable the Develop menu.<\/p>\n

    \n
  1. Launch Safari browser<\/li>\n
  2. Click on Safari<\/strong> > Preferences<\/strong> > Advanced<\/strong><\/li>\n
  3. Select the checkbox next to Show Develop menu in menu bar<\/strong><\/li>\n<\/ol>\n

    \"\"<\/p>\n

    Follow the steps below to view the mobile version of a web page:<\/p>\n

      \n
    1. Launch Safari and navigate to your desired URL.<\/li>\n
    2. Click on the\u00a0Develop menu<\/strong>\u00a0and select\u00a0Enter Responsive Design Mode.<\/strong><\/li>\n<\/ol>\n

      \"\"<\/p>\n

        \n
      1. Now the target URL can be viewed in the desired iPhone or iPad.<\/li>\n<\/ol>\n

        \"\"<\/p>\n

        Learn more about Responsive Design Mode in Safari.<\/a><\/p>\n

        [\/slideme]<\/p>\n\n\n

        [slideme title=”Google Chrome”]<\/p>\n

        Follow these steps to access the Device Toolbar<\/strong> in Google Chrome:<\/p>\n

          \n
        1. Launch Google Chrome and navigate to your desired URL.<\/li>\n
        2. Open the Developer Tool by left-clicking anywhere on the browser and selecting Inspect<\/strong>.<\/li>\n
        3. Click Toggle Device Toolbar<\/strong> \"\"\u00a0or press Ctrl + Shift + M<\/strong> (or Cmd + Shift + M<\/strong> on MacOS) to open the user interface (UI) that simulates a mobile viewport. By default, the Device Toolbar opens in Responsive Viewport Mode.<\/li>\n<\/ol>\n

          Google Chrome\u2019s Device Toolbar allows for several options to resize your viewport.\u00a0<\/strong><\/p>\n

          Option 1: Resizing your viewport manually<\/h3>\n

          To manually resize the viewport, you can:<\/p>\n

            \n
          1. Drag the handles on the side, bottom and lower corner of the viewport, or<\/li>\n
          2. Enter specific values in the width and height boxes<\/li>\n<\/ol>\n

            \"\"<\/p>\n

            Option 2: Selecting your mobile device<\/h3>\n
              \n
            1. From the Device Toolbar<\/strong>, click Dimensions: Responsive<\/strong> to open the Device<\/strong><\/li>\n
            2. Selecting a device will resize the viewport to the display dimensions of that device.<\/li>\n
            3. If your desired device is not on the list, click Edit\u2026<\/strong> to see a list of more devices.<\/li>\n
            4. Click Rotate<\/strong> \"\" to rotate the viewport to landscape orientation.<\/li>\n<\/ol>\n

              \"\"<\/p>\n

              Learn more about Device Mode in Google Chrome.<\/a><\/p>\n

              [\/slideme]<\/p>\n\n\n

              [slideme title=”Mozilla Firefox”]<\/p>\n

              There are three ways to toggle Responsive Design Mode<\/strong> in Firefox:<\/p>\n