I have been using the meta tag for viewport, like Apple says on their own developer page, now for years on my responsive designs. As of recently my iPhone is now able to zoom in even with the following
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width;" />
<meta name="HandheldFriendly" content="true" />
The initial page loads to the correct size, but the users can now zoom in closer and the viewport isn't working. I was wondering if there is a way to disable to pinch to zoom using jQuery? Since I am already using some on my page it would be easy to implement.
Please note: Even on other websites like davidwalsh.name/demo/mobile-viewport.php that used to work it can now zoom in. I imagine this is part of the change with html5 released in December that disallows the maximum-scale attribute in meta tags but I cannot be sure. I have been using noBounce.js on page up until now that disabled all the iOS bounce and zoom capabilities but I am not sure which part is controling the zoom to steal that bit out of it and I don't use noBounce anymore on most apps for other reasons.
As of iOS 10, the mobile Safari browser will ignore user-scalable=no and will allow pinch and zoom on every website to improve accessibility.
From the iOS 10 changelog:
To improve the accessibility on websites in Safari, users can now pinch-to-zoom even when a website sets user-scalable=no in the viewport.
It looks like we will have to start designing sites with pinch and zoom in mind, at least for Apple devices.
I came up on the iOS10 Pinch-to-Zoom problem, i could fix this issue with a manipulation inside of the head-tag to the PortableWebApp(Cordova).
What i did was just to add this line in my init() from app.js
$('head').append('<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, width=device-width;" />');
The App is now Scrollable, adapts to different screen sizes/devices and no more Pinch-to-Zoom.
Note: remember this only works for Hybrid Apps, Safari is not affected by this workaround.
Related
How can I limit zoom in desktop browsers?
For mobile browser, I use meta viewport:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" />
For desktop browsers, I want to limit zoom from 100% to 300%. Searching on Stackoverflow, I have found a solution to prevent zoom using JavaScript or jQuery blocking the CTRL key. This is not exactly what I want.
I just ask a crossbrowser solution which allows the user to zoom, of course but inside this range: 100% - 300%.
How can I do it?
Thank you very much.
The viewport meta tag was introduced by apple to make responsive design more easier, later most browser vendors started handling this tag. However the viewport meta tag is not part of any web standards, the maximum-scale controls how much a user can zoom, and while it works for most browsers on mobile, it does not work for desktop browsers.
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=3" />
If u use this tag, users wont be able to zoom more than 300% on mobiles, however on desktops they are not limited.
The CSS Device Adaptation Module introduced viewport rules which should allow u to control zoom and max-zoom and min-zoom of the viewport. However this is still in a working draft state.
The following should be a cross-browser solution, and according to MDN compatibility table it should be working on chrome but actually it is not.
#viewport {
zoom: 1;
max-zoom: 3
}
Ironically chrome is actually handling the zoom rule correctly, but its discarding the max-zoom in browsers.
Anyway in practice it's not a really good idea to limit users from zooming, if u think big zooms are causing a certain page to look extremely ugly u can handle that using media queries.
But if u are really desperate, what u could do is to override the shortcut for zooming in desktop browsers, and change the document base zoom level yourself. While this works it would be an ugly hack and u have to handle different shortcuts based on different Operating systems/browsers, not to mention that if a user has a custom shortcut mapping your hack will not work.
Seems to me a lot of solutions from making the text 16px or using js to check if the phone is an iphone. Changing the style is not ideal and checking if it's an iphone seems a bit messy and over time more devices/browsers may have this behaviour.
Is there a simple rule that just prevents that default behaviour entirely no matter the device?
You can disallow your website to scale. That is if your page is properly designed for phones though. Otherwise, I would not recommend using this solution.
To prevent your mobile page or form fields to float around add or set the following viewport in your <head></head> to:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
I am trying to develop an app that works on the Kindle Paperwhite "experimental" browser. I would like to prevent the browser from scaling because I have designed my app to fit the screen perfectly.
I tried using:
<meta name="viewport" content="width=device-width, initial-scale=1.0,
maximum-scale=1.0, user-scalable=no" />
But the browser seems to ignore the declaration.
There are two ways I find scaling happens: (1) when the user click on a text box. The whole screen is scaled up to make the textbox large. (2) when the user zooms the screen by pinching.
I tried hooking into touch events with the idea of cancelling them. But they are not fired.
Is there any other event I can use?
I am using Foundation for a responsive website and have a problem with SOME mobile devices not properly scaling the viewport ONLY when you load another page via our ng-include. This loads new content into the page and the width of the page then breaks and requires horizontal scrolling.
This doesn't happen in certain devices such as Galaxy Note 3/4, but does happen in devices with identical resolutions, such as iPhone 6 Plus. I do have a viewport attribute and scaling set:
<meta name="viewport" content="width=device-width, initial-scale=1, target-densityDpi=device-dpi;">
Any help figuring out why this doesn't scale properly when I load new dynamic content for this single page application is greatly appreciated. I'm not sure if it's related (just thought of it), but we also use document equalizer reflow often:
$(document).foundation('equalizer','reflow');
I needed to add a min and max scale. Although I didn't test it, I imagine I just needed to add a max scale, as the content was flowing off the screen.
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
I have installed a Magento 1.9 and found that it is a responsive layout whcih is really good. But I want to disable responsive feature.
Is there any way if I can disable the responsive feature in Magento 1.9.
I tried putting following values in meta tag but it didn't work. I just want website to display desktop layout on mobile devices.
<meta name="viewport" content="initial-scale=1, width=1280, maximum-scale=1" />
Try adding the css...
body {
min-width:1280px;
}
Bear in mind that width is larger than most non-widescreen monitors, however.
I'd probably then remove the maximum scale from your viewport as I think that would prevent someone zooming in, thus making your site unusable on a smart phone.
I'd then try just:
<meta name="viewport" content="width=1280" />
for the viewport.