Spreminjanje barve okvirja brskalnika na mobilnih napravah

Ustvarjanje boljših, bolj brendiranih in osebnih izkušenj na mobilnih napravah za spletne strani in spletne aplikacije ni enostavno. Namreč omejujejo nas sistemske omejitve, kot je npr. siv okvir brskalnika oz. zgornja sistemska vrstica (iPhone). Vendar lahko tudi te omejitve z nekaj dodatne kode premagamo.

Barvanje okvirja brskalnika oz. upravljanje z gornjo sistemsko vrstico (iPhone) lahko dosežemo že z uporabo nekaj dodatnihznačk, ki jih vstavimo v glavo naše spletne strani ali aplikacije. Takšen način uporabe pa nam prinese v primerjavi z drugimi, ki teh značk ne uporabljajo več prepoznavnosti, saj naša spletna stran med zavihki izstopa. V uporabi pri spletnih aplikacijah pa se bolje približamo izgledu “native” aplikacij.

Barvanje okvirja za Google Android

<head>
...
<meta name="theme-color" content="#FF6600">
...
</head>

Dodatne informacije Google Android

Barvanje oz. upravljanje za Apple iPhone

<head>
...
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
...
</head>

Dodatne informacije Apple iPhone

Barvanje okvirja za Microsoft telefone

<head>
...
<meta name="msapplication-navbutton-color" content="#4285f4">
...
</head>

Dodatne informacije Microsoft

Primer združene kode za našo spletno stran ali aplikacijo

<!-- Chrome, Firefox OS and Opera -->
<meta name="theme-color" content="#FF6600">
<!-- Windows Phone -->
<meta name="msapplication-navbutton-color" content="#FF6600">
<!-- iOS Safari -->
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

Za lažjo predstavo si lahko ogledate tudi Pomagalnik, ki uporablja zgornje značke in opazili boste razliko.

Komentiraj


*