ViewSource.net

Why Websites Look Different on Mobile and Desktop

Updated October 15, 2025 · ViewSource.net Guides

Have you ever noticed that a website looks completely different when you open it on your phone versus your laptop? Menus stack vertically, images resize, sidebars disappear — it’s like viewing two different sites. This isn’t magic; it’s responsive web design in action, and understanding how it works reveals a lot about modern web development.

Responsive Design and Viewport Width

At its core, responsive design means websites adapt their layout based on the size of your screen. A desktop monitor might be 1920 pixels wide, while a phone screen is only 375 pixels. Without responsive design, websites would either be impossibly tiny on mobile or require constant zooming and scrolling.

The “viewport” is the visible area of a webpage. Responsive websites detect the viewport width and adjust accordingly. A three-column desktop layout might collapse into a single column on mobile, making content easier to read on a smaller screen.

CSS Media Queries: The Foundation of Responsive Design

CSS media queries are rules that apply different styles based on screen characteristics like width, height, or orientation. Here’s a simple example:

/* Default styles for all devices */
.sidebar {
  width: 300px;
  float: left;
}

/* Mobile styles (screens smaller than 768px) */
@media (max-width: 768px) {
  .sidebar {
    width: 100%;
    float: none;
  }
}

On desktop, the sidebar is 300 pixels wide and floats to the left. On mobile devices (under 768px width), it expands to full width and stops floating — essentially moving it below the main content.

Common Breakpoints

Web developers typically use “breakpoints” — specific widths where the design changes:

  • Mobile: Up to 768px (phones)
  • Tablet: 768px to 1024px (tablets and small laptops)
  • Desktop: 1024px and above (monitors)

JavaScript-Based Layout Changes

While CSS handles most visual changes, JavaScript can detect device types and make dynamic adjustments. Developers use JavaScript to:

  • Load different navigation menus (hamburger menu on mobile vs. horizontal menu on desktop)
  • Show or hide features based on screen size or touch capability
  • Load mobile-optimized widgets or maps
  • Adjust interactive elements for touch vs. mouse input

For example, a desktop site might show an interactive chart with hover tooltips, while the mobile version displays a simpler, tap-friendly version.

Images and Performance Optimization

Images are handled differently on mobile to save bandwidth and improve loading speed:

  • Responsive images: The <picture> element and srcset attribute allow browsers to load smaller images on mobile and larger, higher-quality versions on desktop.
  • Lazy loading: Mobile sites often delay loading images until you scroll to them, reducing initial page load time.
  • Image replacement: Background images defined in CSS can change completely between mobile and desktop using media queries.
<!-- Responsive image example -->
<img
  srcset="image-small.jpg 480w,
          image-large.jpg 1200w"
  sizes="(max-width: 768px) 480px,
         1200px"
  src="image-large.jpg"
  alt="Example"
/>

How to Inspect Both Versions

You don’t need two devices to see how a website looks on mobile and desktop. Modern browsers include tools for testing responsive designs:

Chrome DevTools Device Toolbar

  1. Open any website in Chrome
  2. Press F12 or right-click and select “Inspect”
  3. Click the device toolbar icon (or press Ctrl+Shift+M)
  4. Select from preset devices (iPhone, iPad, etc.) or enter a custom width
  5. Reload the page to see the mobile version

Firefox Responsive Design Mode

  1. Open Firefox and press Ctrl+Shift+M (or Cmd+Option+M on Mac)
  2. Choose a device preset or drag to resize the viewport
  3. Toggle between portrait and landscape orientation

Safari Responsive Mode

  1. Enable the Develop menu: Safari → Preferences → Advanced → “Show Develop menu”
  2. Go to Develop → Enter Responsive Design Mode
  3. Select different device sizes from the dropdown

Common Rendering Issues

Sometimes websites don’t behave the same way across devices due to rendering issues:

  • Desktop-only scripts: Some JavaScript features (like hover effects or right-click menus) don’t work on touchscreens, so they’re disabled on mobile.
  • Mobile-hidden elements: Popups, chat widgets, or promotional banners might be hidden on mobile to avoid cluttering the small screen.
  • Performance limitations: Heavy animations or video backgrounds may be disabled on mobile to save battery and data.
  • Different HTML served: Some sites actually send different HTML to mobile and desktop users, not just different CSS.

Viewing Source Code on Both Devices

If you’re curious about the raw HTML differences between mobile and desktop versions, ViewSource.net makes it easy to compare. Simply:

  1. Open ViewSource.net on your desktop and paste the website URL
  2. Copy or download the HTML source code
  3. Open ViewSource.net on your mobile device and fetch the same URL
  4. Compare the two versions to see if the server sends different HTML or if it’s purely CSS/JS differences

View Source Code Now →

Conclusion

Websites look different on mobile and desktop because developers intentionally design them that way. Through CSS media queries, JavaScript device detection, and optimized images, modern websites deliver the best experience for each device type.

Understanding responsive design helps you appreciate the work that goes into creating websites and troubleshoot issues when sites don’t display correctly. Whether you’re a curious user or an aspiring developer, exploring how websites adapt across devices is a fascinating window into modern web technology.

Try viewing the same website on ViewSource.net from both your phone and computer — you might be surprised by what’s the same and what’s different in the underlying code!

Try ViewSource.netMore guides