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%
**
Related
I have a web app like my image 1 below, everything looks good. The problem is that when the app is launched on a mobile that has a notch, it creates a layout problem, as you can see in image 2. And I can not use a "safe area" because some of my pages need to be stuck on top, like the image 3.
I can easily solve this by adding media queries to add a padding above the content on iPhone X, but the problem is that not only iPhone X have a notch.
Ideally there should be a JS method to detect mobiles with a notch (and return the height of this notch would be even better) But is this possible? If not, what is the better way to deal with this problem? Do I have to create media queries for every smartphone in the world ?
HTML::
meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover"
CSS::
padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
Im trying to solve a problem. I have a setup, whick works perfect. Its very fluent and clean with almost native browser function(swipe, scroll etc..). My problem is, that i can't remove the url-bar in mobile-browsers, because the html and body content is not scrolling. The navigation-block and also the content-block has following the rule...
overflow: scroll; -webkit-overflow-scrolling: touch;
which works very cool on IOS and Android. I know that IOS 8+ does not allow minimal-ui any more. The whole setup is for the mobile delivery of a regular webpage. I think, that 99% will not bookmark it as webapp, so that...
<meta name="apple-mobile-web-app-capable" content="yes">
... is not helpful in this case.
Does somebody know, how i can solve this problem?
PS: The script can be downloaded here: http://www.filedropper.com/mobilenavigation
I'm using following meta tags. But as you can see in the pictures from the emulator, my website swipes with all the content in it.(Img 1 is the normal case which it supposed to look like and img 2 is the version that i'm trying to resolve.) I'm using small grids in it. I have this problem only on Android devices.
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">
Thanks in advance.
You are having an overflowing issue, your one of the DIVs are going beyond the screen.
Check your HTML code and find out your culprit DIV. Set DIV width to 100%. I would have changed my HTML code a bit rather than using hack to prevent swiping, and hence horizontal scroll bar to appear.
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.
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.