Basic knowledge of mobile web development_html/css_WEB-ITnose

First of all, after the development code is compiled, we need a tool to see the effect. For PC development, we have firefox, chrome, etc., so what should we use for debugging the mobile web? There are many kinds of mobile phone devices, different brands and different screen sizes. Of course, we can't buy all the mobile devices, and then place them on the table from left to right during development. After writing a piece of code, refresh them from left to right, haha. If someone really does this, I won't say anything. I just beg the wealthy people to be friends~ Hehe.

After all the nonsense, let’s get back to the main point: First of all, we need a debugging tool for mobile web development.

1. Google emulation: Google’s mobile emulator is simply understood as a PC that simulates the screen size and browser features of a mobile phone.

Opening method: Open the chrome browser, then F12 key to open the developer tools, click the icon of the small phone, as shown below

The opening effect and the functions of each part:

First of all, we can select the device that needs to be simulated in the device. This is very important. Decide What kind of mobile phones can the page we write be adapted to?

Open the device drop-down menu to see the devices that can be simulated: You can see that mainstream mobile phones basically have O(∩_∩)O

With emulation, we can do development very conveniently.

2.veiwport: What is veiwport?

Official explanation: The mobile browser places the page in a virtual "window" (viewport) , usually this virtual "window" (viewport) is wider than the screen, so that each web page does not need to be squeezed into a small window (this will destroy the layout of web pages that are not optimized for mobile browsers). The user can pan and Zoom to see different parts of the web page. The mobile version of Safari browser recently introduced the viewport meta tag, which allows web developers to control the size and zoom of the viewport. Other mobile browsers also basically support it.

is simply understood as the visual area of ​​the mobile terminal.

About veiwport settings:

Common examples:

<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" />