Tisztelettel köszöntelek, üdvözöllek!
Mostanában egyre többször találkozunk azzal a ténnyel, hogy egyesek a mobiltelefonjukról böngészik a netet! Nemrégiben, az egyik androidos konferencián is elhangzott, hogy belátható időn belül már 5X többen fognak netezni okos-telefonjukról, mint számítógépükről! Én ebben nem szeretnék állást foglalni, egy biztos, hogy egyre nagyobb jelentősége van!
Mivel magyar oldalakon nem igen talál az ember ilyen jellegű leírást, gondoltam megörvendeztetem a fórumtagokat, akik weblapszerkesztéssel foglalkoznak és nem ismeri még ennek a módját, mit hogyan, remélem fogok tudni hasznos ötleteket adni a technikai megvalósításra, persze alap html, css... ismeretekre szükség van, mondhatni alapkövetelménye!
Azoknak a kedvét sem szeretném elvenni, akinek nincs ilyen mobileszköze, jelenleg még az enyém sem alkalmas, de erre is van egy gyógymód, melyet mindjárt ismertetek!
Először is kezdjük azzal, hogy el kell döntenie a weboldalnak, hogy ezt most honnan nézik (lebutítva PC vagy iphone), melyet egy egyszerűbb javascripttel tudunk véghez vinni:
HTML kód:
<script language="JavaScript">
if ( (navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)) ) {
window.location = "iphone.html";
}
</script>
Persze ehhez engedélyezni kell az iphone-on a javascriptek használatát, meg nem is olyan szép megoldás, úgyhogy javasolnám a php kódot! Akinek ezt nem teszi lehetővé a szervere, nyilván marad a js.
HTML kód:
<?php
if ( strstr($_SERVER['HTTP_USER_AGENT'],'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'],'iPod') ) {
header('Location: iphone.html');
}
?>
Mindezeket az index fájlon belül tesszük és mint látható, ha iphone-ról vagy ipod-ról érkezik a látogató, átirányítjuk az iphone.html fájlra, melyben mondjuk kiírjuk, hogy: Te mobilról böngészel! Aki jártas a programozásban, eddig nem tapasztalhatott új dolgot, ígérem ez a továbbiakban is így lesz!
Akinek van ilyen eszköze, az máris ki is próbálhatja, akinek nincs, most az figyeljen! Ezt valahogy szimulálnunk kell. Hogy hogyan?
Készítettem egy nem túl szép, de hatékony megoldást!
HTML kód:
<iframe id="belso" name="belso" src="about:blank" width="320" height="480" align="center" scrolling="no" frameborder="0" framespacing="0" border="0" marginheight="0" marginwidth="0"></iframe>
<form name="urlap">
<input name="hova" style="width:400px" value="http://localhost/iphone/index.html">
<input type="button" value="ugrás" onClick="window.open(document.urlap.hova.value,'belso')">
</form>
Létrehozol mondjuk egy teszt könyvtárat, melyen belül egy fájlt, melybe ezen sorokat bemásolod! ha nagyon szépíteni akarod, akkor köré rakhatsz egy iphone képet, és ez az iframe lesz maga a képernyő! Egész egyszerűen tallózod a file-t és klikkelsz a futattásához!
DE ez még így mindig nem elég, ezzel csak a képernyő méretét szabályoztuk! Le kell töltenünk a safari böngészőt, majd a preferencesen belül az advanced fülön be kell pipálni a: Show develop menu... Így bekapcsoljuk a fejlesztői menüt, ahol beállítjuk a böngésző típusát a USER AGENT alatt!
Eleinte az iphone pici betükkel fogja megjeleníteni az oldalt! Ezt fel kell manuálisan nagyítani, ha olvashatóvá akarjuk tenni, tehát nem felhasználóbarát.
Ezt úgy tudjuk beállítani, hogy a head-be beillesztünk 4 meta teg-et, melyek a következők:
HTML kód:
<meta name = "viewport" content = "width = device-width">
<meta name = "viewport" content = "initial-scale = 1.0">
<meta name = "viewport" content = "user-scalable = no">
<meta name = "viewport" content = "maximum-scale = 1.0">
Bár magukért beszélnek, de azért leírom mit miért:
1: a készülék képernyőjének szélességéhez igazodik!
2: nagyítás mértéke lebegőpontos számmal
3: felhasználók nagyíthatják, átméretezhetik-e az oldalt (yes/no)
4: Maximum mekkorára lehessen nagyítani (ennek csak a 3 pont yes értékénél van értelme)
További lehetőségek:
HTML kód:
<meta name="apple-mobile-web-app-capable" content="yes">
Ezen kis meta tag-el el tudjuk menteni oldalunkat, mint egy kis alkalmazás, melynek ikonjára kattintva bejön az oldal, de nem az iphone böngészőjéből indul el! Alapértelmezetten a <title></title> tag-ek közötti érték lesz a neve!
Ekkor még csak egy alapértelmezett ikonja, van de ha sajátot szeretnénk csinálni, akkor:
HTML kód:
<link rel="apple-touch-icon-precomposed" href="icon.png">
Ezzel tudjuk beállítani a saját ikont, mely a precomposed attribútum miatt nem fényes, ellenkező esetben, azaz ha fényeset szeretnénk, akkor csak simán: "apple-touch-icon" kell! Ami még fontos, hogy csak .png formátumú és 57X57-es méretű lehet!
Ha lassan töltődik be az oldal, a várakozást kikerülve egy indító képernyőt is betehetünk ezen módszerrel (státus sor sem látszik):
HTML kód:
<!-- Induló képernyő (320x460 PNG) -->
<link rel="apple-touch-startup-image" href="startup.png">
Köszönöm a figyelmet, remélem érthető volt, egyenlőre ennyit terveztem, de ha van rá igény akkor még van pár dolog a tarsolyomban!
Üdv.: B@l@'zs
Könyvjelzők