CODEWITHSUNDEEP
htmliosmobilezooming
mike_freegan
mike_freegan

Reputation: 368

Prevent zooming on mobile site not working

I have my site up at Isotope Labs.

It uses a mediaquery to detect mobile and set a mobile stylesheet (mobile.css) with body width of 100%.

The scripts.js file disables the jQuery scripts for mobile devices too.

It all works, except I can't seem to disable zooming on mobile devices properly.

I have used the following in my HTML head (after trying very many alternatives) to disable zooming for mobile:

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

On iOS and Chrome Mobile for Android, it still allows zooming. It does apply the mobile stylesheet, but it doesn't look quite right (text appears too small).

It actually works on Android's stock browser, although every time you hit refresh it alternates between looking right, and behaving exactly like Chrome and iOS.

I've gone through and deleted everything from the head, but even if I strip out all of the javascript and CSS, it still allows zooming.

This is driving me insane. Any ideas?

Upvotes: 1

Views: 1048

Answers (1)

codelark
codelark

Reputation: 12334

You appear to be setting the meta tag in a child frame, not the root page. When viewing the full-page frame url directly, zooming is prevented.

Upvotes: 2

Related Questions