5 ways to test your mobile Web page

@ Chen Zimu Careful students are not difficult to find, now use mobile phone access to the network has a new reading experience, and fast. This change has also received a lot of advice from micro-letters, Weibo fans, people want to go to work, work and sleep at the time to read the collection in micro-blog and browser (sync) The excellent set of articles.

We know that the use of mobile browsers is growing every day, according to StatCounter's statistics, the use of mobile phones and tablets accounted for about 30% of the network traffic, which means that consumers spend more time on the mobile version of the page than ever before. Even if you have a responsive design such as the mobile end, because of the complexity of the current size and type of equipment, testing the terminal screen before loading is also a big pressure mountain.

In the near future, the mobile end will eclipse the desktop side of the device.

There are many different ways to do web testing on mobile terminals, but these methods are mixed. Here are 5 different ways to test your mobile version of the Web page for your reference:

　　1. Testing on real mobile devices

On the real device to test the mobile version of the Web page is always the best, after all, the simulator is always a limited degree of truth, some experience details can not be completely imitated. User experience contains a lot of factors, the impact of the network, the pixel density of visual effects, the actual size of various visual elements, the actual loading time of the Web page, waiting for the actual equipment to the real.

Of course, thorough testing is unrealistic, and time and money are important determinants of each project. However, investing in mobile device test suites is all right, especially when you are faced with a whole set of customer-facing services, and this test is very necessary. In general, such a test suite is made up of the most popular hardware devices currently in the system. As a result, the test-oriented scenario is exactly 1:1 corresponding to what the user is facing. Brad Frost once wrote an article about how to do this kind of testing, although the article is a little bit old, but the idea of the article is completely free of problems.

If such a test suite exceeds your budget, then you can at least test your own and your friends ' mobile phones, which is generally enough to cover iOS and Android platforms.

　　2, the use of iOS and Android virtual machine test

In the absence of appropriate hardware equipment, the software simulator is still quite good. The simulators were designed to test the local applications of iOS and Android, and the built-in browsers also restored their use on real devices as much as possible. As far as possible, it is because it is still unable to fully simulate the real network conditions, loading time, touch experience, the visual size of the elements and other details. While the built-in rendering engine functionality is still equivalent, it can still help you find problems with Cross-browser.

iOS simulators are built into the Xcode and can be easily invoked by iOS developers. Android simulators are included in the Android SDK and are available on all three platforms. There are even a third party independent simulators available for you to use, but whether you can achieve the results of a native simulator, you need to judge the actual product.

　　3, in the Bowserstack test

If you don't have enough equipment, and you don't want to install a huge SDK kit and then call the simulator to test, there's still a way to help you solve the problem. Browserstack is such a network service, it can help you test the Web page on the desktop and the mobile side of the browsing effect, convenient for professional web developers.

At present, the full service provided by Browserstack is charged, and its free part is to help you carry out the test and screenshot to save. When you pay for it, you can also interact and control more details when you test the Web page's browsing effects on different devices. Even if you have a suite of test suites, browserstack services can still help you find more easily overlooked details.

　　4. Use Responsinator test

Developers always try to test the effects of a Web page on a real device, at least in the simulator. But the real life is always incomplete, the above two kinds of situation may you have no chance to achieve. Fortunately, there are many other programs on the web to test, usually these tools by adjusting the size of the desktop browser to achieve. In these fancy services, we mainly recommend Responsinator.

All you need to do is go to the Responsinator website and enter the URL of the page you want to test, which will produce a real-time preview that includes a preview of the current mainstream hardware device. Frankly, it's closer to a "health check" of the Web page, which is helpful, but says it can't solve all the problems. In the strictest sense will, none of the similar services can achieve the simulator's effect, let alone the actual device test, because essentially a service like Responsinator is based on your desktop browser, which is fundamentally different from your mobile browser and its simulator.

　　5, adjust the browser

As mentioned in 4, these third-party services essentially adjust the browser size and then display the adjusted page rendering effect. Therefore, many developers will directly adjust the browser size to test these response-type mobile Web pages. This way, you can write the code side of the test, but also good. But this approach is inherently not "mobile-side test", it is only more convenient to test the response of the Web page is correct, even with the above four kinds of "methods" compared. As with 4, browser differences are a fatal flaw in this mechanism.

　　Conclusion

Because the development cycle, the environment and other practical differences, developers will choose a different way to test the phone-side pages. Not all of the above 5 ways, the actual developers use more than 5 kinds of methods. If you have other test methods, please let us know.

Original address: Teamtreehouse

Excellent network translation: @ Chen Zimu

This article by the gifted Net original translation, please respect the copyright and the translator achievement, the transfer picks please enclose the excellent link, violates the person must investigate. Thank you for your cooperation with the editorial colleagues.