How to best view on desktop tablet and mobile


Read time: 6 minutes

These recommendations help ensure the website displays clearly, is readable, and reflects a typical user experience.

Desktop (Windows & Mac)

Recommended Screen Resolution

  • 1920 × 1080 (Full HD) or higher

  • Laptops commonly use 1366 × 768 or 1440 × 900

Zoom / Scaling

  • Browser Zoom: 100%

  • Windows Display Scaling: 110% (150% is common for accessibility)

  • Mac Display Scaling: “Default for display” or “Looks like 1440 × 900”

Steps

  1. Open the website in Chrome, Edge, Firefox, or Safari

  2. Set browser zoom to 100%

    • Windows: Ctrl + 0

    • Mac: Cmd + 0

  3. Resize the browser window to full screen

  4. Scroll and resize the window slightly to confirm layout adapts smoothly

Best for

  • Primary navigation

  • Content-heavy pages

  • Forms and dashboards

Tablet (iPad & Android Tablets)

Recommended Screen Size

  • 8–11 inches

  • Common resolutions:

    • iPad: 810 × 1080, 834 × 1194, 1024 × 1366

    • Android tablets vary but are similar

Zoom

  • Default (no pinch zoom)

  • Text should be readable without zooming

Steps

  1. Open the website in the tablet’s default browser

    • iPad: Safari or Chrome

    • Android: Chrome

  2. Hold the device in portrait, then rotate to landscape

  3. Confirm:

    • Navigation adapts

    • Text wraps correctly

    • Buttons are easy to tap

Best for

  • Touch interactions

  • Hybrid desktop/mobile layouts

  • Content browsing

Mobile (Phones)

Recommended Screen Widths

  • 375 px (iPhone standard)

  • 390–430 px (larger phones)

  • 360 px (common Android)

Zoom

  • Default (no zoom)

  • Users should not need to pinch to read text

Steps

  1. Open the website in Safari (iPhone) or Chrome (Android)

  2. View in portrait orientation

  3. Scroll through the entire page

  4. Confirm:

    • Text is readable

    • Buttons are easy to tap

    • No horizontal scrolling

Optional Check

  • Rotate to landscape to ensure layout remains usable

Best for

  • One-column layouts

  • Primary actions

  • Accessibility and performance

Browser Compatibility Notes (All Devices)

  • Use the latest version of:

    • Chrome

    • Edge

    • Firefox

    • Safari

  • Clear cache if layout appears broken

  • Disable browser extensions if testing layout issues