Reprinted-essential knowledge for mobile terminal development

Document directory

• (1) CSS pixels and device pixels
• (2) PPI/DPI
• (3) density determines the proportion
• (4) use of viewport
• (1) Simple and rude
• (2) perfection
• (3) reasonable compromise
• (1) weinre Remote Real-time debugging
• (2) AVD simulator debugging
• (3) Mobile Phone packet capture and host Configuration

There are more and more mobile devices, and more than 1.3 million android mobile phones are activated every day. Therefore, our webapps for mobile terminals are also starting to follow up. This article describes the knowledge and experience of webapp development and debugging, and provides several optional solutions.

I. Basic concepts (1) CSS pixels and device pixels

CSS pixels: the abstract unit used by the browser to draw content on the webpage.

Device pixels: The minimum physical unit of the display screen. Each dp contains its own color and brightness.

The size of the CSS pixels on the mobile phone screen is not fixed, depending on many attributes. After analysis and summarization, we can come up with the following formula: 1 CSS pixels = (devicePixelRatio) ^ 2 device pixels (^ 2 indicates square, and what is devicePixelRatio, ).

(2) PPI/DPI

PPI, also known as DPI, indicates the number of pixels per inch. The higher the value, the higher the display density. (Note: pixels here refer to device pixels .) After figuring out what the PPI means, we can easily understand the calculation method of the PPI. First, we need to calculate the diagonal equivalent pixel of the mobile phone screen, then we can get the PPI with a diagonal line (we usually call the cell phone screen size the length of the cell phone screen diagonal line. For more information about accurate calculation and publicity, see. Interestingly, the iPhone 4's PPI calculated based on the formula is 330, a little higher than Apple's 326 officially announced.

Similarly, taking HTC G7 as an example, the resolution of 480*800, 3.7 inch, is 252 PPI.

(3) density determines the proportion

We calculate the PPI to know which density range a mobile phone device belongs to, because different density ranges correspond to different default scaling ratios, which is a very important concept.

It can be seen that the phone number between and is classified as a low-density phone number,-is classified as a medium-density phone number, and-is classified as a high-density phone number, more than 320 are classified as ultra-high density (Apple gave it a high name-retina ).

These density values correspond to a specific scaling value. For the iPhone 4 or 4s that we are most familiar with, their PPI is 326, which is an ultra-high-density mobile phone. When we write a page with a width of PX and put it in the iphone, you will find that it is actually full width. This is because the page is zoomed twice by default, that is, 640px, while the width of iPhone 4 or 4s is 640px.

The figure circled the high-density category because this is the statistics of android mobile phones. In the domestic android mobile phone market, high-density devices account for the vast majority of the market share, which is very important, it is also the key point for us to pay attention to when making Android webapps.

(4) use of viewport

Viewport has five attributes, respectively:

<meta name="viewport"content="height = [ pixel_value |device-height] ,width = [ pixel_value |device-width ] ,initial-scale = float_value , minimum-scale = float_value , maximum-scale = float_value ,user-scalable =[yes | no] ,target- densitydpi = [ dpi_value | device-dpi| high-dpi | medium-dpi | low-dpi] " />

Among these attributes, we focus onTarget-densitydpiThis attribute can change the default scaling of the device. Medium-dpi is the default value of target-densitydpi. If we explicitly define target-densitydpi = device-dpi, the device will render the page according to the actual dpi. For example, if a 320*480 image is placed in iPhone 4, the screen is full by default, but if the target-densitydpi = device-dpi is defined, the image only accounts for 1/4 of the screen (1/2 square meters), because the iPhone 4 Resolution is 640*960.

Ii. solution (1) simple and crude

If we create a page based on the px wide design without any settings, the page is automatically scaled to the same width as the mobile phone screen by default (this is because medium-dpi is the default value of target-densitydpi, which is determined by the different scaling ratios corresponding to different density values, all of this is automatically done by mobile devices ). This solution is simple, crude, and effective. However, there is a fatal drawback: for high-density and ultra-high-density mobile phone devices, pages (especially images) will be distorted, and the more density, the more distortion.

(2) perfection

In this solution, we use target-densitydpi = device-dpi. As a result, the mobile phone device will be rendered based on the actual number of pixels. In professional words, that is, 1 CSS pixels = 1 device pixels. For example, for the iphone 640*960, we can make a 640*960 page, and there is no scroll bar on the iphone. Of course, for other devices, you also need to create pages of different sizes. Therefore, this solution is usually to use media queries to form responsive pages. This solution can be perfectly presented at a specific resolution, but the higher the Resolution, the higher the cost, because you need to write separate code for each resolution. The following is a simple example:

<meta name="viewport"content="target- densitydpi =device-dpi, width=device-width " />

#header {background:url (medium-density-image.png);}@media screen and (- webkit -device-pixel-ratio:1.5) {/* CSS for high-density screens */#header { background:url (high-density-image.png);}}@media screen and (- webkit -device-pixel-ratio:0.75) {/* CSS for low-density screens */#header { background:url (low-density-image.png);}}

(3) reasonable compromise

For the vast majority of Android devices are high-density, and some are medium-density, we can adopt a compromise solution: We will restore the px wide design draft, however, the page size is PX (the background-size is used to scale down the image), and the page is automatically scaled proportionally. In this way, a low-density mobile phone has a scroll bar (basically no one is using this phone). A medium-density mobile phone will waste a little bit of traffic, and a high-density mobile phone is perfectly displayed, ultra-high-density mobile phones are slightly distorted (very few Android phones ). The advantages of this solution are obvious: you only need a design draft and a set of code (Here we only discuss the situation of Android phones ).

Iii. Development and debugging (1) weinre remote and real-time debugging

Web developers often use Firefox firebug or Chrome Developer Tools for Web debugging, including debugging for JavaScript, DOM elements, and CSS styles. However, these tools are hard to come in handy when we want to debug a mobile Web site or application.

Weinre is a debugging tool that helps us remotely debug Web pages or applications running in mobile device browsers on the desktop. Weinre is short for WEb INspector REmote and is now an open-source project of Apache hosted on github.

The following describes how to use it in daily work.

First, we need to download the weinre jar package. The project official cannot find the jar file and can be found online. We recommend that you set up an independent web server, after jar is run, it is a local server, which is similar to the web server ~~

Then, run the doscommand to start it (Please note that JDK has been installed on your computer). Run the following command to change the path to your actual file location:

Java-jar d: \ tools \ weinre-jar \ weinre. jar-httpPort 8081-boundHost-all-(httpPort specifies the service port. The boundHost parameter indicates that IP addresses can be used for access. The all parameter indicates that all hosts are supported ).

Access localhost: 8081. If the following page is displayed, weinre has been started successfully:

Enter the address of the debug client user interface (UI address of the debug client ). In this example, http: // localhost: 8081/client/# anonymous, where # anonymous is the default debug id ). If the weinre debugging server is only used by you, you can use the default debug id: anonymous. The weinre debugging client ui started is as follows:

Add the following script to the page to be debugged: <script type = "text/javascript" src = "http: // localhost: 8081/target/target-script-min.js # anonymous "> </script>, pay attention to the localhost to the real IP address that the phone can access. When the mobile phone accesses this page, the weinre client detects the target device and can debug it.

Because it is inconvenient to use a mobile phone, I will use two browser windows to display the results. In fact, the results on the mobile phone are the same as those on the right.

(2) AVD simulator debugging

Static pages cannot meet our needs. Many actual effects, such as touch events, rolling events, and keyboard input events, must be tested in a real environment. In this case, a simulator is required. Like we test ie6, the AVD simulator can be similar to a virtual machine on a PC. When we need to test a specific model, we can create an AVD and perform a series of tests. However, the premise of using AVD is that the android development environment has been deployed. This requires JDK + android SDK + Eclipse + ADT, which is a little complicated.

(3) Mobile Phone packet capture and host Configuration

In PC, we can easily configure the host, but how to configure the host on the mobile phone is a problem.

Here, we mainly use fiddler and remote proxy to implement host configuration for mobile phones. The specific operations are as follows:

1. First, ensure that the PC and mobile devices are in the same LAN;

2. Enable fiddler on PC and check "allow remote computers to connect" in settings"
   

3. Set proxy on the mobile phone. The proxy IP address is the pc ip address and the port is 8888 (this is the default port of fiddler ). Generally, you can directly set a proxy on your mobile phone. If not, you can download an APP called ProxyDroid to set the proxy.

4. At this point, you will find that using a mobile phone to access the Internet is actually using the fiddler on the PC. All request packages will be listed in the fiddler and can be used with willow to implement host configuration, or even reverse proxy operations.

Summary

The above are some of the experiences and skills we have accumulated in actual development. I hope to help you. If you have any good methods or tools, please share them with us ~~

----------------------------------------------------------------------------

Original article address:

Knowledge required for mobile terminal development