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!
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 am currently converting my web app to a Cordova app. And I ran into a strange problem:
In Safari or when adding my app to the home screen, all touch inputs (Clicks/Touch) are fast (no delay) but when deploying my app as a Cordova project the inputs (Clicks/Touch) are slow (about 200-300ms delay - no measurement just an estimate based on the well-known touch delay problem).
I am testing on an iPhone Xs running iOS 12.3 and I am building the app with Cordova 9.0.0.
The following viewport settings are used by the app:
<meta content="width=device-width, initial-scale=1, maximum-scale=1, height=device-height, viewport-fit=cover, user-scalable=no" name="viewport" />
Any help would be greatly appreciated.
You need to replace your 'click' events with 'touchstart' events. You can detect if you are in a webview by doing
var click = 'click';
if(typeof(window.ontouchstart) !== 'undefined'){
click = 'touchstart';
}
Then listen to you click event using the click variable. Using jQuery
$('#something').on(click, function(event){...
TESTED AT: Chrome
It happens because there is something that expands body, some elements are bigger than a device width. Sooo the solution will be to show browser that we don't need his help, you can handle it by yourself:
html,
body {
width: 100vw;
overflow-x: hidden;
}
Finally you got something like this:
#media screen and (max-width: 600px) {
html,
body {
width: 100vw;
overflow-x: hidden;
}
}
But the browser still allows you to add scrolling to elements below body.
In other words, if your code doesn't interfere with html or body tag, it shouldn't inflict problems in your app.
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%}
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');
}
I just finished designing a webpage for my photography. I used Chrome as my test browser.
But opening my page on IE, nothing was visible. After some trouble, I isolated the problem to the fact that I'm using percentages. I searched online for solutions but everything is about minor variations (related to padding and percentages).
Here is a simple HTML file that works perfectly in Chrome, but not all in IE (the div is a pixel-less box, slightly expanded by the presence of text). Your help is greatly appreciated. If I can't solve this issue, I'll have to completely redesign my site.
<html>
<head>
<title>A test HTML</title>
<style type="text/css">
#currpage
{
position: absolute;
bottom: 18%;
right: 10%;
left: 35%;
top: 15%;
border:2px solid green;
z-index: 240;
}
</style>
</head>
<body>
<div id="currpage" style="visibility: visible; opacity: 1;">
This is just a test.
</div>
</body>
</html>
Have you tried... actually making a well-formed HTML file?
Without a DOCTYPE, the browser renders the page in Quirks Mode. In the case of IE, it renders as it would in IE5.5, which didn't support a lot of now-basic stuff.
Add <!DOCTYPE HTML> to the start of the file.
EDIT: While you're at it, always include a Content-Type <meta> tag (such as <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> so that the browser knows what the encoding is. Also consider adding <meta http-equiv="X-UA-Compatible" content="IE=edge" /> to force IE to use the strictest standards mode it has. These appear on every single one of my pages, even the blank template. The DOCTYPE and Content-Type are required (if you want it to actually work), and the Compatible header is optional (I mainly use it to get rid of the Compatibility Mode button that is annoyingly close to the Refresh button...)
Well, I'm on mac, so I can't check it, but it seems that you don't have a doctype in your HTML, so the IE might be in trouble because he doesn't know how to parse your code.
At the very first line (even before the <html>-Tag write the following:
<!DOCTYPE html>
This is for a HTML5 document.
Edit: ....edit.... forget that point.
Set height and width of the containing element explicitly. I had a similar issue with one of my old pages (worked fine in Firefox and Chrome, went to hell in IE) and what I found that that in that Firefox and Chrome will automatically set the dimensions of the containing element if none are explicitly assigned and then base those percentages off those assumptions. IE makes no such assumptions so when it looks at the percentages it basically says "um 35% of what?"