Mobilenheder og specifik CSS / HTML

Fordelen ved at kode i HTML5 er at man ikke skal ud i versionering af operativsystemer til de forskellige platforme. Med HTML5 kan man skrive en kode, der udnytter de mobile enheders muligheder, Her et par kilder til styling af tablets og smartphones:

iPad

Fra CSS Tricks stammer denne kodestump:

@media only screen and (device-width: 768px) {
  /* For general iPad layouts */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
  /* For portrait layouts only */
}

@media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
  /* For landscape layouts only */
}

Iphone

Her er en oversigt over iPhone specifik kodning i HTML, CSS og PHP.

Android

Så vidt jeg kan se er den bedste måde at style Android at lave et CSS ud fra device-max width / height::

// target mobile devices
@media only screen and (max-device-width: 480px) {
    body { max-width: 100%; }
}

// recent Webkit-specific media query to target the iPhone 4's high-resolution Retina display
@media only screen and (-webkit-min-device-pixel-ratio: 2) {
    // CSS goes here
}

// should technically achieve a similar result to the above query,
// targeting based on screen resolution (the iPhone 4 has 326 ppi/dpi)
@media only screen and (min-resolution: 300dpi) {
    // CSS goes here
}

Eller direkte i HTML (ex fra stackoverflow.com):

<link rel="stylesheet" media="only screen and (max-device-width: 480px)" href="css/mobile.css" type="text/css" />
<link rel="stylesheet" media="only screen and (-webkit-min-device-pixel-ratio: 2)" href="css/mobile.css" type="text/css" />
<link rel="stylesheet" media="only screen and (min-resolution: 300dpi)" href="css/mobile.css" type="text/css" />

Se også David Calhouns blogindlæg om mobil-specific styling. David mener, at nogle Android browsere er begyndt at kunne bruge den iPad specifikke HTML / CSS.

#Bogen om “HTML5 spil” (husker ikke præcis titel; men den kommer snart…) siger noget lignende. Her understreges, at det kun er iPad der får en webside til at ligne en app; mens Android fremviser websiden i et browservindue.