top of page
  • Writer's pictureBrent Payne

The viewport tag prevents the user from scaling

The URL in question includes a viewport tag specifying 'user-scalable=no', which prevents the user from enlarging or reducing the page size.


Why is this important?

Viewing a website on different devices requires an adaptable viewport—the visible area of a webpage. The viewport tag advises the browser how to handle the dimensions and scale of the page.


The 'user-scalable' attribute determines if the page content can be zoomed on a mobile device. Disabling zoom with 'user-scalable=no' hinders accessibility, leading to a subpar user experience.


What does the Optimization check?

The Optimization identifies any page using a viewport tag that has 'user-scalable=no', therefore blocking page scaling.


Examples that trigger this Optimization:

Pages containing a viewport tag inside the tag with 'user-scalable=no' will trigger this Optimization.


<!doctype html>

<html lang="en">

 <head>

   <meta name="viewport" content="width=device-width, user-scalable=no">

   ...

 </head>

 <body>...</body>

</html>


How do you resolve this issue?

As zoom functionality is a standard feature on mobile sites, disabling it can compromise the user experience. iOS 10+, for instance, ignores 'user-scalable' settings.


To rectify this issue, simply omit the 'user-scalable' attribute from your viewport tag.


The advised viewport setting for best practices is:

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


Further Reading

7 views

Recent Posts

See All

ClubReq Gets A Link (Because They Asked)

I am a mentor for Techstars and have been for over 10 years. In those ten years I have mentioned to startups to ask ANYONE and everyone that they meet to link to their site. Yet, in all those times on

Comments


bottom of page