Responsive - Test Page (HTML5 CSS3)
Gathering Info
Testing which screen size, browser, device etc. is being used
From PHP we get the HTTP_USER_AGENT - Mozilla/5.0 AppleWebKit/537.36 (KHTML, like Gecko; compatible; ClaudeBot/1.0; +claudebot@anthropic.com)
From Javascript we get -
From CSS3 media queries the screen colour -
- Red - @media only screen and (min-device-width : 320px) and (max-device-width : 480px)
- Pink - @media only screen and (max-width : 320px)
- Orange - @media only screen and (min-width : 321px)
- Blue - @media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
- Light Blue - @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
- Cyan - @media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)
- Yellow - @media only screen and (min-width : 1224px)
- Green - @media only screen and (min-width : 1824px)
- Brown - @media only screen and (-webkit-min-device-pixel-ratio : 1.5), only screen and (min-device-pixel-ratio : 1.5)
Block Testing
Fitting the website to various screen sizes