Website adaptation for mobile devices: step-by-step instructions. Mobile version of the site

- . ? ? -, , . ? , .

, , . , HTML-, CSS. , . , meta name="viewport". ?

, , meta name="viewport". ? , , . , , . , , , . ? , . , , , , . , . , , , .

?

:

1. , .
2. , .
3. .
4. .
5. .

, , - . ( ) - , JavaScript (CSS) . . :

1. JavaScript.
2. .
3. JavaScript.

.

JavaScript

. JavaScript . . - . . , HTML-, <script>. . , . – . , , . , . , .

JavaScript . ? . JavaScript , , . , . . . HTML. , Vary: User-agent. .

JavaScript

, , , , . . ? Vary: User-agent. , , , . . (<div>), «» . , !

, , :

1. .
2. .

, . , . , , . , . - , . , .

"", . em, . ( ) , . (width) , 1080, 1260 768, . – width: 90%. 80%, 99%, 100%. . , ? : , . , . , – 1260. , 780. . ? , . . , . , , , , , . , , . CSS, , .

,

16 px. , , . ? . :

1. 16/16 = 1 em.
2. 18/16 = 1,125 em.

font-size, . , -, , .

. , max-width. , ! . , . , 1260 , , . ? , , , , . if. … . , .

, , . , , . , , , , . ? , – . , , .