• Thiết kế website bán hàng miễn phí 2018

Hướng dẫn cách test giao diện website responsive layout bằng Chrome

Testing your responsive web designs is crucial because the user experience on mobile devices is quite different from desktops.

But actual testing on all the mobile devices in the market isn’t practical for most of us.

So a simple responsive design testing technique some of us do is resizing our browser’s window size to kind of match the viewport sizes of smartphones and tablets. This is a quick-and-dirty trick for basic visual testing and it help us spot major problems, but it’s a terribly inaccurate portrayal of the mobile device experience.

Mobile devices have unique touch interactions like swipes and pinch-to-zooms, and likewise desktops have interactions like hovering and right-clicking. Responsive designs must account for these variances.

This tutorial will discuss an effective and practical method for debugging and testing your responsive designs. It involves a tool you probably already  have: Google Chrome.

Google Chrome’s DevTools has a feature called device mode that’s loaded with helpful tools for testing and debugging responsive designs.

Device mode is unprecedented. Most other responsive design testing tools simply resize your viewport, but device mode actually emulates the mobile device experience, particularly touchscreen interactions like tapping and swiping, right in your web browser.

Here’s a run down of device mode’s main features:

  • Mobile device emulation: Device mode has accurate models for popular smartphones and tablets (e.g. iPhone, Galaxy, BlackBerry, Kindle, Nexus, and a ton more) that simulates how your responsive designs look and function on touchscreens. It even spoofs the UA string to match the particular device you’re testing so that you’re getting a very precise design preview of your work.
  • Touch events emulation: This feature allows you to experience your designs as if you were interacting with them on your smartphone or tablet.
  • Media queries inspector: This is a ridiculously useful feature that shows you all your media query breakpoints. Clicking on a breakpoint resizes your design’s preview, so you no longer have to manually resize your browser window.
  • Mobile network simulation: mobile internet connectivity is different from our machine’s high-speed broadband connection. Also, many parts of the world still don’t have access to faster mobile internet technologies like LTE. Device mode can show you how your designs perform on EDGE, 3G, LTE, DSL, and WiFi to help you identify potential web performance problems.

To start using device mode, open up your web design in Google Chrome.

Then, open Developer Tools by clicking on Chrome’s menu and then choosing More tools > Developer Tools. The keyboard shortcut for opening Developer Tools is Ctrl+Shift+I (Win) or Option+Command+I (Mac).

How to open Developer Tools

You should now see the Chrome Developer Tools (abbreviated as DevTools from now on) panel at the bottom or on the right of your browser’s viewport.

Developer Tools when opened

Click on the device mode icon (it’s a super tiny button that looks like a smartphone) to toggle device mode on and off.

Device mode icon

When device mode is turned on, you’ll see something along the lines of the image below, and the smartphone icon will turn blue:

Device mode appearance

Responsive Design Testing on a Specific Mobile Device

Use the Device panel to emulate the experience of a particular mobile device. This will allow you to visually test your design on said mobile device, as well as test touch-like interactions.

Device mode

Let’s say we’d like to see how our responsive design looks and functions on an iPhone 5. All we’ll need to do is  select that device in the

Trang 1 / 1

Bạn đã đọc tin này chưa ?

Go Top