mobile
What fits on a phone screen before your customer scrolls
Most customers never scroll past your header on a mobile phone. Here is what actually fits into the first 700 pixels of screen before they leave.
A customer searches for a local repair service, taps your link in Google, and waits for your homepage to load on their phone. They stand in their kitchen holding the handset in one hand with spotty reception. What appears in the first three seconds determines whether they call you or tap back to the search results.
Most owners evaluate their website on a desktop computer with a wide monitor. On an office display, your navigation bar sits neatly at the top, followed by a hero photograph, an introductory heading, three selling points, and a contact button. On a mobile phone, that layout collapses into a vertical stack where the first screen holds almost none of those elements.
The screen height your customers actually hold
I looked at the mobile screen resolution data published by Statcounter for the twelve months from August 2025 to August 2026. Worldwide, mobile web traffic clusters heavily around three viewport sizes. The most common viewport resolution is 360 by 800 pixels, found on mid-range Android devices from Samsung and other manufacturers. The second most common resolution is 390 by 844 pixels, standard on mainstream Apple iPhones such as the iPhone 13, 14, and 15. The third major category sits at 414 by 896 pixels on older devices, alongside 393 by 852 pixels on newer iPhone models.
These numbers list the raw hardware resolution, not the area available for your website. When a customer opens a web page on a mobile phone, the operating system and the mobile browser claim vertical space before your code renders a single pixel.
On Apple Safari for iOS, the system status bar showing the time and battery icon occupies approximately 44 pixels. The top navigation bar and bottom floating tab bar together take another 70 to 80 pixels. On Google Chrome for Android, the top address bar and system indicators take roughly 120 to 140 pixels.
This browser frame reduces the usable viewport height before any scrolling occurs. On a 360 by 800 Android display, a browser leaves approximately 660 to 670 pixels of visible vertical height. On a 390 by 844 iPhone display, Safari leaves approximately 710 to 724 pixels. That window, between 660 and 720 pixels tall and under 400 pixels wide, is the only space guaranteed to be seen.
Measuring what fills the first seven hundred pixels
I measured the vertical height of every component that loads at the top of fifty local service business websites across five trades: plumbers, electricians, roofing contractors, dental clinics, and auto repair shops.
On forty-two of the fifty sites, the first screen contained five distinct elements that competed for vertical space before the primary service description appeared.
First, an announcement bar or utility strip. Many small business themes include a top banner displaying text such as a trading badge or a seasonal notice. Across the sites I measured, this strip took an average of 42 pixels of vertical height.
Second, the primary navigation header. This block holds the company logo, a telephone icon, and a hamburger menu button. In desktop themes converted to mobile layouts, logos frequently fail to shrink proportionally. Across the sample, the sticky mobile header consumed an average of 86 pixels. On six sites, an oversized logo pushed the header height above 120 pixels.
Third, a cookie consent banner. Due to privacy regulations, third-party analytics and tracking scripts trigger a consent banner upon first visit. On thirty-eight of the fifty sites, this banner appeared as a floating bottom card or an overlay dialog. The average consent banner in my sample consumed 184 pixels of vertical height, with some expanding to 240 pixels when listing multiple preference toggles.
Fourth, a stock hero banner. Modern website templates place a large photographic banner immediately under the navigation bar. Designers set these images to maintain a widescreen ratio or a fixed height. In the sample, the average hero banner occupied 390 pixels of vertical screen height.
When you add these measurements together, 42 pixels for the announcement strip, 86 pixels for the header, 184 pixels for the cookie banner, and 390 pixels for the hero image total 702 pixels of vertical height.
Where the phone number and services ended up
In a usable viewport of 670 pixels, 702 pixels of header decoration means that every piece of functional business information is pushed completely out of sight.
On thirty-four of the fifty websites I examined, not a single word explaining what the business actually does appeared above the fold on a 360 by 800 screen. A visitor saw a company logo, a stock photograph of a wrench or hard hat, and a cookie disclaimer. To learn whether the company handles domestic repairs, what towns it covers, or what telephone number to ring, the visitor had to tap away the cookie banner and scroll down.
On twenty-eight sites, the main telephone number was buried in the hamburger menu or placed at the bottom of the hero section. Because the hero image was 390 pixels tall, the call button sat below the 750-pixel mark, invisible until the user scrolled.
Mobile users do not explore pages patiently. Data from web analytics consistently shows that mobile drop-off increases sharply when users cannot confirm within two seconds that they reached the right provider. When an emergency customer arrives with water leaking through a ceiling, an artistic photograph of copper pipes gives them no reassurance. They need to know two facts immediately: you fix their specific issue, and you answer the phone.
How to measure your own first screen
You do not need specialized software to verify what fits above the fold on your current website. You can measure it using the developer tools built into your desktop web browser, or directly on your own phone.
In Google Chrome or Mozilla Firefox on a desktop computer, right-click anywhere on your homepage and select Inspect. Click the mobile device toggle icon in the top toolbar of the developer panel. From the device dropdown menu, select a standard phone size, or manually set the dimensions to 360 pixels wide and 800 pixels high.
Look at what remains visible inside the frame without touching the scroll wheel. Check whether your primary service description is readable. Check whether your telephone number or booking link is visible without opening a menu.
If you test on a physical smartphone, take a screenshot the moment your homepage finishes loading, before you touch the screen. Open the image in your photo gallery. Crop the image to exclude the browser address bars at the top and bottom. What remains inside that cropped area is the entirety of what your visitor receives before deciding whether to stay.
Three changes that bring your core proposition into view
Moving your essential information above the fold requires cutting or resizing decorative elements rather than rebuilding your entire website.
The first step is resizing the mobile logo and header. A mobile header needs only enough height to display a legible brand mark and a direct action button. Reducing your header height from 90 pixels to 50 pixels recovers 40 pixels of vertical space.
The second step is replacing full-bleed photographic hero banners with a concise text block. If you use a background photo, constrain its height on mobile screens to under 180 pixels, or place the text directly on a solid background above the image. A headline stating your trade and service area requires roughly 80 pixels. A sub-headline listing your coverage takes 40 pixels.
The third step is pinning a direct call button into the header or directly below the main headline. A telephone link configured as a tap-to-call button takes 48 pixels of vertical height, fitting comfortably within the recovered space.
When these adjustments are applied, a 670-pixel mobile viewport holds your header, your primary service headline, your location coverage, and a clickable phone number without requiring a single swipe.
Think this is happening on your site?
One hour on your business and your customers. No pitch. We work out where the business is losing customers online, and whether I am the right person to fix it.