Next.js mobile optimization for gloved workers and CSV export pattern

Building a mobile-first industrial app where workers wear gloves requires specific touch target sizing (min 44x44px WCAG, ideally 48px+), prevention of double-tap zoom, and proper viewport configuration. Additionally, exporting filtered table data as CSV from a Next.js API route requires proper Content-Type/Content-Disposition headers and client-side blob download.

For mobile optimization: (1) Add touch-action: manipulation globally on interactive elements via CSS to prevent double-tap zoom. (2) Use min-h-svh instead of min-h-screen for proper mobile viewport handling. (3) Set min-h-[48px] on all buttons and min-h-[44px] on nav links. (4) Use viewport meta with viewport-fit=cover. For CSV export: (1) Create a GET API route that mirrors the data-fetching logic of your main API. (2) Build CSV with proper escaping (quotes around values containing commas/quotes/newlines). (3) Return Response with Content-Type text/csv and Content-Disposition attachment headers. (4) On the client, fetch as blob, create object URL, trigger download via dynamically created anchor element, then revoke the URL.