Testing Websites on Foldable Phones: A Step-by-Step Guide

Foldable phones change how your website looks and behaves in ways that matter for real users. This guide shows you how to test your site on foldable devices, covering both the software tools and the physical hardware checks you need. You’ll learn to spot layout breaks, handle the fold, and verify your site works across the two most common foldable form factors: book-style (like the Pixel Fold or Galaxy Z Fold) and clamshell (like the Galaxy Z Flip).

What You’ll Need

• A computer with a modern browser (Chrome, Edge, or Firefox).
• Chrome DevTools or Firefox Developer Tools (built into the browser).
• Optional but recommended: a real foldable device or a remote device lab (e.g., BrowserStack, Sauce Labs) for physical testing.
• Optional: the Android SDK’s adb tool if you plan to test on a physical device via USB.

Step-by-Step

1. Open your website in a desktop browser. Start with Chrome or Edge, as they have the most complete foldable emulation. Right-click anywhere on the page and select Inspect to open DevTools.
2. Enable device emulation. In DevTools, click the device icon (a small rectangle with a phone outline) in the top-left toolbar, or press Ctrl+Shift+M (Windows/Linux) or Cmd+Shift+M (Mac). This switches to Device Mode.
3. Select a foldable device preset. At the top of the Device Mode toolbar, click the device dropdown. If you see presets like “Galaxy Z Fold” or “Galaxy Z Flip”, choose one. If not, click Edit to add them from the list of available devices. These presets simulate the unfolded screen size and aspect ratio.
4. Test the unfolded (tablet) view. With a book-style foldable preset selected, the viewport will be roughly 7-8 inches diagonal. Check that your layout uses the extra space effectively—content should not stretch too wide, and multi-column layouts should work. Look for any elements that break or become unreadable at these widths.
5. Test the folded (phone) view. Toggle the Fold button in the device toolbar (or manually set the width to about half of the unfolded width). This simulates the front display. Ensure your mobile menu works, tap targets are large enough, and content reflows correctly.
6. Simulate the hinge and dual-screen behavior. In Chrome DevTools, you can use the CSS Media Features panel (under the Rendering tab) to emulate spanning and horizontal-viewport-segments. Set spanning to single-fold-vertical and define the segment widths (e.g., 0 0 50% 50%) to see how your site handles the fold as a physical divider. This is critical for sites that use CSS to avoid placing interactive elements on the fold.
7. Check the fold in the middle. With the dual-screen simulation on, scroll through your page. Ensure no critical content (like buttons, links, or form fields) is hidden behind the fold or split in a way that makes it unusable. Many sites add a padding or margin around the fold area.
8. Test with the device orientation changed. Rotate the emulator to landscape. Foldables are often used in landscape for media consumption. Verify that your layout doesn’t break, and that the fold doesn’t interfere with video players or image galleries.
9. Use the browser’s responsive mode for custom sizes. If no preset matches your target device, set the width and height manually. For a book-style foldable, try 717×512 (unfolded) and 360×780 (folded). For a clamshell, try 360×780 (unfolded) and 320×720 (folded).
10. Test with a real device (if possible). If you have a foldable phone, open your site in the browser. Test both the front screen and the inner screen. Switch between them while the page is open to see how the site reacts to the viewport change. Also test with the device in different postures: flat, partially open (like a laptop), and in tent mode.
11. Use a remote device lab for physical testing. If you don’t have a device, services like BrowserStack or Sauce Labs offer real foldable devices in their cloud. They let you interact with your site on a real device and see screenshots or videos.
12. Run automated tests with a headless browser. Use Playwright or Puppeteer to automate viewport size changes. You can write a script that loads your page at multiple foldable sizes and checks for horizontal overflow or missing elements. This helps catch regressions.
13. Check the CSS media queries. In DevTools, open the Rendering tab and look at the CSS Media Features section. You can emulate device-posture (e.g., folded or unfolded) and screen-spanning. Test your site with these to ensure your media queries fire correctly.
14. Look for common foldable issues. Pay attention to: text that gets cut off, images that stretch or distort, sticky headers that cover too much screen, and interactive elements that are too close to the fold. Also check that the site doesn’t zoom out unexpectedly when the viewport changes.
15. Document your findings. Take screenshots at each state (folded, unfolded, landscape, with fold simulation). Note any issues and fix them in your CSS. Common fixes include using min-width on containers, using flex-wrap for layouts, and adding padding around the fold area using the env() function with fold-left and fold-right variables.

