OnlineCBT
1. Responsive HTML Principles
Responsive Web Design ensures that a web application renders cleanly and legibly across smartphones, tablets, laptops, and ultra-wide desktop monitors without horizontal scrolling or broken layouts.
2. The Viewport Meta Tag (Mandatory)
Without this tag, mobile mobile browsers emulate a 980px desktop screen, rendering text micro-small and requiring users to pinch and zoom:
width=device-width: Matches the screen's width in device-independent pixels.initial-scale=1.0: Establishes a 1:1 relationship between CSS pixels and device pixels.
3. Fluid Layouts & Touch Targets
- Never hardcode static pixel widths on parent containers (use
max-width: 1200px; width: 100%;). - Ensure all interactive buttons have a minimum touch target size of 48 x 48 pixels for mobile touchscreen accuracy.
