- Шырыня сайта на экранах мабільных прылад
- Вышыня сайта на экранах мабільных прылад
- Маштабаванне сайта на экранах мабільных прылад
- вынік
- Чытайце таксама
Для прагляду на мабільных прыладах, выкарыстоўваецца метатега viewport. Ён паведамляе браўзэру, якім чынам трэба кантраляваць адлюстраванне сайта на мабільных прыладах (да іх так жа ставяцца і планшэтныя кампутары).
Гэты метатега ўстаўляюць у кантэйнер head вашага сайта.
См. Прыклад.
<Meta name = "viewport" content = "width = device-width">
Па змаўчанні мабільныя браўзэры адлюстроўваюць старонку сайта сапраўды гэтак жа як і ў ПК. Што натуральна псуе знешні выгляд сайта і робіць мала прыдатным для выкарыстання сайта на мабільных прыладах.
Для больш дэталёвай налады адлюстравання выкарыстоўваем дадатковыя значэння
Шырыня сайта на экранах мабільных прылад
Дазваляе адаптаваць шырыню сайта пад шырыню экрана прылады
<Meta name = "viewport" content = "width = device-width">
Гэта вядома некалькі паляпшае прагляд сайта, але толькі ў плане таго што шырыня сайта становіцца такой жа як і шырыня экрана мабільнага прылады. Затое робіць абсалютна не чытэльным старонкі бо вельмі моцна памяншае тэкст, малюнкі і да т.п. А так жа парушае модульную сетку сайта.
Для таго што б зрабіць сайт яшчэ і чытэльным, задамо фіксаваную шырыню адлюстравання старонкі і ўжо пры гэтай шырыні будзем у стылях правіць адлюстраванне тэкстаў, блокаў і г.д. На нашым прыкладзе возьмем за аснову шырыню сайта 600пикселей
<Meta name = "viewport" content = "width = 600">
А ў css шаблону ўпішамся правіла медизапроса пры якім будуць прымяняцца стылі пры шырыні экрана 600пикселей. А так як мы задалі менавіта гэты дазвол для адлюстравання на экранах у мабільных прыладах, то будуць выкарыстоўвацца стылі указаных у зададзеных намі правілах. Агульныя стылі будуць прымяняцца гэтак жа як і на звычайным маніторы, але калі мы якія або стылі паказалі ў правілах, то гэтыя стылі будуць замяняцца дэфолтных.
Трэба яшчэ ўлічваць тую акалічнасць што задаўшы фіксаваную шырыню адлюстравання кантэнту мы атрымаем аднолькавы вынік на розных дазволах экрана. Але ўсё роўна пры любым дазволе самога экрана старонка будзе адлюстроўвацца на ўвесь экран. Гэта дасць нам два асноўных перавагі.
- Мы атрымаем аднолькавае адлюстраванне на розных дазволах экранаў
- Нам трэба мяняць стылі толькі для гэтага медизапроса, а не падладжваць пад кожнае дазвол экрана
@media screen and (max-width: 600px) {...}
Вышыня сайта на экранах мабільных прылад
У некаторых мабільных браўзэрах пры інтэрпаляцыі старонкі сайта вышыня сайта адлюстроўваецца ня карэктна.
Для выпраўлення гэтай памылкі мы можам выкарыстоўваць правіла
<Meta name = "viewport" content = "height = device-height">
Маштабаванне сайта на экранах мабільных прылад
З дапамогай гэтага правіла мы можам дазваляць альбо забараняць мастабирование старонкі сайта.
дазволіць
<Meta name = "viewport" content = "user-scalable = yes">
забараніць
<Meta name = "viewport" content = "user-scalable = no">
вынік
І так мы стварылі свой viewport і гэтак жа для яго стварылі медиапзапрос
У наш медиазапросе стварылі неабходныя для нас стылі. Што ў нас выйшла бачым на мал.3 альбо па спасылцы (Заходзім з мабільных прылад)
viewport
<Meta name = "viewport" content = "height = device-height, width = 600, user-scalable = yes">
медиазапрос
@media screen and (max-width: 600px) {body {font-size: 1.5em; } ... ... ... ... h2 {font-size: 2.5em; }}
мал.1 Адлюстраванне сайта без метатега viewport 
мал.2 Адлюстраванне сайта з атрыбутам width = device-width 
мал.3 Адлюстраванне сайта з атрыбутам width = 600 
Чытайце таксама
- Фреймворк для адаптыўнай вёрсткі
- Адаптыўная вёрстка для мабільных прылад
