ගොඩ කාලයකින් අපි බහුතරයකට වැදගත්වන thread එකක් දන්නා බැරි උනා. ඒ නිසා ඔන්න අද මම අපේ Web Development කරන අයියලා, මල්ලිලා, අක්කලා, නංගිලාට පොඩි trick එකක් කියලා දෙන්න හදන්නේ.
Web development කරද්දී ගොඩක් අය ලස්සන ලස්සන themes පාවිච්චි කරනවා ඔය මලානික background color එක යවන්න. සමහර අය පොඩි png sprite පාවිච්චි කරනවා, සමහර අය background color එකක් දෙනවා. ඔය මොක දුන්නත් අපි smartphone එකේ තියෙන browser එකෙන් මේ වෙබ් අඩවි වලට පිවිසෙද්දී ඒ වෙබ් අඩවියේම background color එක වගේ color එකක් ඔයාලාගේ smartphone එකේ browser එකේ tab එකෙත් පෙන්නන විදියක් මම අද කියලා දෙන්නයි යන්නේ.
සාමාන්යයෙන් අපි මේ meta tag එක දාලා තිබ්බේ නැත්නම් අපිට පෙන්නේ default ash/grey color tab එකක්. මේ meta tag එක මගින් අපිට ඒක වෙනස් කරන්න අවස්ථාව ලබා දීලා තියෙනවා. එහෙනම් පහත තියෙන විදියට තමා codes ටික අපේ හැම වෙබ් පිටුවකම(index.html,contact.html,about.html etc..) HEAD tag එක ඇතුලට දාන්න ඕනා.
Code:
<head>
...
<meta name="theme-color" content="Your Hexa Decimal Code">
...
</head>Example:
Code:
<head>
...
<meta name="theme-color" content="#5b144b">
...
</head>
මේ meta tag එක මගින් Chrome, Firefox, Opera browser on Android OS වල background tab color එක වෙනස් කරලා පෙන්වයි. පහළ තියෙනවා ඔක්කොම Mobile phone OS supported web browser meta tags list එක.
Full Code:
Code:
[COLOR="Gray"]<!-- Chrome, Firefox, Opera and Vivaldi -->[/COLOR]
<meta name="theme-color" content="#da0000">
[COLOR="Gray"]<!-- Windows Phone -->[/COLOR]
<meta name="msapplication-navbutton-color" content="#da0000">
[COLOR="Gray"]<!-- iOS Safari -->
<!-- Hiding Safari User Interface Components -->[/COLOR]
<meta name="apple-mobile-web-app-capable" content="yes">
[COLOR="Gray"]<!-- Changing the Status Bar Appearance -->[/COLOR]
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">අපි Merge tabs and apps option එක enable කරලා තිබ්බොත් අපේ Chrome browser එක opened chrome tabs අපේ අනෙකුත් දැනට running apps එක්ක overview screen එකේ පෙන්වනු ලබයි.
If you have Merge tabs and apps option enabled in your Chrome app you will see the opened tabs along with other recent apps in the Overview screen. Here, in the place of the app icon, Chrome will show our website’s favicon if provided
දැනට මේ විදියට හැඩ වැඩ දාලා තියෙන website ටිකක්.
සැ.යු:
- මෙය android 5.0 lollipop වල සිට ඉහළ සංස්කරණ සදහා දායකත්වය ලැබේ.
- Apple safari browser එකේ දැනට දායකත්වය දෙන්නේ black or black-translucent පමණි.
- Apple device එකක් ඇති බැවින් මට පවුද්ගලිකව මෙය Android, Windows phone වල අත්හදා බැලීමට නොහැකි විය.
තවත් පොඩි දෙයක් කියලා දෙන්නම් යන්න කලින්. ඔය බහුතරයක් වෙබ් අඩව වල දැකලා ඇති browser tab එකේ පොඩි icon එකක් තියෙනවා page title එකට කලින්. එකට කියන්නේ favicon කියලා. දැන් Chrome මගින් High-res Icon වලට support කරනවාලු. එහෙනම් ඒකත් ඔය free online favicon generator website වලින් හදලා <head> tag එක ඇතුලට දාන්න.
Click here to open Favicon online generator
එහෙනම් අනික් අයටත් දැනගන්න share කරමු, bump කරමු..!!
ජය වේවා!!!
රෙපක් ගහන් යමු..!!
