Introduction

The below methods are recommended to properly test your theme’s mobile views. These ensure you view the correct thresholds for screen size, and/or emulate browser limitations that can affect how the site looks on a real mobile device to determine if you need to make adjustments or customizations.

There are two primary ways to test – in the browser (tests the CSS media queries and general layout adaptibility) and in an emulator/mobile browser. The first is useful for customizations or just to get a quick idea of what your content limitations are.  The emulation/device test method is the most bonafide as it gives you a true idea of how mobile browsers parse the site code and interpret functionality to a touch screen.

The Solution

Test Responsive/Adaptive Theme Styling

  1. Go to http://www.responsinator.com
  2. Enter your full URL at the top, ie http://demo.oboxthemes.com/dynamo/ and hit Enter
  3. Review the various layouts

It is important to understand any limitations in the site you are testing. For example, Obox eCommerce themes target iPhones and tablets specifically, and may not have specific support for “crappy” phones with screens smaller than 320px wide, or Android/Retina screens held sideways (landscape).  Your plugins are also not affected by your theme’s responsiveness, so may not format well if they do not have their own responsive support.

 

Test Obox Mobile or Adaptive functionality using Mobile Safari emulation

Use this method to test how your site would appear on an iPhone in Mobile Safari. You may use this in combination with the above for automatic screen resizing (recommended).

  1. Download and install Safari on your computer if needed.
  2. Open Safari and click the gear icon > Preferences
  3. Click Advanced and check Show Develop menu in menu bar and close the Preferences window
  4. Click the page icon (develop menu) and choose Develop > User Agent > iPhone.
    • This will emulate the iPhone version of Safari and let you see the mobile detection and layout.
  5. Load up your website

Want to customize your content for mobile displays?

You may want to reduce font sizes, stack side-by-side elements into one column, or hide parts of your content on mobile phones. This can be done with a little Custom CSS and some media queries, explained in the following article:

How to Customize the Mobile View in Responsive Themes