Common Mistakes

• Only testing emulated sizes. Emulation is great, but it doesn’t show the physical fold or the device’s actual rendering. Always test on a real device if you can.
• Ignoring the fold. If you don’t simulate the fold, you might place a button right on the crease. Use the DevTools media features to check.
• Assuming the front screen is the same as a regular phone. The front screen of a book-style foldable is narrower (e.g., 360px) but taller, so your mobile layout might need adjustments.
• Forgetting to test in landscape. Many users watch videos or use split-screen in landscape. Your layout may break when the fold runs horizontally.
• Not testing both postures. A device can be fully open, half-open (laptop mode), or closed. Each changes the viewport and may trigger different media queries.

Tips

• Use the @media (spanning: single-fold-vertical) query to apply specific styles when the fold is vertical. Similarly, use @media (horizontal-viewport-segments: 2) to target dual-screen devices.
• Add padding around the fold using the env(safe-area-inset-left) and env(safe-area-inset-right) variables, which some browsers support for foldables. Test with the DevTools simulation to see if your browser supports these.
• Test your site on both Chromium and WebKit-based browsers, as foldable support may differ.
• Use a mobile-first approach: design for the folded phone first, then enhance for the unfolded tablet view.
• Keep your breakpoints fluid—use clamp() for font sizes and container widths to avoid abrupt jumps when the viewport changes.

Troubleshooting

• No foldable presets in DevTools. Update your browser to the latest version. If they still don’t appear, click the device dropdown, select Edit, and manually add the device dimensions.
• The fold simulation doesn’t work. Ensure you’re in Device Mode and have selected a mobile device. The CSS Media Features panel only appears when Device Mode is active.
• Your site looks fine in emulation but broken on a real device. The emulator doesn’t account for the physical fold or the browser’s default zoom. On the real device, check the browser’s text scaling settings and ensure the viewport meta tag is correct.
• Media queries for spanning don’t fire. Not all browsers support these queries yet. Use the @media (horizontal-viewport-segments: 2) as a fallback, and also test with a user-agent string of a foldable device.
• Images or videos don’t resize when the viewport changes. Make sure your media elements have max-width: 100% and height: auto in CSS. Also check that you’re not using fixed pixel widths.

Frequently Asked Questions

Do I need a physical foldable device to test?

No, you can start with browser emulation, but a real device is essential for final validation because it shows the actual fold and hardware rendering.

What are the standard foldable screen sizes?

Book-style devices typically have a folded front screen around 360×780 and an unfolded inner screen around 717×512 (in landscape) or 512×717 (portrait). Clamshells are usually around 360×780 unfolded and 320×720 when folded. These vary by model.

How do I simulate the fold in Chrome DevTools?

Go to the Rendering tab (press Esc to open the console drawer, then click the three-dot menu and select Rendering). Under CSS Media Features, set spanning to single-fold-vertical and horizontal-viewport-segments to 2. Then set the segment widths to 0 0 50% 50%.

What is the best way to handle the fold in CSS?

Use the env() function with fold-left and fold-right to add padding, and use media queries like @media (spanning: single-fold-vertical) to apply specific styles. Always test with the fold simulation.

Can I test foldable sites on a regular phone?

Yes, you can use a regular phone in landscape mode and manually set the viewport width to a foldable size, but you won’t see the fold effect. For that, use DevTools.

Do foldables affect performance?

Yes, the larger screen and dual displays can increase rendering load. Test with Lighthouse or similar tools to ensure your site remains fast on foldable hardware.

Related

• TTP223 Capacitive Touch Sensor: How It Works
• Phishing-Resistant MFA Setup Guide
• Folder Shortcuts to Start Menu: Easy Setup