I've got a site running aimed at touchscreens running Firefox (very specific I know, but it will hopefully help with a solution)
On the page in question, I've got a d3 map that I'm trying to enable pinch zooming for, however any pinch gesture is causing Firefox to set the zoom for the whole page. Is there a way to prevent the page zooming and only allow the map to zoom?
It's not an issue if I have to modify Firefox config settings but I'd prefer to avoid it and rely entirely on javascript if possible.
Thank you in advance
You might be able to do this using the viewport metatag and Hammer.js
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
This will disable the default browser zoom.
You can then use Hammer.js to capture gesture events which you will then pass to your D3.js code to zoom your map
Related
I'm experimenting with fullPage.js Responsive Slides Extension.
See https://alvarotrigo.com/fullPage/extensions/responsive-slides.html.
Wondering about responsive behavior on my phone: Samsung Galaxy S6.
On this phone, I don't see the site switch to its intended mobile appearance. Specifically, the horizontal rows aren't automatically switching to a completely vertical experience, and the elements aren't resizing.
I do see that site respond accurately using Developer Tools in Chrome and other browsers.
What's up do you think? Or how would you figure out what the issue is? Thanks in advance.
That's because the site is not using the viewport meta tag and therefore the pixels are not the real phone ones.
You can use the following meta tag and see how it works as expected:
<meta name="viewport" content="width=device-width,initial-scale=1">
I have created a parallax page.
On my desktop everything works great but if I view it on a mobile device the image is blown up so far I can literally count the pixels.
I have no idea what causes this.
Even so I have no idea how to fix this....
I don't even know where to start besides Google.
I found one topic where somebody states that this is a Safari issue.
Anyone?
I can't really create a JSFiddle or something because, like you stated, it's made in WordPress.
However please see the attached images. Maybe somebody can see at least where the problem lies and maybe tell me what causes this (global indication)
Desktop:
Mobile (iPhone)
You might want to try swapping background-size:cover to background-size:contain. This will ensure the background image fits both its width and height within the window, but could create some blank space. With 'cover', the whole area is guaranteed to be filled, but the image might not be entirely contained which seems to be what's happening now.
Have you tried to add:
<meta name="viewport" content="initial-scale=1.0">
to head of your HTML?
Or if that is not enough, try:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
It tells the mobile browser to use device width and to use full initial zoom level.
We are makeing a program in nw that runs on windows 8.1 tablets.
But some users accidentally zoom in because they used 2 fingers (touchscreen zoom).
They don't know how they can zoom out (they are 80+).
So I wanted to disable the zoom function, But I can't find how I can disable it. Is it possible? or is there a hack?
I know how I can disable the pitch zoom. But this isn't realy a pitch zoom.
Thanks!
I don't have a touchscreen myself so I can't test it, but adding the following to the HTML should do the trick:
<meta name="viewport" content="user-scalable=no"/>
let me know if it helped..
I've tried everything but cannot get my client's website to scale on my iPhone 5.
smalldotdesign.com/clients/ops
<meta name="viewport" content="width=device-width, initial-scale=0.3, minimum-scale=0.25, maximum-scale=5.0, user-scalable=1;" />
This code is in the correct place in meta because the site is scaling automatically... but wont let me pinch zoom. Can anyone help me with this? I've tried everything I can find. I've been messing with it for an hour and looking at all the forums but they all say the same thing.
Any guidance would be much appreciated. The page will not zoom even when the meta tag is removed. Maybe there is something in the CSS that could cause this?
Does anyone know if there is a possibility to remove the auto zoom on input fields in a webview on IOS6 ?
We have made a mobile site that is shown in a webview, and on IOS5- it works perfektly but when we try and open it on an iPad with a fixed width/height then the hole content is moved when entering a input field.
For IOS5- the meta tag viewport with user-scalable set to no works perfectly but on IOS6 i breaks.
Anyone have a clue?
try this.
<meta name="viewport" content="initial-scale=1.0,maximum-scale=1,width=device-width,user-scalable=0">
it works for me.