I've been working on my first HMLT5 game prototype for the past few days, and I need to make it work on both desktop and mobile. The problem is, I'm new on web development in general.
To get the mouse/touch position relative to the canvas I've stoped using e.layerX or e.offsetX and started using this method. I even added <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0">.
But even after that, touch coordinates come offset when rotating the screen, and Dolphin also treats touch in a very weird way.
Is there any general way to deal with this? I'm not familiar with the technologies so maybe use jQuery or something similar?
Edit: Also, pageX screenX and clientX all return the same value. No idea why, I used e.touches[0].clientX.
Edit2: I think I solved it. Forgot I had to call findPos(obj); again if the screen rotated. I don't even want to test it without the meta tag, I'll leave it like that for now.
I use this (via JQuery) to get my mouse position in a Canvas, relative to the canvas:
canvas.mousemove(function(e){
mmouseX = e.pageX-canvas.position().left;
mmouseY = e.pageY-canvas.position().top;
}
Tried it on Android default browser and it works ok, as well as on Desktops. Never tried it with Dolphin though.
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.)
For an application, I need to send chrome on android into full-screen mode.
I know that I need to use the Fullscreen API, which involves calling Element.webkitRequestFullscreen().
So, I call this on document.body as I want everything to be put into fullscreen mode and take advantage of all the phone screen.
However the problem is that the screen is resized/loses quality. This severely mucks up my application (which is drawing to a canvas for virtual reality) because I need all the resolution I can get!
To demonstrate the screen has been enlarged and lost drawable pixels, see this from the console of inspecting my phone:
window.innerWidth
980
window.innerHeight
1547
//now I enter full screen...
window.innerWidth
360
window.innerHeight
640
Clearly, innerWidth and innerHeight are being reduced by something when entering fullscreen, but I can't figure out what.
I have tried different resizing of the canvas which is contained in the body but to no avail.
But what I thought would be the solution would be to add a viewport:
<meta name="viewport" content="width=device-width, initial-scale=1">
and I also tried setting a definitive content width:
<meta name="viewport" content="width=900, initial-scale=1">
but neither of these seemed to have any effect on the behaviour of the webpage, so I am not sure if I am placing them wrong (in the <head>) or if I have the syntax wrong, but they don't change anything.
The solution (more of a workaround) was to turn my website, that I was opening in Chrome on my phone, into a Progressive Web App.
This is as simple as writing a short manifest.json file in the root directory then once the website is open in Chrome, tapping on "Add to Home Screen".
Now the manifest.json file has an option: display: fullscreen.
This does not reduce the working space resolution and was just the fix I needed.
Furthermore, considering my goal of a VR experience, it makes more sense for this to be a web app than a website that you have to fuss around with in Chrome.
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();
}
});
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 have a site that uses a jQuery UI slider.
I fired it up in my iPhone, and realised that when trying to drag the slider (by dragging my finger over it), it scrolls the site left to right and leaves the slider unaltered.
It appears I can only slide when the site is at a zoom level that shows the entire page. I think you can force this zoom level with a meta element. However, the site's content is quite illegible at this zoom level (at least on an iPhone's screen).
What is the quickest way to get around this? Is it possible, on mousedown (I guess the iPhone will fire this when the finger is placed on it) to zoom the site to fit-all so the user can actually use the slider?
And if the quickest way is hacky/ugly, what are some better solutions?
I am using jQuery.
Many thanks!
Try adding this meta-tag
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
I copied it from mrdoob's harmony webapp. I know that when you open his harmony app from android webkit browser, you can still draw around by sliding your finger. It doesn't make the entire web page slide.
Do you have to use the slider element? I also use the slider element on a site but if javascript is disabled or not available, I show two selectboxes instead of the slider.