Now I have read a couple SO answers about this question, but I have tried them all with no luck. I have found that that website I have been developing on I have had my browser zoom set differently than the default zoom size. I want to accommodate for people that may still have the default zoom size. Being the curious guy that I am, I wondered if I can change the browser size for that window. If the user wants to zoom in or out after they load page that's up to them, but I wanted to see if there was a way to have a default zoom so that it looks how it should.
Some things that I have tried
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Tried this and literally nothing changed on my browser. I set it to default just to check as well, and even after changing all the numbers it never made a difference.
So I came across a different way to do this, in CSS and same thing nothing happens at all.
#-viewport
{
zoom: .5;
}
So now I am on SO. I'm not even 100% positive that what I am trying to do is the right way to do it. I could be doing something completely off track, so that's why I am asking this question.
Basically, how do I achieve a default zoom size for the size on load, and what is the syntax for it?
Try: user-scalable=no
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
And:
#-webkit-viewport { zoom:100%; }
#-moz-viewport { zoom:100%; }
#-ms-viewport { zoom:100%; }
#-o-viewport { zoom:100%; }
#viewport { zoom:100%; }
Related
I wonder how to prevent the mobile phone, both iOS and Android to prevent automatic zoom when an input tag of type "color" is selected. I have seen a few solutions online but none of them fit my use case. Here is what I have found so far and my comment on them.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=0"/>
This prevents all zoom, even manual zoom on my phone, which is not great.
Adding style="font-size:16px; to the input tag.
This doesn't work on my phone.
It looks like you need to set font-size rule when input is focused:
input[type="color"]:focus {
font-size: 16px;
}
I working on simple HTML5 page and using the below code to prevent zoom/scroll.
<meta name="apple-mobile-web-app-capable" content="yes"/>
<meta name="full-screen" content="yes"/>
<meta name="screen-orientation" content="landscape"/>
<meta name="viewport" content="user-scalable=0"/>
The Facebook app review team came back with the below feedback and rejected my app.
Developer Policy 1.2 - Build a Quality Product
We found that your game allows zooming/scrolling outside of gameplay, which detracts from the in-game experience.
Unless your game requires these motions for gameplay, please revise your game before resubmitting for review.
Not sure how to prevent zoom/scroll in HTML5 for iOS devices. Please help.
pras,
As #lukeocom suggests, if you have overflow issues, you can set the overflow property to hidden for overflowing issues. But if you just want to to disable zoom, you can use the following in your HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
This should work on mobile, but not on desktop. If you want to disable zoom on desktops as well, you can attach an event listener to the Ctrl, + and - keys and then use e.preventDefault() in your JavaScript and do the same for Ctrl + mousewheel events.
Edit: Also, you can use zoom: reset in your CSS if you want to disable the zoom functionality for sure on the desktop. Though, this works only in Chrome.
These are my sources:
meta tag source
JavaScript source
MDN documentation for further reading
Im not sure if this will help you, but it sounds like you may have some overflow content. So you could try adding overflow: hidden to your html tag, or setting max-width/height, or setting absolute or fixed position:
:root,
html {
overflow: hidden;
position: absolute;//or fixed
top:0;
right: 0;
bottom: 0;
left: 0;
max-width: 100vw;
max-height: 100vh;
}
Alternatively, inspect your page content and see if any containers are overflowing, and apply the above to that specific container, or fix the cause of the issue itself. Debug debug debug!
So I pushed a site to http://austinenl.com however it appears that on iPhones, it appears really zoomed out. From my research, I needed to add
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
However, after adding this, I am still getting reports that the site looks bad on iphone. I can't find any other source that will give any other suggestions on what would cause this issue, so I am hoping someone here can help.
Instead of using: <meta name="viewport" content="width=device-width; initial-scale=1.0;">, which uses a semicolon.
You could try using: <meta name="viewport" content="width=device-width, initial-scale=1">, which uses a comma.
If have been using the second option for years now and everything has been working fine. This is the way as Apple intended it. See the Supported Meta Tags.
Edit: I've checked your CSS and I've found some rules which I'm not sure where they are used for, but removing them seems to help.
.area-checkboxes {
display: -webkit-flex;
}
.area-checkbox {
min-width: 250px;
-webkit-flex: 1 1 250px;
flex: 1;
}
Both found in style.css
Try adding a width of 100% to the body and get back to me
html,body{width:100%}
In some smartphones browsers is set ( by default ) font zoom - like for example 130%. How can i dont allow browser to resize font?
Sorry for my english
I found this for fonts. I'm not sure it will work on different systems, but you could give it a try:
body {
-webkit-text-size-adjust: none;
}
It seems you can also turn auto-scaling off:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I want to disable Pinch and Zoom on Mobile devices.
What configuration should I add to the viewport ?
Link : http://play.mink7.com/n/dawn/
EDIT: Because this keeps getting commented on, we all know that we shouldn't do this. The question was how do I do it, not should I do it.
Add this into your for mobile devices. Then do your widths in percentages and you'll be fine:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
Add this in for devices that can't use viewport too:
<meta name="HandheldFriendly" content="true" />
this will prevent any zoom action by the user in ios safari and also prevent the "zoom to tabs" feature:
document.addEventListener('gesturestart', function(e) {
e.preventDefault();
// special hack to prevent zoom-to-tabs gesture in safari
document.body.style.zoom = 0.99;
});
document.addEventListener('gesturechange', function(e) {
e.preventDefault();
// special hack to prevent zoom-to-tabs gesture in safari
document.body.style.zoom = 0.99;
});
document.addEventListener('gestureend', function(e) {
e.preventDefault();
// special hack to prevent zoom-to-tabs gesture in safari
document.body.style.zoom = 0.99;
});
jsfiddle: https://jsfiddle.net/vo0aqj4y/11/
This is all I needed:
<meta name="viewport" content="user-scalable=no"/>
To everyone who said that this is a bad idea I want to say it is not always a bad one. Sometimes it is very boring to have to zoom out to see all the content. For example when you type on an input on iOS it zooms to get it in the center of the screen. You have to zoom out after that cause closing the keyboard does not do the work. Also I agree that when you put many I hours in making a great layout and user experience you don't want it to be messed up by a zoom.
But the other argument is valuable as well for people with vision issues. However In my opinion if you have issues with your eyes you are already using the zooming features of the system so there is no need to disturb the content.
I think what you may be after is the CSS property touch-action. You just need a CSS rule like this:
html, body {touch-action: none;}
You will see it has pretty good support (https://caniuse.com/#feat=mdn-css_properties_touch-action_none), including Safari, as well as back to IE10.
Unfortunately, the offered solution doesn't work in Safari 10+, since Apple has decided to ignore user-scalable=no. This thread has more details and some JS hacks: disable viewport zooming iOS 10+ safari?
Found here you can use user-scalable=no:
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
IE has its own way: A css property, -ms-content-zooming. Setting it to none on the body or something should disable it.
Disable pinch to zoom in IE10
http://msdn.microsoft.com/en-us/library/ie/hh771891(v=vs.85).aspx
Disables iOS pinch-zoom
window.addEventListener(
"touchmove",
function (event) {
if (event.scale !== 1) {
event.preventDefault();
event.stopImmediatePropagation();
}
},
{ passive: false }
);
Tested on iOS 15.3 in Safari and Brave.
Try with min-width property. Let me explain you. Assume a device with screen width of 400px (for an instance). When you zoom in, the fonts gets larger and larger. But boxes and divs remains with same width. If you use min-width, you can avoid decreasing your div and box.
Not sure is this could help, but I solved the pinch / zoom problem (I wanted to avoid users to do zooming on my webapp) using angular hammer module:
In my app.component.html I added:
<div id="app" (pinchin)="pinchin();">
and in my app.component.ts:
pinchin() {
//console.log('pinch in');
}