Verzeichnis der Testumgebungen
Testmöglichkeiten in Desktopbrowsern
Firefox
- nach dem Einblenden der Webentwickler-Werkzeuge kann der Bildschirmgrößentest aktiviert werden. Hier sind verschiedene Bildschirmgrößen vordefiniert und eigene Bildschirmgrößen können hinzugefügt werden. In diesem Modus können auch Screenshots erstellt werden und man kann die Simulation von Berührungsereignissen simulieren.
- mit Hilfe der Web Devoloper Toolbar kann man sich verschiedene Bildschirmgrößen auf einen Blick anzeigen lassen.
- die WebIDE ermöglich es, eine Verbindung zu anderen Geräten (virtuellen und echten) herzustellen und dort Untersuchungen mit den Webentwickler Werkzeugen vorzunehmen
Bei diesen Möglichkeiten wird der User-Agent nicht beeinflusst.
Google Chrome
In den Entwicklertools kann in den Device Mode umgeschaltet werden. Hier sind bereits einige Geräte vordefiniert, andere können hinzugefügt werden. Diese "Geräte" melden sich dann auch mit eigenen, selbst definierten User-Agents. Beispiel
- User Agent Standard - Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/44.0.2403.157 Safari/537.36
- User Agent selbstdefiniertes Samgsung Galaxy S9000 - Samsung Galaxy S9000
- User Agent vordefiniertes Appel iPhone4 - Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_2_1 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8C148 Safari/6533.18.5
Internet Explorer 11
Auch der Internet Explorer hat einen Emulationsmodus.
Genymotion
Mit Genymotion kann man unterschiedliche virtuelle Geräte installieren.
Samsung Galaxy S2 - 4.1.1 - API 16 - 480x800 240dpi
Das Device Tool des ES Task Manager zeigt eine Screen Resolution von 480x728 Pixel an.
Standardbrowser
User-Agent: Mozilla/5.0 (Linux; U; Android 4.1.1; en-us; Samsung Galaxy S2 - 4.1.1 - API 16 - 480x800 Build/JRO03S) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
Firefox
User-Agent: Mozilla/5.0 (Android; Mobile; rv:37.0) Gecko/37.0 Firefox/37.0
Google Nexus 4 - 5.0.0 - API 21 - 768x1280 320dpi
Standardbrowser
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/534.24 (KHTML, like Gecko) Chrome/11.0.696.34 Safari/534.24
Firefox
User-Agent: Mozilla/5.0 (Android; Mobile; rv:40.0) Gecko/40.0 Firefox/40.0
Samsung Galaxy S3 - 4.3 - API 18 - 720x1280 240dpi
Das Device Tool des ES Task Manager zeigt eine Screen Resolution von 720x1208 Pixel an.
Standardbrowser
User-Agent: Mozilla/5.0 (Linux; U; Android 4.3; de-de; Samsung Galaxy S3 - 4.3 - API 18 - 720x1280 Build/JLS36G) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Safari/534.30
Firefox
User-Agent: Mozilla/5.0 (Android; Tablet; rv:40.0) Gecko/40.0 Firefox/40.0
Samsung Galaxy S5 - 4.4.4 - API 19 - 1080x1920 480dpi
Standardbrowser
User-Agent: Mozilla/5.0 (Linux; Android 4.4.4; Samsung Galaxy S5 - 4.4.4 - API 19 - 1080x1920 Build/KTU84P) AppleWebKit/537.36 (KHTML, like Gecko) Version/4.0 Chrome/33.0.0.0 Mobile Safari/537.36
Firefox
User-Agent: Mozilla/5.0 (Android; Mobile; rv:40.0) Gecko/40.0 Firefox/40.0
Samsung Galaxy S3 GT-I9300
Die Geräte Info zeigt: Auflösung 720x1280; Pixel Density: 320 Dpi
Google Chrome
User-Agent: Mozilla/5.0 (Linux; Android 4.3; GT-I9300 Build/JSS15J) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.141 Mobile Safari/537.36
Standardbrowser
User-Agent: Mozilla/5.0 (Linux; U; Android 4.3; de-de; GT-I9300 Build/JSS15J) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
Firefox
User-Agent: Mozilla/5.0 (Android; Mobile; rv:36.0) Gecko/36.0 Firefox/36.0
Samsung Galaxy S GT-I9000
Die Geräte Info zeigt: Auflösung 720x1280; Pixel Density: 320 Dpi
StandardbrowserUser-Agent: Mozilla/5.0 (Linux; U; Android 2.3.6; de-de; SAMSUNG GT-I9000/I9000BOJW6 Build/GINGERBREAD) AppleWebKit/533.1 (KHTML, like Gecko) Version/4.0 Mobile Safari/533.1
Firefox
User-Agent: Mozilla/5.0 (Android; Mobile; rv:40.0) Gecko/40.0 Firefox/40.0
Übersicht über alle einzelnen Seiten dieser Website
Diese Website enthält eine Reihe von Tests zu verschiedenen Themen der Webseitengestaltung. Es gibt daher einige Seiten ohne Navigationsmöglichkeit, auf anderen Seiten ist die Navigation nicht vollständig. Diese Sitemap soll daher allen Besuchern eine Übersicht zu allen Inhalten geben von der aus man zu den einzelnen Seiten navigieren kann.
Darüber hinaus wird diese Inhaltsübersicht immer dann angezeigt, wenn eine Seitenadresse zu dieser Website aufgerufen wird, die nicht (mehr) existiert).
Auf dieser Website werden eine Vielzahl von Design-Styles verwendet. Nachfolgend eine Übersicht zu den Design-Styles, jeweils mit Link zu einer Beispiel-Seite (oder mehreren)
- Style01 (Standard) - Willkommen, Erklärungen, Test der Bildschirmbreite, Verzeichnis der Testumgebungen , Gästebuch , Kontaktformular, Galerie "Galerie der Navigationen Teil 1", Galerie "Galerie der Navigationen Teil 2", Galerie "Galerie der Navigationen Teil 3", Linkliste , Diverse Zeichen, Symbole und Pictogramme, - Google Adsense; responsive
- HTML5Up-aerial, HTML5Up Aerial Testseite 1; responsive
- Font Awesome, Font Awesome Testseite 1
- Feedreader, Feedreader Demo 1 - Google Adsense; responsive
- Dropdown-CSS3-Only, Dropdown-CSS3-Only Demo 1
- Animiert-Responsiv-Dropdown, Animiert-Responsiv-Dropdown Demo 1 - Google Adsense; responsive
- Apfel-CSS3, Apfel-CSS3 Demo 1
- Aqua-Tabbed, Aqua-Tabbed Demo 1
- Prettify-Test, Prettify-Test Style Testseite 1 mit nPage Script - Google Adsense; responsive
- Bubble-Wrap-Vertical, Bubble-Wrap-Vertikal-Demo 1
- Cherry-Responsive, Cherry-Responsive Demo 1 - Google Adsense; responsive
- Dropdown-CSS3-Only-nPage-Script, Dropdown-CSS3-Only nPage Script Demo 1
- Animiert-Responsiv-Dropdown-nPage-Script, Animiert-Responsiv-Dropdown-mit-nPage-Script Demo 1 - Google Adsense; responsive
- Responsive-tabellen-01, Testseite responsive Tabellen - Google Adsense; responsive
- Galerieanpassung, Angepasste Galerie 01 , Angepasste Galerie 02, Angepasste Galerie 03 - Google Adsense; responsive
- css3-muster, CSS3 Muster
- Responsive-Site-Menu, Responsive-Site-Menu Test 01; responsive
- Flat-jQuery-Responsive-Menu, Flat-jQuery-Responsive-Menu Demo 1 - Google Adsense; responsive
- Wie Bootstrap 01, Testseite zu Wie Bootstrap 01 - Google Adsense; responsive
- Cherry-Responsive-nPage-Script, Cherry-Responsive-mit-nPage-Script Demo 1 - Google Adsense; responsive
- Canvas-mit-aenderbarer-Groesse, Canvas mit änderbarer Größe; responsive
- BootM-01, BootM responsive 01 - Google Adsense; responsive
- BootM-01-nPage-Script. BootM responsive 01 nPage Script - Google Adsense; responsive
Menus