Meta Tags for Mobile Web Apps | ToolBoxes

Why Mobile Meta Tags Matter

Desktop browsers give you a consistent canvas. Mobile browsers do not. Device dimensions vary wildly. The status bar consumes screen space. Users can add your site to their home screen. Without the right meta tags, your web app looks broken or feels foreign on mobile — letterboxed, wrongly scaled, or missing the immersive feel of a native app.

Mobile meta tags bridge that gap. They control viewport behavior, status bar color, home screen icons, and standalone mode.

The Viewport Meta Tag

This is the single most important tag for mobile web. Without it, mobile browsers render your page at desktop width and scale it down — rendering your responsive layout useless.

<meta name="viewport" content="width=device-width, initial-scale=1">

Property	Value	Purpose
`width=device-width`	Matches screen width	Prevents desktop-width rendering
`initial-scale=1`	No zoom on load	Starts at 1:1 pixel ratio
`maximum-scale=5`	Allows zoom up to 5×	Accessibility-friendly — never set to 1
`user-scalable=no`	Disables pinch zoom	Avoid — violates WCAG accessibility

Never disable user scaling. Users with visual impairments rely on pinch-to-zoom. Setting maximum-scale=1 or user-scalable=no breaks accessibility and can hurt your search ranking.

Theme Color

The theme-color meta tag sets the browser chrome color — the address bar on Chrome for Android, the status bar on Samsung Internet, and the title bar on desktop Edge.

<meta name="theme-color" content="#2563EB">

Tips:

Match your brand's primary color
You can change it dynamically with JavaScript based on the current page theme
Provide a media attribute for dark mode:

<meta name="theme-color" content="#2563EB" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#1E40AF" media="(prefers-color-scheme: dark)">

Apple-Specific Meta Tags

iOS treats home-screen bookmarks differently from Android. Safari requires its own set of meta tags for standalone mode appearance.

apple-mobile-web-app-capable

Makes the app run in standalone mode — no Safari UI when launched from the home screen:

<meta name="apple-mobile-web-app-capable" content="yes">

apple-mobile-web-app-status-bar-style

Controls the status bar appearance in standalone mode:

Value	Effect
`default`	White status bar, normal appearance
`black`	Black status bar
`black-translucent`	Transparent — content extends behind the bar

<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">

When using black-translucent, add top padding to your content — otherwise it hides behind the status bar.

apple-mobile-web-app-title

Sets the short name under the home screen icon (12 characters max recommended):

<meta name="apple-mobile-web-app-title" content="ToolBoxes">

apple-touch-icon

Specifies the home screen icon. Provide multiple sizes for different devices:

<link rel="apple-touch-icon" href="/icons/icon-180.png">
<link rel="apple-touch-icon" sizes="152x152" href="/icons/icon-152.png">
<link rel="apple-touch-icon" sizes="180x180" href="/icons/icon-180.png">

iOS automatically adds rounded corners and the superellipse mask — supply a plain square PNG.

Web App Manifest

While not a meta tag, the manifest.json file is the modern standard for PWA configuration. It replaces many older meta tags on Android and Chrome:

{
  "name": "ToolBoxes — Free Online Developer Tools",
  "short_name": "ToolBoxes",
  "start_url": "/",
  "display": "standalone",
  "background_color": "#FFFFFF",
  "theme_color": "#2563EB",
  "icons": [
    { "src": "/icons/icon-192.png", "sizes": "192x192", "type": "image/png" },
    { "src": "/icons/icon-512.png", "sizes": "512x512", "type": "image/png" }
  ]
}

Link it from your HTML:

<link rel="manifest" href="/manifest.json">

Display modes

Mode	Behavior
`browser`	Normal browser chrome (default)
`standalone`	App-like — no address bar, keeps status bar
`minimal-ui`	Some navigation controls
`fullscreen`	No browser UI at all — games and kiosks

Format Detection Meta Tags

Mobile browsers auto-detect phone numbers, addresses, and dates, turning them into links. This can break your layout or link to wrong actions.

<!-- Disable all auto-detection -->
<meta name="format-detection" content="telephone=no">

<!-- Selective control -->
<meta name="format-detection" content="telephone=no, email=no, address=no">

Only use these if auto-detection causes problems. Otherwise, leave detection enabled — users expect clickable phone numbers.

Complete Mobile Head Template

<head>
  <!-- Viewport -->
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <!-- Theme color -->
  <meta name="theme-color" content="#2563EB" media="(prefers-color-scheme: light)">
  <meta name="theme-color" content="#1E40AF" media="(prefers-color-scheme: dark)">

  <!-- iOS standalone mode -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
  <meta name="apple-mobile-web-app-title" content="ToolBoxes">

  <!-- Icons -->
  <link rel="apple-touch-icon" href="/icons/icon-180.png">
  <link rel="manifest" href="/manifest.json">

  <!-- Format detection -->
  <meta name="format-detection" content="telephone=no">
</head>

Key Takeaways

The viewport meta tag is essential — never omit it from a mobile page
Never disable user scaling — it breaks accessibility
Use theme-color to match your brand across browser chrome
Apple requires its own meta tags for standalone mode — the manifest alone is not enough
Provide multiple apple-touch-icon sizes for different iOS devices
The Web App Manifest replaces many meta tags for Android/Chrome but works alongside Apple-specific tags
Disable format detection only when it causes layout issues

Try It Yourself

Generate viewport, theme-color, Apple, and manifest meta tags all at once with our free Meta Tag Generator. Fill in your app details and copy the production-ready HTML snippet.