I have a Windows 7 tablet (an ASUS EP121), and I am using a web browser to display a Google Maps-based web application that I have created. Basically, I want the pinch gesture to zoom the Google Map (similar to using the scroll wheel to zoom a Google Map when using a mouse), rather than zooming the entire web page.
In Opera, Firefox, and Chrome, the pinch gesture simply zooms in the entire page. This behavior makes perfect sense for most use cases, but I'm wondering if there is any setting, in any of these browsers (e.g., Opera, FF, Chrome) that can cause the pinch gesture to behave like a mousewheel instead of zooming in the entire page?
Interestingly enough, in Arora, the pinch gesture can be used to zoom in/out a Google Map; however, other issues are preventing me from using Arora effectively that I think will be more difficult to address than the issues I am raising in this question.
Another option would be to disable pinch gestures (I know this is possible in Firefox, I'm sure the other browsers have some means to do the same), and then try to let the application take care of it. Are there any thoughts on going this route? Would something like jQuery mobile be able to accomplish this?
As a last resort, I could use Qt's webkit and implement my own event handling (basically creating a stripped down Arora), but I'm really hoping there's an easier way that utilizes currently available browsers.
Thanks.
If anyone ever runs into the same problem that I had here, I have created a very simple WebKit-based web browser using Qt that implements a pinch gesture and uses it to fire off a scroll wheel event.
It works quite well (especially for Google Maps) and the source is available on github here. I've tested the code on Windows 7 and Ubuntu Linux 12.04; it works without any problems.
Related
have created a quick test off canvas menu in zurb foundation, works great except: On every other browser, than chrome (both ios and android) tested: (http://prntscr.com/obpii6) it looks like it should.
But in chrome when you "toggle" the "off canvas menu" then the menu opens as it should but then jumps and zooms out (the text becomes way small) http://prntscr.com/obpkjb
Anyone have any clues as to what might cause this? I have never experienced anything like it before.
To anyone else who bump into this, and find this question in a search:
I found out that in chrome on mobile devices you can activate a force zoom activation, this option in the browser settings seemed to be the culprit. The option isn't activated by default.
So if you experience something like this check the following: goto > settings > Accessibility > Force enable zoom option, deaktivate this and see if this helps.
If someone know of a clean way to prevent this strange zoom out via html,css og js, do share :)
I'm trying to test which keyboard type comes up by default for certain inputs on iOS and Android. Is there a way to bring up the on screen keyboard in Chrome devtools phone simulator?
So far I have tested the iOS version of my website by running the xcode simulator and pointing to my website but it would be really convenient to use devtools.
Update: 🙁 Virtual keyboard support is deprecated in Chrome 68+; this answer no longer works.
Original answer
You can view the standard keyboard for the Nexus 5X device for the portrait or landscape view:
However, you can't interact with it, nor does it change based on the context it is called from. I found by inspecting DevTools that it is simply an image file overlayed onto an SVG. There's nothing smart going on with these profiles. It's just useful to look at how the app responds to the reduced space.
To test the proper behaviour of keyboards with context, I would just recommend using XCode and Android emulators, or better still use real devices.
See: Test Responsive and Device-specific Viewports
I'm currently working on one of my first two projects and you can tell that I'm still at the beginning of my youtube-tutorials-&-SO-powered learning journey:
our neighbor's skin & beauty spa
Please don't be too harsh on my code :D I've hand-written everything from scratch in a little editor.
In short, everything seems to work A-OK on desktop computers (I tested FF and Chrome), but on the iPad and other tablets I'm experiencing nasty bugs - I'm having major trouble with two issues:
the Google Maps iframe is always visible (overlaps other
sections) on tablets even if the corresponding section isn't clicked
on in the menu, and I have no idea why! It seems that the
visibility:hidden on a position-fixed element isn't interpreted
correctly?
:focus works on the image gallery 'sneak peak', but
in the services section, the 4 sub-content areas are inaccessible.
(Unrelated?) When the page loads on my iPad (mini) the #logo_box
div appears at page load, but turns semi-transparent the very
instant as the map iframe appears.
EFFORT1: I removed the Google maps iframe-containing 'content' container altogether, and suddenly the :hover on the other content sections stopped working as well. This might be an indicator that something is 'linked' in a way that's not right...
EFFORT2: I assumed that the < label> is the culprit, but I can't pinpoint it. I tried this suggested solution, but it's for IOS4 (2011), and as Rob Fletcher commented last Feb., it doesn't work on IOS7.
EFFORT3: I feel that the .content div's {visibility:hidden/visible;} is causing trouble in the android mobile browser: input:checked hides instead of reveals the particular section while all others show.
Btw, how do I friggin' trouble-shoot tablets? I don't have any dev tool on ipad & android browsers.
Help is much appreciated!!
On iPad, you can go into the Settings App, then go Safari -> Advanced -> Web Inspector.
Then plug it into your Mac via USB and open Desktop Safari on the Mac. If you haven't already enabled the Develop menu, go Safari -> Preferences -> Advanced -> Show Develop Menu.
Then when you open a web page in Safari on the iPad, you can connect to it via the Develop menu on your Mac's Safari and use the web inspector.
If you're using Chrome on Android you can use remote debugging https://developer.chrome.com/devtools/docs/remote-debugging
Weinre provides similar functionality across more platforms (including Android native browser), but is a bit more involved to set up.
We are using Chrome in kiosk mode and accidentally users are causing the application to zoom with the recent addition of pinch zoom support.
They then think they've broken it and simply walk away leaving the application (and subsequently a 55" touch screen) in a broken state.
Now the only thing to work has been stopping event propagation for touch events over 2 points. Issues with that are we can't do multitouch apps in that case and if you act fast the browser reacts before javascript. Which in our tests still happen on accident by users.
I've done the Meta tags, they do not work. Honestly I wish I could disable chrome zooming at all but I cant find a way to do that.
How can I stop the browser from zooming?
We've had a similar problem, it manifests as the browser zooming but javascript receiving no touch event (or sometimes just a single point before zooming starts).
We've found these possible (but possibly not long-term) solutions:
1. Disable the pinch / swipe features when using kiosk mode
If these command-line settings remain in Chrome, you can do the following:
chrome.exe --kiosk --incognito --disable-pinch --overscroll-history-navigation=0
--disable-pinch - disables the pinch-to-zoom functionality
--overscroll-history-navigation=0 - disables the swipe-to-navigate functionality
2. Disable pinch zoom using the Chrome flags chrome://flags/#enable-pinch
Navigate to the URL chrome://flags/#enable-pinch in your browser and disable the feature.
The pinch zoom feature is currently experimental but turned on by default which probably means it will be force-enabled in future versions. If you're in kiosk mode (and control the hardware/software) you could probably toggle this setting upon installation and then prevent Chrome updates going forward.
There is already a roadmap ticket for removing this setting at Chromium Issue 304869.
The fact that the browser reacts before javascript can prevent it is definitely a bug and has been logged at the Chromium bug tracker. Hopefully it will be fixed before the feature is permanently enabled or fingers-crossed they'll leave it as a setting.
3. Disable all touches, whitelist for elements and events matching your app
In all tests that we've conducted, adding preventDefault() to the document stops the zooming (and all other swipe/touch events) in Chrome:
document.addEventListener('touchstart', function(event){
event.preventDefault();
}, {passive: false});
If you attach your touch-based functionality higher up in the DOM, it'll activate before it bubbles to the document's preventDefault() call. In Chrome it is also important to include the eventListenerOptions parameter because as of Chrome 51 a document-level event listener is set to {passive: true} by default.
This disables normal browser features like swipe to scroll though, you would probably have to implement those yourself. If it's a full-screen, non-scrollable kiosk app, maybe these features won't be important.
html {
touch-action:none;
}
This will disable browser handling of all panning and zooming gestures. The gesture will still be available for handling by javascript code.
https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
Just so anyone stumbling across this page is aware the flag in Chrome to disable 'pinch to zoom' is now:
Google Chrome/Chromium/Canary version above 50:
chrome://flags/#touch-events
Google Chrome/Chromium/Canary version less then 50 or old versions:
chrome://flags/#enable-pinch.
I'm dealing with the same issue. I think I can handle it reasonably well with the following approach
determine the css pixel width of the html element: document.documentElement.clientWidth
compare this measurement to the known pixel width of the kiosk screen
if the html element is wider, in css pixels than the screen is, in physical pixels, that means it's scaled
if the html element is scaled, apply a zoom to the body element to compensate. The formula is `body.style.zoom = htmlElementClientWidth / screenPhysicalPixelWidth
This techique has the beneficial side effect of automatically scaling the UI to whatever size the current window is, which is helpful for development if I'm developing on a screen smaller than the target screen.
More on screen pixels vs css pixels, and a discussion of how the html element expands to fill the available space at quirksmode.org.
Another solution that currently works in Chrome (54) is to add an event listener for the 'touchstart' event and call preventDefault() based on the length of the targetTouches or touches on the event.
This solution prevents a pinch (any two fingered gesture for that matter), but still provides flexibility with how you want to respond to the event. It's a nice solution because it doesn't require you to disable touch events altogether (as required if you want to disable pinch using the chrome flags, since chrome://flags/#enable-pinch no longer exists).
window.addEventListener('touchstart', function(e) {
if (e.targetTouches.length === 2) {
e.preventDefault();
}
}, false);
Some text that you can't pinch zoom on Chrome (tested in 54)
As of Version 51.0.2704.84 m, chrome://flags/#touch-events disables all the touch-events not only the pinch function. FYI. Hopefully, Google will return this functionality in future release.
I've disabled dragging on my Google Maps component, here's an example:
http://jsfiddle.net/qr2BJ/7053/
However when I'm browsing on my iPhone I can't swipe down "on" the map. So, when the map is taking up most of the screen, mobile users won't be able to swipe (scroll) down to view the rest of the page.
Is there a way to fix this, apart from sticking an extra empty div on top of Google Maps?
I had the same problem on android devices. As they are running on webkit I guess the cause is the same as for iphone. Anyways, a post on the following link addressed the issue and the first answer worked for me: Embed Google Maps on page without overriding iPhone scroll behavior