PlaceOweb Dotclear

Différents smartphones

• OS : Système d'exploitation
• Navigateur (WebKit, Safari, Internet Explorer, Opera, Firefox, Dolphin, ...)
• Résolutions

Exemples

HTC Desire

• HTTP_X_WAP_PROFILE : http://www.htcmms.com.tw/Android/Co...
• HTTP_USER_AGENT : Mozilla/5.0 (Linux; U; Android 2.2; fr-fr; Desire_A8181 Build/FRF91) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

<rdf:Description rdf:ID="BrowserUA">
        <rdf:type rdf:resource="http://www.openmobilealliance.org/tech/profiles/UAPROF/ccppschema-20021212#BrowserUA" />
        <prf:BrowserName>Android Browser</prf:BrowserName>
        <prf:BrowserVersion>0.6</prf:BrowserVersion>
        <prf:FramesCapable>Yes</prf:FramesCapable>
        <prf:HtmlVersion>4.0</prf:HtmlVersion>
        <prf:JavaAppletEnabled>No</prf:JavaAppletEnabled>
        <prf:JavaScriptEnabled>Yes</prf:JavaScriptEnabled>
        <prf:JavaScriptVersion>1.5</prf:JavaScriptVersion>
        <prf:PreferenceForFrames>Yes</prf:PreferenceForFrames>
        <prf:TablesCapable>Yes</prf:TablesCapable>
      </rdf:Description>
 
      <rdf:Description rdf:ID="HardwarePlatform">
 
        <prf:Model>HTC Desire A8181</prf:Model>
 
        <prf:PixelAspectRatio>1x1</prf:PixelAspectRatio>
        <prf:ScreenSize>480x800</prf:ScreenSize>
        <prf:ScreenSizeChar>25x21</prf:ScreenSizeChar>
 
        <mms:MmsMaxImageResolution>480x800</mms:MmsMaxImageResolution>

Xperia Arc

• HTTP_X_WAP_PROFILE : http://wap.sonyericsson.com/UAprof/...
• HTTP_USER_AGENT : Mozilla/5.0 (Linux; U; Android 2.3.3; fr-fr; SonyEricssonLT15i-o Build/3.0.1.A.0.150) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1

<rdf:Description rdf:ID="BrowserUA">
        <rdf:type rdf:resource="http://www.openmobilealliance.org/tech/profiles/UAPROF/ccppschema-20021212#BrowserUA"/>
 
	<!--  Browser Identification -->
        <prf:BrowserName>Android Browser</prf:BrowserName>
        <prf:BrowserVersion>2.3</prf:BrowserVersion>
        <prf:DownloadableBrowserApps>
          <rdf:Bag>
            <rdf:li>application/vnd.android.package-archive</rdf:li>
          </rdf:Bag>
        </prf:DownloadableBrowserApps>
 
        <!-- Capabilities -->
        <prf:FramesCapable>Yes</prf:FramesCapable>
        <prf:TablesCapable>Yes</prf:TablesCapable>
        <prf:PreferenceForFrames>Yes</prf:PreferenceForFrames>
        <prf:HtmlVersion>4.0</prf:HtmlVersion>
        <prf:XhtmlVersion>1.1</prf:XhtmlVersion>
 
        <!--  Applet / Script -->
        <prf:JavaAppletEnabled>No</prf:JavaAppletEnabled>
        <prf:JavaScriptEnabled>Yes</prf:JavaScriptEnabled>
        <prf:JavaScriptVersion>1.5</prf:JavaScriptVersion>
      </rdf:Description>
 
      <rdf:Description rdf:ID="HardwarePlatform">
 
        <prf:Model>LT15i</prf:Model>
 
        <prf:PixelAspectRatio>1x1</prf:PixelAspectRatio>
        <prf:ScreenSize>480x854</prf:ScreenSize>
        <prf:ScreenSizeChar>44x32</prf:ScreenSizeChar>
 
        <mms:MmsMaxImageResolution>1600x1200</mms:MmsMaxImageResolution>

Ressource

• Adapter un site pour les Smartphones
• CSS Media Types, smartphones et prises de têtes
• Une feuille de styles de base pour le Web mobile
• Optimiser Son Site Pour les Smartphones
• Optimiser ses applications Web pour iPhone ou iPod Touch
  • surface affichable
  • propriétés d'affichage
  • Dans le viewport la propriété user-scalable interdit ou autorise l'utilisateur à zoomer sur la page
• Building Smartphone-Optimized Websites
• Posts Tagged ‘orientationchange’

CSS

• Media Queries
• Les Media Queries CSS3

<link rel="stylesheet" media="screen and (min-width: 480px)" href="css/bigscreen.css" type="text/css" />

• Les transformations en CSS3 que l'on retrouve dans ses articles CSS3
  • les transformations CSS3 par l'exemple (partie 1), les transformations CSS3 par l'exemple (partie 2)

• Checkbox size (doubler leur taille)

input[type=checkbox]
{
  /* Double-sized Checkboxes */
  -ms-transform: scale(2); /* IE */
  -moz-transform: scale(2); /* FF */
  -webkit-transform: scale(2); /* Safari and Chrome */
  -o-transform: scale(2); /* Opera */
  padding: 10px;
}

Ecran, détection résolution

function ecrire(texte) {
  document.getElementById("out").innerHTML = document.getElementById("out").innerHTML + '<br>' + texte;
}
 
function displayScreen() {
 ecrire(window.innerWidth + 'x' + window.innerHeight + ' window.innerWidth .innerHeight');
 ecrire(screen.width + 'x' + screen.height + ' screen.width .height');
 ecrire(window.screen.availWidth + 'x' + window.screen.availHeight + ' window.screen.availWidth .availHeight');
}
 
function updateOrientation(e) {
 ecrire('orientationChanged ! window.orientation:' + window.orientation);
 setTimeout("displayScreen()",20);
};
function updateResize(e) {
 ecrire('resizeChanged ! ');
};
// Event listener to determine change (horizontal/portrait)
window.addEventListener("orientationchange", updateOrientation);
window.addEventListener("resize", updateResize);
 
ecrire('Votre résolution est de '+screen.width+'x'+screen.height + ' , la place dispo est : ' + window.screen.availWidth+'x'+window.screen.availHeight + ' et le viewport: ' + window.innerWidth+'x'+window.innerHeight);
 
ecrire('window.orientation:' + window.orientation);
ecrire('window.DeviceOrientationEvent:' + (window.DeviceOrientationEvent?'YES':'NO'));
ecrire('window.OrientationEvent:' + (window.OrientationEvent?'YES':'NO'));
 
var supportsOrientationChange = "onorientationchange" in window,
                    orientationEvent = supportsOrientationChange ? "orientationchange" : "resize";
ecrire('supportsOrientationChange:' + supportsOrientationChange);
ecrire('orientationEvent:' + orientationEvent);
 
ecrire('...now change something...');