Full Webpage and Disabled Zoom Viewport Meta Tag for All Mobile Browsers

How do you disable viewport zooming on Mobile Safari?

Edit: may not work after iOS 10, please see touch-action based solution below.

Your code is displaying attribute double quotes as fancy double quotes. If the fancy quotes are present in your actual source code I would guess that is the problem.

This works for me on Mobile Safari in iOS 4.2.

<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

I have a mobile website but it loads zoomed out. How can I fix this?

You should insert the Viewport meta tag.

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

This means that the browser will (probably) render the width of the
page at the width of its own screen. So if that screen is 320px wide,
the browser window will be 320px wide, rather than way zoomed out and
showing 960px (or whatever that device does by default, in lieu of a
responsive meta tag).

Reference: Css-Tricks - Responsive Meta Tag - MDN - Using the viewport meta tag to control layout on mobile browsers

The values of meta viewport attribute are not reflected when in full screen mode in android chrome browser

I was able to go fullscreen by an alternative method using the web app manifest. It does not interfere with the meta viewport.

Here are the steps

1. Add this to the head section:

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

2. Create a manifest file like the following:

 {
      "short_name": "App Name",
      "name": "Full app name",
      "icons": [
        {
          "src": "launcher-icon-4x.png",
          "sizes": "192x192",
          "type": "image/png"
        }
      ],
      "start_url": "/index.html",
      "display": "fullscreen",
      "orientation": "landscape"
  }

The Google developers documentation to launch in fullscreen using a manifest is available here.

The issue of fullscreen disabling the metaview port is raised here.

Disable Zoom on mobile devices

Your code is ok, the problem is iOS specific. Quoted from another question here on stackoverflow:

For the people looking for an iOS 10 solution, user-scaleable=no is
disabled in Safari for iOS 10. The reason is that Apple is trying to
improve accessibility by allowing people to zoom on web pages.

See the whole thread here:
How do you disable viewport zooming on Mobile Safari?

Or this one:
disable viewport zooming iOS 10 safari?

---

Related Topics