kostenloser Webspace werbefrei: lima-city

Hintergund soll für verschiedene Geräte anders sein

lima-city → Forum → Die eigene Homepage → HTML, CSS & Javascript

1. Autor dieses Themas

   ultimate-bravery

   ultimate-bravery hat kostenlosen Webspace.

   13:51, 18.6.2015

   Hallo zusammen,
   
   ich möchte bei meiner Website für PCs und Laptops ein Video als Hintergrund haben, welches in einer Dauerschleife abgespielt wird, und für Smartphones und Tablets soll einfach ein Ausschnitt aus diesem Video als Hintergrundbild gesetzt werden.
   
   Momentan habe ich erstmal nur das Video als Hintergrund, das habe ich so gemacht:
   
   HTML:
   

   <div id="background_video" class="background">
       <video src="videos/background.mp4" autoplay loop></video>
   </div>

   
   
   CSS:
   

   .background {
     position: fixed;
     width: 100%;
     height: 100%;
     overflow: hidden;
     top: 0;
     left: 0;
     z-index: -1;
   }
   .background video {
     min-width: 100%;
     min-height: 100%;
   }

   
   
   Ich weiß man kann mit @media in der CSS Datei zum Beispiel eine Bedingung für die mindest Breite machen, aber die Breite ist ja nicht zwangsläufig eine Definition dafür, obs ein Smartphone ist oder nicht. Also wie sollte ich am besten vorgehen, um zu ermitteln ob es ein Smartphone oder ein Tablet ist?
   
   Danke schon mal für die Hilfe.
   
   Viele Grüße :)

2. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

3. fatfreddy

   

   fatfreddy hat kostenlosen Webspace.

   14:04, 18.6.2015

   User-Agent abfrage und dementsprechend den Hiintergrund setzen. Da es lästig ist, sich die ganzen User-Agents zusammen zu suchen, empfiehlt es sich, eines der dafür existierenden Scripte zu nutzen. Beispiele
   
   basierend auf PHP: http://mobiledetect.net/, php-mobile-detect2
   
   Javascript: mobile-detect.js
   
   

4. all-in1

   

   all-in1 hat kostenlosen Webspace.

   17:11, 18.6.2015

   Lima unterstützt die browsecap.ini. Mit Hilfe von get_browser() kannst du dann auch herausfinden, ob es ein Mobiles Gerät ist oder nicht.
   
   http://de2.php.net/manual/de/function.get-browser.php Ist dort aber keine vollständige Liste. Es wird dir wesentlich mehr angezeigt, als dort in der Liste steht. Zum Beispiel auch ob es ein MobileDevice ist.

5. fcbayern-muenchen

   fcbayern-muenchen hat kostenlosen Webspace.

   16:45, 30.6.2015

   Das ist es erklärt: http://www.heise.de/ix/artikel/Allen-recht-1058764.html

6. Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!

   lima-city: Gratis werbefreier Webspace für deine eigene Homepage

Dir gefällt dieses Thema?