Testseite zum Design-Style Wie Bootstrap 01

Eingefügte @media-Queries

• @media (max-width: 479px) mit background-color:yellow
• @media (min-width: 480px) mit background-color:cyan
• @media (min-width: 768px) mit background-color:blue
• @media (min-width: 992px) mit background-color:green
• @media (min-width: 1200px) mit background-color:red

Ergebnisse in der Firefox-Developer-Toolbar

• Mobiles Hochformat (320x480): yellow
• Mobiles Querformat (480x320):cyan
• Hochformat für kleine Tablets (600x800):cyan
• Querformat für kleine Tablets (800x600):blue
• Tablethochformat (768x1024):blue
• Tabletquerformat (1024x768):green

Samsung Galaxy S 9000 GT-I9000 (mit Andoid-Version 2.3.6)

Standardbrowser

User-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

• Hochformat:yellow
• Querformat:cyan
•  Googel Adsense Werbung wird korrekt angezeigt

Firefox

User-Agent: Mozilla/5.0 (Android; Mobile; rv:40.0) Gecko/40.0 Firefox/40.0

• Hochformat:yellow
• Querformat:cyan
• Googel Adsense Werbung wird korrekt angezeigt

Samsung Galaxy S 3 GT-I9300 (mit Andoid-Version 4.3)

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

• Hochformat:
• Querformat:

Firefox

User-Agent: Mozilla/5.0 (Android; Mobile; rv:36.0) Gecko/36.0 Firefox/36.0

• Hochformat:
• Querformat:

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

• Hochformat:
• Querformat:

Genymotion Samsung Galaxy S2 4.1.1; 480x800 und 800x480; 240 dpi

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

• Hochformat:yellow
• Querformat:cyan

Firefox

User-Agent: Mozilla/5.0 (Android; Mobile; rv:37.0) Gecko/37.0 Firefox/37.0

• Hochformat:yellow
• Querformat:cyan

Genymotion Samsung Galaxy S3 4.1.1; 720x1280 und 1280x720; 320 dpi; Standardbrowser (Firefox nicht verfügbar)

• Hochformat:yellow
• Querformat:cyan

Genymotion Samsung Galaxy S3 4.3; 720x1280 und 1280x720; 240 dpi;

Standardbrowser

User-Agent:

• Hochformat:cyan
• Querformat:blue
• Googel Adsense Werbung wird korrekt angezeigt

Firefox

User-Agent:

Ein Screenshot über die Firefox-WebIDE hat im Hochformat 480x828 Pixel, im Querformat betragen die Abmessungen 853x455 Pixel

• Hochformat:cyan
• Querformat:blue
• Googel Adsense Werbung wird manchmal im Hochformat nicht korrekt angezeigt, dieser Fehler verschwindet jedoch bei einer Drehung