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.
Related
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 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.
When viewing my site on mobile device, the site is automatically viewed in mobile version, like the image i have attached below
But i need to view it in desktop view like the image below.
In other words, how to disable mobile view when the site is viewed in mobile device and use the desktop view instead?
It's hard to tell with the information given, but perhaps you're using the meta viewport tag:
<meta name="viewport" content="width=device-width">
If you have something like that in your code, remove it. If your website isn't designed to be responsive, then adding in the meta viewport tag will awkwardly zoom users in.
If you don't want your side responsive, you can manually set a width for the viewport. Add a meta tag like this into your html:
<meta name="viewport" content="width=1024">
where 1024 should be a width that your site looks good. With this number, you can fine tune the appearance of your site.
Also remember to remove any other viewport definitions(especially any width=device-width).
You may have a look at this article: http://webdesignerwall.com/tutorials/viewport-meta-tag-for-non-responsive-design .
If your desire is just to view it in desktop mode / full site for testing (that's what it sounds like to me) and not permanently disable mobile view, than a number of browsers support Desktop view: Android Chrome -> tap on the top right three dots, select 'Request desktop site'.
If you are using this metadata ,just remove it and the site won't be responsive
<meta name="viewport" content="width=device-width">
otherwise you can add metadata for setting your viewport size :
<meta name="viewport" content="width=your-size-in-number">
You may want to read Responsive Web Design - The Viewport
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.
I've been struggling with this issue for over a week now and would really appreciate any help I can get. I'll explain the issue as I understand it but please correct if I say anything incorrect.
In iOS 7.0.x, when the keyboard became revealed, the web view was resized so that the area that the keyboard took was not considered part of the viewport window size. Up until 7.0, the Cordova Keyboard plugin handled this web view resizing. Since 7.0 natively handled the keyboard reveal in the desired way, the Keyboard shrinkView option for the config.xml file became a "No-op" as of this commit:
https://github.com/apache/cordova-plugins/commit/20215013bf91b659b73d5f428ae91dd58be1273a
However, in 7.1, the area the keyboard occupies comes up over the web view. This has a painful side-effect. Say you want to prepend a <div> to the body with a textarea area (like leaving a comment or chat reply), ie;
<body>
<div id="app">...</div>
<div id="reply">
<textarea></textarea>
</div>
</body>
example CSS:
body {
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
overflow: hidden;
}
#reply {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
Whenever you focus or input into the textarea, the web view will natively re-center the input field. Since the web view still takes the entire height of the screen into account, the div will not stay fixed to the bottom and thus breaks the layout.
I've tried the following things:
Futzing with the CSS for the body and fixed div. Position fixed/absolute doesn't seem to make a difference. Setting an explicit height to the body does nothing.
All possible combinations of meta viewport options. This is what I'm currently using:
<meta name="viewport" content="user-scalable=no, initial-scale=1, minimum-scale=1, maximum-scale=1, width=device-width, height=device-height, minimal-ui" />
Uncommenting the "No-op" in the cordova keyboard plugin. This still breaks the layout as it did in iOS 7.0.x.
Having JS event listeners on the input and focus events to keep calculating the bottom offset to keep the div at the bottom. This is very jumpy because its battling the native web view behavior of centering the input field.
Altering the meta tag to set an explicit height after the keyboard is shown/hidden.
I'm using Cordova 3.4.0-0.1.3
Has anyone else experienced this issue? Any solutions or ideas?
A quick fix for me involved forcing the window to scroll back into position when the input looses focus:
$("input").on('blur',function(){
//set brief timeout to let window catch up
setTimout(function(){
//reposition at top left corner of screen
window.scrollTo(0,0);
},20);
});
Hope that helps!
It looks like Ionic has a multipart solution to this problem which includes dynamically updating the meta viewport tag depending on the device and also by hooking into the keyboard hide/show event and then using their scrolling framework to scroll the input into view.
More info here..
http://ionicframework.com/blog/ionic-keyboard/
This requires you to use their framework so I'm in the process of porting this over to JQuery and IScroll and I'll keep you updated on my progress.
I also posted my experiences with the phonegap keyboard on the phonegap forum but have not had much response yet.
https://groups.google.com/forum/#!topic/phonegap/LE9-lIsNT2c
I am experiencing somewhat similar issue. I have a cordova 3.3.0 app in combination with Sencha Touch.
The problem I was facing before iOS 7.0 was that the title bar went beyond the top of screen when the keyboard came up. The keyboard simply used to push the whole viewport up. After a lot of search and hard work, I was able to partially fix the issue by implementing a counter animation to move the title bar down while the keyboard was rising, using the focus and blur events of the textfield.
iOS 7.0 came as a happy surprise as it fixed this issue natively. I commented out my fix (fortunately, did not delete) and the title bar remained fixed at the top without any extra effort.
It seems iOS 7.1 has reverted that fix (wonder why??). When I updated to iOS 7.1, the title bar issue returned and I have now no choice but to uncomment the clumsy fix. Can anybody give some better or permanent solution to fix this problem?
Does this solve your issue?
Check your html meta tags for something like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
Replace it with this:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, target-densityDpi=device-dpi" />