The site I am working on www.salonbkb.com when in a mobile browser will act responsive but will allow the user to use touch to move the site from left to right creating a whitespace on the remaining space after the drag.
Foundation.zurb.com does not do this nor do most sites I have found. I believe msn.com still does this.
How can I prevent this from happening.
I tried
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/>
but that didn't do anything.
A page will not do this ordinarily if you have width=device-width, initial-scale=1. Some element is stretching the page, allowing the user to pan sideways. This will often happen if you have margins on a 100% width element, or if box-sizing is not set to border-box and there is padding on the 100% width element. You just need to find the element (chrome devtools is useful for this, keep scrolling down and try to find the one with a big border that sticks out) and modify or remove it.
By the way, I would highly recommend against setting user-scalable=no or maximum-scale=1. It's terrible for usability. Users should be able to zoom in. There are almost no good use cases for this. If you're concerned about tap delay, use fastclick.
You can use javascript to disable the default actions of the browser (like page drag).
document.addEventListener("touchmove",function(event){event.preventDefault();});
BUT, that will stop the user from being able to scroll down also. to prevent only sideways you would have to add conditions that check the touch direction...
document.addEventListener("touchmove",function(event){
if(//check if the absolute value
of last touch.x -current touch.x
is greater than some threshhold){
event.preventDefault();
}
});
Related
I have a web application that is essentially a map (mapbox) with some d3.js points overlayed, filters, etc.
My issue is that when zooming in on the map using pinch (mobile), when I accidentally pinch over one of the points, or one of the map pop-ups, the entire page zooms (i.e. scaling). This is a fairly common occurrence. I only want user to be able to zoom the map, not the page itself.
I've implemented:
<meta name="viewport"
content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
I also tried user-scalable=0
And still the behavior persists. I've also tried this:
document.addEventListener("touchstart", function(e){
e.preventDefault();
},{passive: false});
document.getElementById('map')
.addEventListener('touchstart', function(e){e.stopPropagation()}, false);
But this is cumbersome and doesn't exactly work the greatest because it involved limiting event-listeners one element at a time. Shouldn't the user-scalable argument in the HTML be enough? I don't understand why this is happening.
Mobile browsers have no effect on user scalable because they over ride it to get people responsive experience on the mobiles.
Sites like google maps also zoom when we pinch in the site(expanding the ui elements as well as the map)
One way to override this response is to detect the pinch gesture and then re zoom the page to the normal level by a function such as:
function toggleZoomScreen() {document.body.style.zoom = "100%”;}
Shouldn't the user-scalable argument in the HTML be enough?
Depends on the browser/device. There are not many legitimately cases where zooming should be disallowed, so browsers will ignore it. Some browsers like Safari uses heuristics based on text size to decide if it should zoom or not... (where the solution is to set font-size to 17px or higher on input elements to prevent zoom)
First strategy would be to call preventDefault() on all mouse
events, like mouseup, mousedown, et.al (not just the touch events)
until you are able to block the zoom.
Second strategy is to take into account the zoom and scale the
images and point locations by the amount of zoom...
(Probably also want to take into account window.devicePixelRatio when scaling.)
None of the questions on the subject has any real answer (I've
seen one that says "Just stop the zoom altogether!" and the other that
says "Set the width!" (which isn't the case))
I have a web application that's supposed to work on mobile (Mobile Chrome only is enough). Pinch-to-zoom is a must-have feature.
It all works well, except for the control buttons I have. Standard buttons, fixed position at the bottom left of the page.
When I pinch-to-zoom, those buttons, while remain on bottom left, grow along with the zoom.
Is it possible to have those buttons not grow by zoom somehow?
Here is a potential fix and good read if you are running into this problem.
Here is the website, css fixed position.
How my prototype works
What I’m doing is calculating the zoom level (poorly) with JavaScript
and then applying CSS transforms to scale the fixed element back down
to normal size. As you might expect there is no smooth transition
during zoom. There are a whole host of bugs and edge cases. I’ve not
even attempted cross browser support (hence no code).
This does not seem to provide a script but it gives you the idea of what to do and how to accomplish it.
Another link on this site seems to have a bunch of great info about your problem, more of a proposal.
Here is the website, position: device-fixed;
The only other option I currently know of is disabling zoom. This is not the best approach but is what I currently do if a mobile design needs a fixed header. This will prevent the user from zooming which will then prevent the element to be affected.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
I've been trying for days to get smooth transitions in a RhoMobile project i'm working on, and i've managed to fix most of the glitches in page transitions: flickers, header jumping a couple pixels on transitions, etc...
But one problem still remains: It seems that when going from one page to another, just after the transitions is done (the destination page alredy appears), it will scroll down about 15-20 px, as if during the transition, it paints the destination page content not taking into account the px needed to display the header, and then later, adds that space.
I've seen this question asked before, but with no answer. Notice its not a duplicate of all the questions regarding flickering on transitions, since if alredy managed to get that working.
My viewport is as follows:
<meta name="viewport" content="user-scalable=no, height=device-height, width=device-width">
I've tried using javascript to set overflow: hidden while transitioning, but this has no effect on android.
Any suggestion appreciated,
Thanks!
It turns out that if you use extra height for your fixed headers and you want jquerymobile to respect that size at all times (also in transitions), you have to specify its height in css:
.ui-page-header-fixed{
padding-top: 3.5em !important;
}
I've got an InDesign magazine which contains a Web Content Overlay (pointing to a responsive web site). Everything works fine apart from when it comes to scrolling.
Only vertical scrolling (up and down) is required, horizontal isn't.
Problem
When the user swipes left or right, the magazine's page changes and the web content closes.
Question
Is there any way that I can prevent scroll events from propagating up to the magazine from the web content overlay? Preferably, this would be done from the web content itself (e.g. using JavaScript) as it would mean I would only have to edit in one place, rather than on each page the web content is shown.
Attempted
Catching the touchmove event on the page's body and calling stopPropagation() on it.
Calling preventDefault() on the event (this stops any scrolling at all).
Using pageX on touchmove events and calling preventDefault() on any ones that look to be horizontal swipes (too unreliable).
Using CSS overflow-x: hidden
jQuery Mobile's custom scroll events.
A few more combinations of the above.
Found a solution. First, insert a <meta> viewport tag in the head:
<meta name="viewport" content="width=701, maximum-scale=1.0, minimum-scale=1.0, initial-scale=1.0, user-scalable=no" />
Note that I've set a static width of 701, this is important. The web content overlay's width is 700px. Setting a width of 701 means that the page can move ever so slightly. This wiggle means that the swipe left/right is caught and not percolated up to InDesign. There is a slight shift (by a pixel) if they do swipe, but it's minor compared to changing page.
Next, add the following CSS to your content:
.content {
-webkit-overflow-scrolling: touch
}
You may not need this CSS, but it was necessary for us.
I'm doing a chatroom somewhat simular in style(not really a clone) to iphone sms, however I when used on an actual mobile device the text input gets centered on the screen and zoomed in, making it impractical for those devices. How can I cause the text input to be closer to(or better yet underneath) the virtual keyboard instead of centered in the screen. I don't have any none-ios devices to try this on but I assume simular problems occurs on other webkit mobile browsers.
and for a bonus question, any way to make the keyboard go away when enter is pressed or check for the done button being pressed?
Thanks!
Add this to your header:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
This will prevent zooming in onfocus. Try adding user-scalable=no as well if that doesn't help.
As for hiding the keyboard, all you need to do is force the input to lose focus.
element.blur();