Op deze website gebruiken we cookies om content en advertenties te personaliseren, om functies voor social media te bieden en om ons websiteverkeer te analyseren. Ook delen we informatie over uw gebruik van onze site met onze partners voor social media, adverteren en analyse. Deze partners kunnen deze gegevens combineren met andere informatie die u aan ze heeft verstrekt of die ze hebben verzameld op basis van uw gebruik van hun services. Meer informatie.

Akkoord

Vraag & Antwoord

Webdesign (HTML, CSS, Flash)

WebDesign voor PDA's

Anoniem
None
10 antwoorden
  • Hoi,
    is er een apparte manier om websites te maken voor een pda. Of houd je gewoon rekening met de lage resolutie en de beperkte hoeveelheid tekst?

    Greetings,

    ErX.
  • Gewoon rekening houden met lage resolutie, niet te zware plaatjes en zorg voor een zo schoon [klein] mogelijk bron, en zorg ervoor dat het zo surfervriendelijk mogelijk is [dit omdat het schermpje al zo klein is].
    Liefst geen flash, embedded andere meuk, etc, dat houdt erg op.
    Veel tekst doet overigens niet zo erg ter zake, zolang het maar geen ellenlange pagina's zijn.

    Spreek overigens puur uit pda gebruiks ervaring, niet als iemand die weet hoe je het 'officieel' moet doen.
    Gewoon je gezonde verstand gebruiken zou ik zeggen.
  • Als je je HTML goed gescheiden hebt van je opmaak/CSS, is het makkelijk te doen door een aparte style sheet te maken met als media-type 'handheld':

    [code:1:cd84d4a052]<link href="/styles/handheld.css" rel="stylesheet" type="text/css" media="handheld"/>[/code:1:cd84d4a052]

    Deze CSS wordt dus gebruikt op je PDA-browser.
  • Dat werkt in ieder geval perfect.
    Kun je de 'mobiel' check ook doen met behulp van php/javascript. Dan kan ik de hoeveelheid tekst en soort afbeeldingen ook aanpassen?

    Al vast bedankt.

    Greetings,

    ErX.
  • berkery, nice, kun je er wat over uitwijden?
  • [quote:90b43dbf2a="ErX"]Dat werkt in ieder geval perfect.
    Kun je de 'mobiel' check ook doen met behulp van php/javascript. Dan kan ik de hoeveelheid tekst en soort afbeeldingen ook aanpassen?

    Al vast bedankt.

    Greetings,

    ErX.[/quote:90b43dbf2a]Je zou kunnen zoeken naar een browser-detect scriptje voor IE Mobile (en andere PDA-browsers), maar ik heb geen idee hoe de browsermarkt voor PDA's in elkaar steekt.
  • [quote:b306a8ab19="Phrea"]berkery, nice, kun je er wat over uitwijden?[/quote:b306a8ab19]Er valt weinig over te vertellen, eigenlijk. In CSS kan je specificeren voor welk medium je de style sheet wilt toepassen, dat gaat met het attribuut 'media', maar het wordt nog niet zoveel gebruikt. En dat is jammer, want hoevaak zie je niet een knopje 'printvriendelijke pagina'?

    Nergens voor nodig, maak gewoon een style sheet met 'media="print"' en maak daarmee de pagina geschikt voor de printer. Testen kost je geen papier, want je ziet 'm al aan het werk als je op 'Afdrukvoorbeeld' drukt.

    Zie ook: http://www.w3schools.com/css/css_mediatypes.asp
  • Om bepaalde teksten niet te tonen op de PDA kan tekst delen die niet getoont moeten worden op een PDA een class toekennen en die geef je in je "handheld" stylesheet de regel "display:none;" mee. Hoe je ook geen resource vretende javescript te gebruiken.
    [code:1:47583604fc]<span class="handheld">Deze tekst moet niet getoond worden als de pagina op een PDA wordt bekeken</span>[/code:1:47583604fc]CSS:[code:1:47583604fc]span.handheld {display:none;}[/code:1:47583604fc]en klaar is kees.
  • In PHP is het:[code:1:de58cbd31e]
    $mobile_browser = '0';
    if(preg_match('/(up.browser|up.link|windows ce|iemobile|mmp|symbian|smartphone|midp|wap|phone|vodafone|o2|pocket|mobile|pda|psp)/i',strtolower($_SERVER['HTTP_USER_AGENT']))){
    $mobile_browser++;
    }
    if(((strpos(strtolower($_SERVER['HTTP_ACCEPT']),'text/vnd.wap.wml')>0) or (strpos(strtolower($_SERVER['HTTP_ACCEPT']),'application/vnd.wap.xhtml+xml')>0)) or ((((isset($_SERVER['HTTP_X_WAP_PROFILE']) or isset($_SERVER['HTTP_PROFILE']) or isset($_SERVER['X-OperaMini-Features']) or isset($_SERVER['UA-pixels'])))))){
    $mobile_browser++;
    }
    $mobile_ua = strtolower(substr($_SERVER['HTTP_USER_AGENT'],0,4));
    $mobile_agents = array('acs-','alav','alca','amoi','audi','aste','avan','benq','bird','blac','blaz','brew','cell','cldc','cmd-','dang','doco','eric','hipt','inno','ipaq','java','jigs','kddi','keji','leno','lg-c','lg-d','lg-g','lge-','maui','maxo','midp','mits','mmef','mobi','mot-','moto','mwbp','nec-','newt','noki','opwv','palm','pana','pant','pdxg','phil','play','pluc','port','prox','qtek','qwap','sage','sams','sany','sch-','sec-','send','seri','sgh-','shar','sie-','siem','smal','smar','sony','sph-','symb','t-mo','teli','tim-','tosh','tsm-','upg1','upsi','vk-v','voda','wap-','wapa','wapi','wapp','wapr','webc','winw','winw','xda','xda-');

    if(in_array($mobile_ua,$mobile_agents)){
    $mobile_browser++;
    }

    if($mobile_browser>0){
    // PDA deel
    }else{
    // andere computers deel
    }

    ?>
    [/code:1:de58cbd31e]

    Greetings,

    ErX
  • Hoewel er idd een mediatype voor handhelds is, is het helaas niet zo simpel dat je daarmee alles oplost. Veel pda's nemen namelijk gewoon de screen-stylesheet en negeren de handheld-stylesheet…
    - Cameron Moll: Mobile Web Design ~ The Series
    - Digital Web Magazine: CSS Styling for Print and Other Media

Beantwoord deze vraag

Dit is een gearchiveerde pagina. Antwoorden is niet meer mogelijk.