I'm working on a html5 game right now, which make use of touchevents on a canvas.
On IE11 for Windows Phone 8.1 (and maybe android / ios as well) moving the finger up or down (like scrolling) does squeeze / pull the page (as there is nothing to scroll) and leaves unfavourable whitespace.
I've tried
html, body, canvas {
touch-action: none;
}
in CSS, but with no success.
I also tried to set
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
in HTML, with no success as well.
Does someone has a fix for this behaviour? It seems quite common for most websites on IE11, but I need to let the page fixed.
Related
I am working on Ionic v1 application. It looks good on Android, iOS devices and most of the browsers, including MS edge. I needed to add Object.assign polyfill for it to start on IE11 but it's starting now.
But the website is scaled, big, everything is enormous, ever scrollbars are enormous. On my laptop is 15" Windows 10 Home edition it looks like this:
I've checked:
Browser zoom is 100%
HTML meta tags are as following:
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no">
altering them doesn't change anything.
Some dimensions are in rem, but hanging <html> font-size from 100% to 62% or 16px doesn't considerably influence anything.
Interestingly for some reason window.devicePixelRatio is 4 and something on Asus PC.
I've tried adding full core-js polyfill library, but that didn't change anything.
N.B.: It turned out that Ionic that I've created this website with doesn't support IE. Nevertheless, in the past I haven't seen such issues when something was not supported, e.g. with native scroll exploding to such dimensions.
Question: What can cause this effect?
I have a problem with mobile version of my website http://dsmedvednikov2.zzz.com.ua/. A horizontal scroll appears when using iPhone or iPad, no matter whether using Safari or Google Chrome browser. Everything works fine on Android devices. Could someone give me an advice?
you can restrict user to stop zoom/pinch on your website by adding this meta tag :
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
or if its a very minute x-scroll effect you can use the following little hack:
body {
overflow: hidden;
overflow-y: auto;
}
it will stop any horizontal scroll effect.
It seems like the page css is making this mess. Even in safari on my Mac getting the same issue. Please make sure your CSS.
As of my knowledge I gone through the CSS properties of your page
which is causing the issue. It will be better if you use % instead of 'px' will resolve your issue.
Thanks!
Keep Coding.
If you are using fixed width, then it might lead to problems. Use **
width:100%
**
when i change orientation from landscape to portrait mode my page zooms out in iPad.I have used vw and vh in styles.This issue is coming only for div which is using vw and vh but not for percentage div.I am usig below meta tag in my header
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
And i have tried many solution which are suggested in stackoverflow and other sites nothing is working including buggyfill.js.
This issue i am getting in iPad 2 and i tried in new iPad there it is working fine i.e ipad Air ios 8.
Please help me to fix this issue.Thanks inadvance,
Older versions of Safari don't support the vw and vh units. See here, But unless the issue is substantially affecting the usability of the site (can't navigate), I wouldn't worry too much about it, since most iOS devices would update to newer versions.
Also I'd remove the "user-scalable=no" and "maximum-scale=1.0" from the meta tag, because you're basically disallowing the ability to pinch and zoom, which is considered bad usability practice.
From looking around on the net, my understanding is that fixed positioning should work in Android 2.3 if one has the right meta tags set.
This is what my current viewport settings are.
<meta name="viewport"
content="width=device-width,
height=device-height,
initial-scale=1.0,
maximum-scale=1.0,
minimum-scale=1.0,
user-scalable=no" />
On my Galaxy S2, the div with fixed position (basically it's a thin header at the top of the page) does not stay in place when scrolling down the page. It moves with the page.
However, when you stop scrolling, it will jump to the top of the page again.
Is that the expected fixed position behaviour for Android 2.3?
Is there a better way to do this (which hopefully doesn't involve the massive complexity of addiong iScroll)?
I've just been having a look into this issue myself as part of a project we are doing: the S2 does not appear to fully support position:fixed, instead it emulates it by snapping the object back in place once the scrolling is completed (which is how we are handling it, with JS, for handsets which do not support position:fixed).
I've no idea why this is, as all the other Android 2.3 devices we have tested do support it fully with no issues, but you're not the only one having problems!
Here is another thing that breaks position:fixed on Android 2.3
anything{
-webkit-transition:none !important;
}
It only breaks when you use !important. Which sucks because
anything{
-webkit-transition:anything;
}
Makes elements invisible. Hope this helps!
There is an excellent comparison and discussion by Brad Frost of fixed positioning for Android, iOS, Firefox Mobile, Opera Mobile, Blackberry, Windows phone and more here.
When I double-tap near the edge of a page that exceeds the height or width of the browser window in Safari under iOS4, it zooms in or out and/or scrolls up, down, right, or left, depending on the size of the page and the current viewport position. How can I prevent this behavior, please?
I'm working on a site where this is (very) bad; we're preserving several layers of menu state and scrolling horizontally to navigate between layers. Double-tapping hoses the layout, and there's no intuitive way to get it back.
Double-tap does not seem to fire a scroll or touch event as far as I can tell. Other things I've tried:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no" />
... with variations:
user-scalable=no
user-scalable=0
width=device-width
width=320
It looks like making absolutely certain that none of my important elements--I have a static header, scrolling body, and static footer, and the header and body can both scroll sideways--actually exceed the viewport width and have overflow:hidden seems to have done the trick.
Very sad there's nothing official on this, because it's annoying, and breaks most of the other examples I've found online
You have a small typo in you meta tag, between each setting you should use comma. ex.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
I find that the <meta name="viewport" ...> tag generally works on iOS to prevent scaling with double-tap but on the iPad3 on iOS 5.1 there are occasional rare circumstances, which I have difficulty reproducing, where the double-tap zoom gets activated and subsequently screws up the page layout. The behavior is quite buggy. Perhaps using Javascript to manage tap events can help to prevent this from happening while we wait for Apple to fix this. It's difficult to test without having a way to reproduce the bug though.
Disclaimer: I have not tested this method.