Basic knowledge of mobile web development and basic knowledge of web Development

Basic knowledge of mobile web development and basic knowledge of web Development

First, after code compilation, we have to have a tool to see the results. For PC-side development, we have firefox, chrome, and so on. So what should we do for mobile web debugging? There are a variety of mobile phone devices, different brands, and different screen sizes. Of course, we can't buy all our mobile phones, and then place them on the desk from left to right during development. After writing a piece of code, refresh from left to right. If someone is doing this, I will not say anything. I just want to kneel down to be a friend ~ Hey.

Let's talk about this nonsense. The focus is: first, we need a debugging tool for mobile web development.

1. Google emulation:Google's mobile phone simulator is a simple example of a pc simulating the screen size and browser features of a mobile phone.

Open Method: Open the chrome browser, and press F12 to open it. For Developer Tools, click the icon of the cell phone, as shown in figure

 

The effects and functions of each part are as follows:

 

First, we can select the device to be simulated in the device. This is very important and determines what kind of mobile phone can be adapted to the page we write.

Open the device drop-down menu and you can see the simulated devices: You can see that most mobile phones have O (∩ _ ∩) O.

With emulation, we can easily develop it.

2. veiwport: What is veiwport?

Official explanation: Mobile browsers place pages in a virtual "window". Generally, this virtual "window" is wider than the screen, in this way, you do not need to squeeze each webpage into a small window (this will damage the layout of the webpage that is not optimized for the mobile browser). You can view different parts of the webpage through translation and scaling. The mobile Safari browser recently introduced the meta tag viewport, which allows web developers to control the size and scaling of viewport. Other mobile browsers also support the meta tag.

Simply put, the visible area of a mobile terminal.

Settings about veiwport:

Common examples: <meta name = "viewport" content = "width = device-width, height = device-height, user-scalable = no, initial-scale = 1.0, minimum-scale = 1.0, maximum-scale = 1.0/>

In the preceding example, the width is equal to the width of the output device. The height is equal to the height of the output device. You are not allowed to zoom in to 1.0 (that is, the size of). The minimum scale is 1.0, the maximum zoom-in value is 1.0. In a word, users are not allowed to zoom in.

Width [pixel_value | device-width] width Directly sets the specific value. Most Android phones do not support this value, but IOS does.
Whether user-scalable allows Scaling (no | yes)
Initial ratio of initial-scale
Min imum-scale: minimum scale allowed
Maximum-scale maximum scale allowed
Target-densitydpi
-- Dpi_value 70-400 // number of pixels per inch
-- Device-dpi device default pixel density
-- High-dpi high pixel density
-- Medium-dpi moderate pixel density
-- Low-dpi low pixel density
-- Webkit kernel is no longer supported

3. Media query: Media Queries

For more information about media queries, see: http://www.w3cplus.com/content/css3-media-queries

The main function is to adapt to the size of different devices.

For example:

 

@ Media all and (min-width: 400px)

All media types, with a screen width above PX.

@ Media all and (max-width: 399px)

For all media types, run the following pattern on the screen width below 399px

@ Media screen and (min-width: 600px) and (max-width: 900px)

Media type screen. This style is executed when the screen size is greater than 600 or less than 900px.

In actual work, the link label is referenced:

<link rel="stylesheet" media="all and (max-width:600px)" href="small.css" type="text/css" /><link rel="stylesheet" media="all and (min-width:900px)" href="big.css" type="text/css"  /><link rel="stylesheet" media="all and (min-width:600px) and (max-width:900px)" href="style.css" type="text/css" />