Touchscreen MacBook Pro: What Your Website Needs Before Mac Visitors Start Tapping

The touchscreen MacBook Pro means some of your desktop visitors will soon tap your website with a finger instead of clicking it with a trackpad. Most pages will keep working, but anything that only responds to hover, and any button or link that is small and tightly packed, will get harder to use. Both problems are cheap to fix if you start with your navigation.

What did Apple announce?

On October 28, Apple announced the touchscreen MacBook Pro, officially the MacBook Pro with PROLED XDR Display and the first Mac with Touch. It comes in 14-inch and 16-inch models, from $2,899. Pre-orders opened the same day, and Apple says it reaches customers and Apple Stores from Friday, November 6.

Two details matter for websites. Apple lists scrolling a webpage with a swipe and pinching to zoom among the everyday touch actions. And it says many existing apps work with Touch right away because macOS translates touches into clicks.

That translation is why most sites will survive. It is also why hover is the weak spot: a finger on glass has no hovering state before it lands.

What breaks when someone taps a touchscreen MacBook Pro?

The parts that assume a desktop visitor always has a mouse pointer floating over the page.

• Dropdown menus that open on hover. A tap may follow the top-level link instead of showing the submenu, so visitors never see the pages underneath.
• Hover-only content. Tooltips that explain a price and product cards that reveal "Add to cart" on hover stay hidden.
• Small, crowded targets. Close buttons and carousel arrows sized for a trackpad are easy to miss with a fingertip.

Many sites already handle touch on phones by switching to a tap-friendly menu at small widths. The touchscreen MacBook Pro shows the desktop layout, where those fixes don't apply.

How will Safari tell your site someone is using touch?

Apple hasn't said yet. Neither the announcement nor the Safari 27.2 release notes, published October 26, explain how Safari on the touchscreen MacBook Pro reports touch input to web pages.

That matters because sites often adapt to the input device with CSS media features. The hover and pointer features describe the primary input. The any-hover and any-pointer features ask whether any connected input can hover, or is coarse like a finger. A laptop with a trackpad and a touchscreen could match pointer: fine and any-pointer: coarse at once, and Apple hasn't said which input Safari will treat as primary.

So don't let one media query decide whether your menu works. Our position: build every interaction to work by click, tap and keyboard, and use media queries only for spacing and polish.

How do you get a site ready for the touchscreen MacBook Pro?

Start with the parts of the site visitors use to contact you or pay you, and work outward.

1. Make menus open on tap and keyboard focus. Give each dropdown a real button that opens and closes it, and keep hover as an optional extra. If the top-level item is also a link, put the toggle in a small arrow button beside it.
2. Size targets for fingers. The W3C's accessibility guidance sets a minimum target size of 24 by 24 CSS pixels, and the stricter Target Size (Enhanced) criterion asks for 44 by 44. Use 44 for primary actions such as "Book a call" or "Checkout".
3. Bring hidden content into view. Show product card buttons all the time, and let tooltips open on tap as well as hover.
4. Add room where touch is possible. An @media (any-pointer: coarse) rule can add padding to buttons and menu items, as web.dev's interaction guide shows.
5. Check custom widgets. Sliders, carousels and maps should use pointer events, which handle mouse and touch input in one set of handlers.

None of this needs a separate design. It is the same work that makes a site hold up on tablets, and our guide to mobile-first design covers the layout side.

How should you test before November 6?

Test with what you have now, then confirm on the real device.

• Now: use the site with only the keyboard, then on a touchscreen Windows laptop if anyone on the team has one. Both expose hover-only menus quickly.
• In the browser: Chrome's device emulation can simulate touch at a desktop width. It won't reproduce Safari, but it catches most hover problems.
• From November 6: visit an Apple Store and tap through your main menu and your contact or checkout form on a touchscreen MacBook Pro.

Frequently asked questions

Will my website work on the touchscreen MacBook Pro?

Mostly. Apple says macOS turns touches into clicks, so links and buttons will respond. The risk sits in hover-only menus and small targets.

Do I need a separate touch version of my site?

No. One responsive site that works by tap as well as click covers the touchscreen MacBook Pro and phones alike.

How big should buttons be for touch?

At least 24 by 24 CSS pixels under WCAG 2.2, and 44 by 44 for important actions, following the stricter Target Size (Enhanced) criterion.

Does Safari on the touchscreen MacBook Pro report touch to websites?

Apple hasn't documented it yet. Build so your site works either way, and recheck once Apple or the WebKit team publishes details.

Is it worth fixing for a small number of visitors?

Yes. The same fixes help phone and keyboard users too, and they are usually changes to menus and CSS rather than a redesign.

Start with your navigation

If you fix one thing before the touchscreen MacBook Pro reaches stores, make your main menu open on tap, not only on hover, with targets at least 44 pixels tall. That one change protects the path to every other page. Our design team reviews navigation and interaction patterns, or you can request a free audit of your site.