How to implement mobile auto adaptation Web page

It is very simple to convert a PC website into a mobile adaptive webpage or make a self-adapting web page of a mobile phone, which can be declared using meta tags.

Tools/Materials

• Sublime text

One method/step

1. Open the HTML or PHP page you need to make a Web page, and other Web source files. Add a meta tag between

2. The META tag that declares the Web page as a Mobile Adaptive Web page to the browser is:

   <meta name= "viewport" content= "width=device-width,height=device-height,inital-scale=1.0,maximum-scale=1.0, User-scalable=no; " >

   <meta name= "apple-mobile-web-app-capable" content= "yes" >

   <meta name= "Apple-mobile-web-app-status-bar-style" content= "Black" >

   <meta name= "format-detection" content= "Telephone=no" >

3

After adding the above label to save, and then use the mobile phone to open that is the Adaptive Web page.

Two methods/Steps

2. Method: Add a META tag to the page header: <meta name= "viewport" content= "Width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0, User-scalable=yes "/>

   Explain:

   Width=device-width: Width equals width of device screen

   initial-scale=1.0: Indication: Initial zoom ratio

   minimum-scale=0.5: Representation: Minimum zoom ratio

   maximum-scale=2.0: Indicates: Maximum zoom ratio

   User-scalable=yes: Indicates whether the user can adjust the zoom ratio

3. 2

   In addition: If you want to control the size of the font, you should use the relative size, you can use the following code, generally do not also can, here is just a way to say the name.

   Font of relative size

   The font also cannot use the absolute size px, but only the relative size of EM.

   Body {font:normal 100% Helvetica, Arial, Sans-serif;}

   The above code specifies that the font size is 100% of the default size of the page, which is 16 pixels.

   h1 {font-size:1.5em;}

   Then, the size of the H1 is 1.5 times times the default size, which is 24 pixels (24/16=1.5).

   small {font-size:0.875em;}

   The size of the small element is 0.875 times times the default size, which is 14 pixels (14/16=0.875).

How to implement a mobile auto-adaptation webpage