Asztali és mobilmegjelenés szétválasztása
Egyre szélesedik a különféle hordozható eszközökkel szörfölők köre, ezért egy valamirevaló honlapnak megfelelő megjelenést kell biztosítania ezeken a – többnyire a monitoroknál jóval kisebb – megjelenítőkön is. Írásommal egy lehetséges megoldást mutatok be, ami talán sokaknak új és idegen lesz, viszont lévén sok más megoldási lehetőség is: követni nem kötelező, de mindenkinek tanulságos lehet.
Kezdetek
Eleinte én is – ahogy sokan mások – a link[media="handheld"] attribútummal operáltam, de hamar rá kellett jönnöm: ez nem a legjobb megoldás, mert nem minden mobileszköz használja megfelelően, illetve a mobilon nem megjelenítendő tartalmat is letölti a kliens, tehát a szűkös sávszélesség továbbra is problémát jelent.
Kicsit körülnéztem és azt láttam, hogy egyes honlapokon például m.example.com aldomainen szolgálják ki a mobilos látogatókat. Ezt sokszor összekötik egy user agent ellenőrzéssel, ami alapján – ha mobileszköz – átirányítanak az aldomainre. Ezt ma sem tartom egészen jó megoldásnak, mert szerintem egy honlap legyen egy domainen, illetve user agent kerülhet elő naponta is új, így az összehasonlításhoz szükséges adatbázist nagyon sűrűn kell(ene) frissíteni.
Ezek fényében lassan kialakult a koncepcióm:
- Alapjában véve nem rossz dolog a user agent figyelése, de nem szabad mindent erre alapozni.
- A látogatónak legyen lehetősége beavatkozni, ne döntsünk teljes mértékben helyette.
- Ha a második pontot felhasználóbarát módon tudjuk kivitelezni, akkor már nem is olyan nagy baj, ha tévedünk a detektáláskor.
- Azokat a tartalmi részeket, amelyeket a mobil-nézetben nem akarunk megjeleníteni, ne is küldjük ki a HTML-ben.
- A honlap maradjon egy domainen, egyszerű, aránylag kevés munkát igénylő szoftver legyen (alacsony költség).
- A megoldás újrahasznosítható legyen.
- Természetesen mindkét megjelenítés alkalmazkodjon a többféle kijelzőmérethez.
A megoldás
Megelégedve használom a CodeIgniter keretrendszert, ezért most is ebben dolgozunk. A bemutatott példa eléggé egyszerűsített, szándékosan nem használunk most adatbázist és a HTML5/CSS3 lehetőségeit.
Először is sablonokra lesz szükségünk: desktop.php, mobile.php és menu.php. A menüt azért tesszük külön fájlba, hogy minden nézethez ugyanazt használhassuk.
Tegyük fel, hogy azt a feladatot kaptuk, hogy asztali nézetben képes fejléc, alatta menü, alatta három hasáb, alul pedig lábléc legyen. Valahol legyen üdvözlő üzenet, ha most érkezett a látogató. A mobilnézetet ránk bízták, annyi megkötéssel, hogy a jobb oldalsáv tartalma nem kell, de a középső és a bal hasábé igen, előbbi a fontosabb. Ezen túl szabad a gazda.
application/views/templates/desktop.php:
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu">
<head>
<title><?= $title ?></title>
<meta name="robots" content="<?= $robots ?>" />
<meta name="keywords" content="<?= $keywords ?>" />
<meta name="description" content="<?= $description ?>" />
<link rel="shortcut icon" type="image/x-icon" href="<?= base_url() ?>favicon.ico" />
<link rel="stylesheet" type="text/css" media="screen" href="<?= base_url() ?>public/css/desktop.css" />
<?php if (!empty($js) || !empty($js2)): ?>
<script type="application/javascript" src="<?= base_url() ?>public/js/jquery_14.js" />
<?php endif ?>
<?php if (!empty($js)): ?>
<script type="application/javascript" src="<?= base_url() ?>public/js/<?= $js ?>" />
<?php endif ?>
</head>
<body>
<div id="header">
<p><a href="<?= base_url() ?>nezet/mobil">Mobil</a></p>
<h1><?= $site_name ?></h1>
<p><?= $slogan ?></p>
</div>
<?php if (!empty($message)): ?>
<div id="message">
<?= $message ?>
</div>
<?php endif ?>
<div id="nav">
<?php include 'menu.php' ?>
</div>
<div id="container">
<div id="left">
<?= $left ?>
</div>
<div id="content">
<?= $content ?>
</div>
<div id="right">
<?= $right ?>
</div>
</div>
<div id="footer">
<p>
Futásidő: <strong><?= $elapsed_time ?></strong> s,
Memória: <strong><?= $memory_usage ?></strong> KiB
</p>
</div>
<?php if (!empty($js2)): ?>
<script type="application/javascript" src="<?= base_url() ?>public/js/<?= $js2 ?>" />
<?php endif ?>
</body>
</html>A sablon változóinak természetesen majd megfelelő értéket kell adnunk, ezt részben egy saját konfig fájlból fogjuk megtenni, másrészt ezekben lesznek a dinamikusan generált tartalmak is. A div#message-ben felhasználói üzeneteket fogunk megjeleníteni.
public/css/desktop.css:
body {
margin: 0;
padding: 0;
overflow: auto;
background-color: #fbf7eb;
font-family: "Georgia", serif;
}
#header {
width: 100%;
background: url("fejlec_hatter.jpg") no-repeat center;
height: 110px;
overflow: hidden;
}
#message {
width: 100%;
background-color: #d5d5d5;
color: #939a0a;
}
#nav {
font-family: fantasy;
font-variant: small-caps;
padding-left: 201px;
height: 26px;
font-size: 16px;
background-color: #d5d5d5;
}
#nav li {
float: left;
list-style: none;
line-height: 26px;
padding: 0 10px 0 10px;
}
#nav li:hover {
background-color: #c3c3c3;
}
.active_menu {
background-color: #fbf7eb;
border: 1px solid #808080;
border-bottom: none;
}
#container {
width: 100%;
}
#left {
position: absolute;
left: 0;
width: 200px;
padding-bottom: 30px;
border-right: 2px solid #d5d5d5;
overflow: hidden;
}
#content {
position: absolute;
left: 200px;
right: 200px;
padding-bottom: 30px;
border-right: 2px solid #d5d5d5;
border-left: 2px solid #d5d5d5;
overflow: visible;
}
#right {
position: absolute;
right: 0;
width: 200px;
padding-bottom: 30px;
border-left: 2px solid #d5d5d5;
overflow: hidden;
}
#footer {
position: fixed;
bottom: 0;
width: 100%;
height: 24px;
border-top: 2px solid #d5d5d5;
background-color: #ecd99d;
line-height: 24px;
font-family: sans-serif;
}Ez csupán a dobozok és a menü stílusa, a többi elemé (címek, bekezdés stb.) többnyire relatív méretezésű (em, %).
Nézzük a mobil sablont!
application/views/templates/mobile.php:
<?xml version="1.0" encoding="utf-8" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="hu">
<head>
<title><?= $title ?></title>
<meta name="robots" content="<?= $robots ?>" />
<meta name="keywords" content="<?= $keywords ?>" />
<meta name="description" content="<?= $description ?>" />
<link rel="shortcut icon" type="image/x-icon" href="<?= base_url() ?>favicon.ico" />
<link rel="stylesheet" type="text/css" media="screen" href="<?= base_url() ?>public/css/mobile.css" />
<?php if (!empty($js) || !empty($js2)): ?>
<script type="application/javascript" src="<?= base_url() ?>public/js/jquery_14.js" />
<?php endif ?>
<?php if (!empty($js)): ?>
<script type="application/javascript" src="<?= base_url() ?>public/js/<?= $js ?>" />
<?php endif ?>
</head>
<body>
<div id="header">
<p><a href="<?= base_url() ?>nezet/asztali">Asztali</a></p>
<h1><?= $site_name ?></h1>
</div>
<div id="message">
<?= $message ?>
</div>
<div id="nav">
<?php include 'menu.php' ?>
</div>
<div id="content">
<?= $content ?>
</div>
<div id="left">
<?= $left ?>
</div>
<div id="footer">
<p>
Futásidő: <strong><?= $elapsed_time ?></strong> s,
Memória: <strong><?= $memory_usage ?></strong> KiB
</p>
</div>
<?php if (!empty($js2)): ?>
<script type="application/javascript" src="<?= base_url() ?>public/js/<?= $js2 ?>" />
<?php endif ?>
</body>
</html>Itt container-re sincs szükségünk, mivel nem csinálunk hasábokat, hadd legyenek a dobozok minél szélesebbek. Vegyük észre, hogy a fejlécbe csak a főcímet (oldal neve) írjuk ki, a szlogent nem. Ezzel további helyet spórolunk, hogy minél kevesebbet kelljen görgetni. (Tegyük fel, hogy a megrendelő beleegyezett.)
public/css/mobile.css:
body {
margin: 0;
padding: 0;
overflow: auto;
background-color: #fbf7eb;
font-family: "Georgia", serif;
}
#header {
background: url("fejlec_hatter_mobil.png") repeat-x;
}
#message {
width: 100%;
background-color: #d5d5d5;
color: #939a0a;
}
#nav {
height: 20px;
background-color: #d5d5d5;
font-size: 12px;
font-family: fantasy;
font-variant: small-caps;
}
#nav li {
float: left;
padding: 0 4px 0 4px;
list-style: none;
line-height: 20px;
}
#left {
width: 100%;
border-top: 1px solid #d5d5d5;
overflow: hidden;
}
#content {
width: 100%;
overflow: visible;
}
#footer {
width: 100%;
height: 16px;
background-color: #ecd99d;
border-top: 1px solid #d5d5d5;
line-height: 16px;
font-family: sans-serif;
}Rövidebb lett a CSS is, a fejléc háttérképét lecseréltük egy egészen kicsire, amivel sávszélességet spórolunk. Mindkét sablon bal felső sarkában van a nézetváltó link: így görgetés nélkül azonnal látható. Már csak a menü van hátra:
application/views/templates/menu.php:
<ul>
<li><a href="<?= base_url() ?>">Címlap</a></li>
<li><a href="<?= base_url() ?>oldal/bongeszo">Böngésző</a></li>
<li><a href="<?= base_url() ?>oldal/egyebek">Egyebek</a></li>
</ul>Ennyi kód után azt is hihetnénk, hogy hátradőlhetünk, de nem így van. Most kezdhetünk gondolkodni azon, hogy mikor és hol (hogyan) kellene detektálni a böngészőeszközt. Kézenfekvő megoldásnak tűnne vezérlő előtti (pre controller) kampót (hook) használni, csakhogy van egy kis gond.
Úgy tudnánk kényelmesen megírni az osztályt, ha közben használhatnánk egy CI_Controller példányt is, ezen keresztül tudnánk betölteni és használni a szükséges session és user_agent osztályokat, valamint így tudunk közvetlenül vezérlő-adatokat létrehozni. Ehhez egy kicsit csalnunk kell: nem kampót írunk, hanem könyvtárat, amit az autoload.php megfelelő sorával fogunk betölteni.
$autoload['libraries'] = array('session', 'client_detect', 'parser');A parser osztályt a vezérlőben fogjuk használni. A sorrend fontos, a session-t előbb töltjük be, mint a client_detect-et.
Ezeket az osztályokat a CI_Controller konstruktora tölti be, ezért az általunk írt vezérlő konstruktorában már elérhetjük, illetve módosíthatjuk a könyvtárunk által létrehozott adatokat, persze csak a parent::__construct(); sor után.
Szükségünk lesz még egy site.php nevű konfigurációs fájlra is, ebben tároljuk az alapértelmezett $title, $robots stb. értékeket:
<?php if (!defined('BASEPATH')) {
exit('No direct script access allowed');
}
$config['def_title'] = 'Asztali-mobil megjelenítés';
$config['def_robots'] = 'all';
$config['def_keywords'] = 'mobilnézet, webdesign, webfejlesztés, mobileszköz';
$config['def_description'] = 'Asztali és mobilmegjelenés szétválasztása';
$config['site_name'] = 'Detektálás és választhatóság';
$config['def_slogan'] = 'Ez egy felhasználóbarát megoldás';
$config['welcome'] = '<h3>Üdvözöljük honlapunkon!</h3>';Ezt a fájlt a $autoload['config'] = array('site'); sorral töltjük be, szintén az autoload.php-ben.
Mivel több egyidejű feladatunk is van az eszköz detektálásán kívül, ezeket is a Client_detect osztályban fogjuk megvalósítani.
application/libraries/Client_detect.php:
<?php if (!defined('BASEPATH')) {
exit('No direct script access allowed');
}
class Client_detect {
private $CI;
public function __construct() {
$this->CI =< get_instance();
$this->CI->load->library(array('user_agent'));
$this->Detect();
}A konstruktorban lekérjük a vezérlő referenciáját, majd ezzel betöltjük a user_agent osztályt, végül meghívjuk a detektáló függvényünket.
private function Detect() {
$this->CI->data['message'] = '';
@$x = file_get_contents(APPPATH . 'data/db.dat');
if ($this->CI->session->userdata('usercount') === false) {
// Most jött hozzánk, mert nincs usercount
if ($this->CI->agent->is_mobile()) {
// Mobil v. asztali?
$this->CI->session->set_userdata('platform', 'mobile');
} else {
$this->CI->session->set_userdata('platform', 'desktop');
}
if ($this->CI->agent->is_robot()) {
// Robot, nem számoljuk
$this->CI->session->set_userdata('usercount', $x);
} else {
// Nem robot, számoljuk
$x += 1;
@file_put_contents(APPPATH.'data/db.dat', $x);
$this->CI->session->set_userdata('usercount', $x);
$this->CI->session->set_userdata('welcome', true); // Máshol felhasználható
$this->CI->data['message'] = config_item('welcome');
}
} else {
// Már volt nálunk
$this->CI->session->set_userdata('usercount', $x);
$this->CI->session->unset_userdata('welcome');
}
$this->Data_fill();
}Itt a vezérlő $data tömbjét használjuk, ebben lesznek a nézet számára átadandó adatok, a vezérlőben majd kiegészítjük és továbbadjuk.
A $this->CI->session->userdata('usercount') a látogatók száma, ha ez nincs (false), akkor a látogató most érkezett. A 'platform' fogja tárolni a megjelenítő típusát, a 'welcome' pedig arra jó, ha esetleg a vezérlőben (vagy modellben) más műveletet is akarunk végezni új látogató érkezésekor (pl. cookie-login). Az üdvözlőüzenetet helyben beállítjuk.
A user_agent osztályhoz tartozó minták a user_agents.php-ben találhatók (config), mindenki tapasztalatai alapján bővítheti.
Végül ott egy $this->Data_fill() hívás: külön függvényben töltjük fel az alapértelmezett nézet adatokat, ezt a függvényt kell újrafelhasználáskor az adott honlapnak megfelelően átírnunk.
private function Data_fill() {
$this->CI->data['title'] = config_item('def_title');
$this->CI->data['robots'] = config_item('def_robots');
$this->CI->data['keywords'] = config_item('def_keywords');
$this->CI->data['description'] = config_item('def_description');
$this->CI->data['js2'] = ''; // Vezérlőben adjuk meg, ahol kell
$this->CI->data['site_name'] = config_item('site_name');
$this->CI->data['slogan'] = config_item('def_slogan');
$this->CI->data['message'] .= $this->CI->session->flashdata('message');
if ($this->CI->session->userdata('platform') == 'mobile') {
$this->CI->data['js'] = 'mobile.js';
} else {
$this->CI->data['js'] = 'desktop.js';
}
$this->CI->data['left'] =
'<h6>Bal box tartalma</h6>'
. '<p>'
. 'Látogatók száma:'
. '<strong>'
. $this->CI->session->userdata('usercount')
. '</strong>'
. '</p>'
. '<p>Egyéb tartalom fantázia szerint.</p>'
;
$this->CI->data['right'] = '<h6>Jobb box tartalma</h6><p>Akár reklámok/linkek is lehetnének.</p>';
}
}Itt most egy nagyon leegyszerűsített adatfeltöltés van, természetesen az oldalsávokba valamilyen feldolgozott tartalom kellene, amit – pl. ha oldalanként különböző – vezérlőben vagy modellben állítanánk elő, és ha lehet, cache-elnénk.
A $this->CI->session->flashdata('message')-et átírányításkor fogjuk használni felhasználói üzenet továbbítására. Fontos, hogy a $data['message'] csak detektáláskor lett beállítva, itt – és később vezérlőben –
már hozzáfűzzük a további üzeneteket.
A $data['js']-t „játékból” állítjuk itt be, valójában inkább oldalanként különböző JavaScript csatolására hasznos. Ezt a két JS-t a sablonokban statikusan is megadhatnánk.
Detektáló osztályunk készen is van, szükségünk van még vezérlőre (Page), amit be is állítunk a
routes.php-ben alapértelmezettnek: $route['default_controller'] = 'page';.
application/controllers/page.php:
<?php if (!defined('BASEPATH')) {
exit('No direct script access allowed');
}
class Page extends CI_Controller {
public function __construct() {
parent::__construct();
// Itt már manipulálhatjuk az adatokat:
$this->data['message'] .= '<p>Üzenet átírva.</p>;
}Mint már említettem: a szülő konstruktora után már a Client_detect által létrehozott adatot manipulálhatjuk.
Természetesen ilyen állandó üzenetre ritkán van szükség, de a többi adat érdekes lehet számunkra már a konstruktorban is.
Mivel ez az alapértelmezett vezérlőnk, célszerű egy index() függvényt készítenünk, ez szolgálja ki a főoldalt:
public function index() {
// Főoldal
$this->data['content'] = $this->parser->parse('pages/front', array(), true);
$this->view();
}A főoldal tartalma az application/views/pages/front.php fájlban van. Parser-t használunk, mert
egyelőre változóba kell nekünk a tartalom, és mert annak ellenére is lehet a fájlban PHP kód, hogy csak üres adattömböt adtunk át.
Látható, hogy nem betöltöttük a view osztályt, hanem hivatkoztunk egy függvényünkre, tehát meg is kell írnunk:
private function view() {
// Mobil vagy asztali?
if ($this->session->userdata('platform') == 'desktop') {
$this->load->view('templates/desktop', $this->data);
} else {
$this->load->view('templates/mobile', $this->data);
}
}
}Végre felhasználjuk a detektálás óta létező 'platform' session-adatot, ennek függvényében választunk a két (vagy akár több) sablonunk közül. Természetesen több függvényünk is szokott lenni a vezérlőben, ezért vettük külön ezt a függvényt.
Most még hátra van a kézi nézetváltás, aztán egy kis díszítés. Második vezérlőnk:
application/controllers/view.php:
<?php if (!defined('BASEPATH')) {
exit('No direct script access allowed');
}
class View extends CI_Controller {
public function __construct() {
parent::__construct();
}
public function mobile() {
if ($this->session->userdata('platform') == 'mobile') {
$this->session->set_flashdata('message', '<p>Már mobil-nézetet használ.</p>');
} else {
$this->session->set_flashdata('message', '<p>Mobil nézet.</p>');
$this->session->set_userdata('platform', 'mobile');
}
$this->generate();
}
public function desktop() {
if ($this->session->userdata('platform') == 'desktop') {
$this->session->set_flashdata('message', '<p>Már asztali-nézetet használ.</p>');
} else {
$this->session->set_flashdata('message', '<p>Asztali nézet.</p>');
$this->session->set_userdata('platform', 'desktop');
}
$this->generate();
}
private function generate() {
$referrer = $this->agent->referrer();
if ($this->agent->is_referral() && mb_strpos($referrer, base_url()) === 0) {
redirect($referrer, 'location', 302);
} else {
redirect(base_url(), 'location', 302);
}
}
}Váltás végén egy átirányítással generáltatjuk újra az oldalt, ezért az üzenet továbbítására a Client_detect-ben látott 'message' flashdata-t használjuk.
A díszítést (JS) az így is nagy terjedelem miatt nem részletezném, asztali verzión az aktuális menühöz adjuk az active_menu osztályt; mobilon egy <select>-et készítünk a menüből, és végignézzük az <img>-ket, ha valamelyik szélesebb, mint a kijelző, akkor kicsinyítjük.
Ezzel a módszerrel lehet akár készülékenként eltérő designt is megvalósítani – kellőképpen bővített és karbantartott user_agents.php-vel –, de mindig tartsuk szemelőtt, hogy agent string-et hamisat is kaphatunk, és a felhasználónak is hagyjuk meg a könnyű, egyszerű választás lehetőségét!
Remélem kezdők, haladók és profik számára is hasznos volt egy egyéni(?) megoldásról olvasniuk, és azt is, hogy kedvet csináltam azok számára, akik még nem foglalkoztak mobilmegjelenéssel.
■
Gratulálok, szép írás.
Jó kis írás, "főleg kezdőknek
Én a CI-t nem nagyon szeretem, én inkább a Symfony-t használom, de ez részletkérdés, csak eszközök... szóval gratula a cikkhez, csak ennyit akartam. :)
Elgondolkoztató
Viszont a kódban a tipokat empty kulcsszavaknál, error suppression operatorokat, meg PHP stringben lévő HTML elemeket érdemes lenne kiszedni a példából.
Köszönök minden véleményt,
Persze bele lehetne itt is mélyedni mindenféle résztartalmak legyártásába, cache-elésbe, optimalizációba, csak akkor el is veszne a rengeteg bába közt a gyerek, ezért
Nem mondom, hogy nincs igazad, de ezek nélkül a "hibák" nélkül csak lényegesen nagyobb terjedelemben tudtam volna megírni - ugyanennyi hasznos tartalom mellett. Szerintem ez rossz arány.
Nem egészen
Ez csak egy példaprogram, nem hiszem hogy hibakezeléssel itt kellene foglalkozni...meg lehet oldani hogy ha nem kritikus a hiba abból a felhasználó ne vegyen észre semmit (pl. notice esetén ne legyen fehér képernyő).
szerintem
Persze az sem baj, ha megemlíted, hogy szerinted az nem jó példa.
:-)
Én személy szerint képtelen
ctrl c ctrl v
így a tanítás mellett árthat is az ilyen kód
Pontosan. Részemről
Csak példaként, kinek melyik tetszene jobban (példakódban persze, éles kódban egyik se):
Srácok, nem értettétek
Megjegyzem, hogy a használt keretrendszernek megvannak a saját fájlkezelő függvényei és hibakezelése is. (És nem teljesen @mentes.:)) Viszont azt sem akartam, hogy azok (az esetleg kezdők), akik még sose látták a CodeIgniter-t, abszolút semmit se értsenek belőle, illetve haladók is csak CI-ben tudják hasznosítani (mondjuk egy rakás beállítás szintén nincs a cikkben, tehát nemigazán tudod egy az egyben másolni).
A megjegyzésbe írt tennivaló - hát igencsak kutya vacsorája. Vagy odaírod a teljes kódot, vagy a cikk szövegében jelzed, hogy ez nem teljes. (Mint ahogy én is tettem.)
Ha már ennyire megmondjátok, hogy hogyan kell jó cikket írni, belinkelhetnétek néhány saját példátokat is, hátha tanulok belőle. Itt a WL-en van valami?
Nincs értelme kritikán
Még pár szó a témához: mivel úgyis odaírtad, hogy nem teljes, akkor már inkább ne rakd ki a kukacot. Nem megoldás, problémaforràs. Ez meg most csak kérés, figyelmen kívül lehet hagyni.
Dehogy
Nincs értelme
Debug szempontjából nagyon
Mennyire van jogosultsága
Ha a felhasználó "váltani" akar az egyes megjelenítési formák között, az azt jelenti, hogy amit ráerőltettünk, az rossz, és nem az a megoldás, hogy váltani engedjünk, hanem az, hogy kijavítjuk a hibákat.
Sokrétűbb
(És még nem beszéltünk az 55 inches, szintén 1920x1080-as smart LCD TV-ről, amin igenis böngésznek néhányan.)
Az eszményi megoldás a képernyő való élet beli méretének függvényében lenne kialakítható (15" vs 4.7"), összekötve pár fontos feature-rel (pl touch interfész vagy egér-e a preferált az adott platformon), de ezt az információt egyik platform tulajdonosa sem igyekszik az orrunkra kötni.
Amíg ez nem lesz elérhető, maradnak a barkácsmegoldások (teljesen pozitív értelemben).
Jogos, erre nem gondoltam.
Azért egy mobilon sok esetben
Nem tudod
Ja hát itt csak az lenne
Érdekes
Például media query-vel.
Azonbelül?
matchMedia
Esetleg egy olyan megoldás,
Proci
Viszont egy egyszerű és jó módszer nagyon érdekelne sávszélesség becslésére, mert mindig arra készülni, hogy lehet, hogy csak 10kbps - hát elég nehéz (ha nem lehetetlen) feladat.
Azért beállítani egy elem
widthtulajdonságát talán nem terheli meg olyan nagyon a processzort :)Az nem, de
De hamár dpi-t szeretnél megtudni, akkor miért egy centire állítasz, miért nem 1 inch? :) (Látod, hogy többet akarod számoltatni azt a szegény procit?! :))
Megteheted azt, hogy az első
Igen, abból lesz
Át kell vinni bizonyos
Ugye amíg nincs meg a mérés addig nem tudsz tartalmat betölteni, szóval még a háttérbe se lehet rakni... Ha már ilyen van, kitennék valami választót az oldalra (hasonlót, mint a nyelv választó), ahol gyorsan lehet váltani az egyes nézetek között, a választást meg cookie-val megjegyezné. Alapból a handheld mobilos nézetet kapna kis sávszéllel, de ha még nincs cookie, akkor kiírná az oldalra, hogy bármikor lehet választani a másik nézetet a jobb felső sarokban lévő füllel.
Bal felső :)
- Azt a tartalmat nem engedheted cache-elni (különben ugye kb. 0 lesz az idő;
- Ha mozgásban van az illető (pl. járművön utazik), ingadozik (nagyon) a sávszél, minden kéréskor meg mérni és átlagolni - hát nem tudom.
A választást én - ha csak tehetem - bal-felülre teszem, mert ha túl kicsi a kijelző, a vízszintes görgetést utálja legjobban a Júzer.
Egyelőre maradok a detektálásnál és váltási lehetőségnél, ha végre elkészül az új oldalam, ott megvillogtatom a váltólinket, ha adott méretnél (px) kisebb a kijelző és mégis "asztalit" kapott. A sütin is gondolkodtam már, de egyelőre maradok a session-nél, de már hajlok a soká lejáró süti felé, főleg, hogy te is írtad.
Három sablon?
Mint írtam is, a user agent detektálás önmagában kevés, mégis jóval többet lehet vele kezdeni, mint pl. a kijelző pixelméretével. És még ha ez a css megoldás jó lenne (nem az!), akkor is ottmaradt a feleslegesen kiküldött adatok problémája: attól, hogy pl. jónéhány képet
display: none-al "eltüntetsz", még kiküldöd mint adatot, sőt, ugyanúgy letölti (és cache-eli) aképeket, tehát feleslegesen fogtad a sávszélességét is. Emiatt mindenképp érdemes a szerveroldalon (is) különválasztani az eszközöket, legalább kétfelé.Szerintem a legjobb példa a
Nem rossz példa
- Már most tudod, hogy a jövőben milyen kijelzőket fognak gyártani és akár 15 féle design-t is hajlandó vagy (megfizetik) készíteni; vagy
- Folyamatos fejlesztési (anyagi) keret biztosított a honlap karbantartására.
"Nagyobbacska" megrendelők esetében ez lehet helyes és kifizetődő út, ám sajnos nekem még nem volt ilyenem... :)
Ezzel együtt a példa jó.
responsive
Ez egy rövidéletű
:-)
bbproduction
Ne haragudj, de nem szoktam privát mailen egyes emberek problémáival ismeretlenül foglalkozni, szabad időmben szívesen segítek itt, a WL fórumon. (Ha tudok)
Kérlek nyiss a kérdésednek egy új témát.
Ennek előnyei:
- valószínűleg fogok reagálni
- más is reagálhat, akár jobb ötlettel is, mint én
- a kérdés és a válaszok nyilvánosak, így más is tud belőle tanulni
- legalább annyit fejlődni fogsz, hogy hogyan tudsz jól kérdezni (bocs, de ezt pláne nincs türelmem emailen írni)
Jó lenne, ha a kérdés nem az lenne, hogy "404 et kapok, vmi ötlet? " mert erre Kb az a válasz, hogy "ne nyisd meg ezt az urlt, akkor nincs 404" .
Sok sikert.
Update: @Ádám, ha lesz új fórum téma erről, kérlek töröld ezt a kommentet, igazából nem ide való.
Ezt mondjuk írhattad volna