I'm making a mobile app with PhoneGap. I've got this--
function preventBehavior(e)
{
e.preventDefault();
};
document.addEventListener("touchmove",preventBehavior, false);
You know how you can drag a page a tiny ways off of the smartphone screen by dragging it, and then it pops right back when you release it? And all you see behind it is black? That's what this code is meant to prevent. And it does.
But it's also preventing all standard scrolling, such as scrolling through a list. Does anyone know a solution?
An easy solution for Cordova 1.7+
Locate Cordova.plist in your Xcode project.
At the top it will say “UIWebViewBounce“. Set this to NO.
you have two options:
iScroll - Super effective in giving this effect. Granted it does have it's limitations.
-webkit-overflow-scrolling:touch; a new css method introduced in ios 5 it works well but again has it's limitations within phonegap.
Personally I use iScroll for phonegap apps, it works great if you don't have a super large list of items you are scrolling. If you're looking for a more native way I would suggest the overflow-scrolling method, this has proven to cause some strange effects in the webview. Phonegap uses webview vs mobile safari so your support differs a bit.
iScroll - http://cubiq.org/iscroll-4
webkit-scrolling - http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/
You should add this in your head tag: (No need of your listener code now)
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
This basically disables the scaling (zoom in/out) and that drag effect which you do not want. So the page will not be scrolled but still touchmove event can be tracked.
Related
UPDATE AT BOTTOM: I discovered a partial solution, but still not a total solution. So, I will leave my question up.
I have made a new webpage, and placed the hamburger menu on the top right of the screen, and hidden it off screen when not selected. The code is too lengthy to copy/paste here, but you can view source of my new page at this URL: https://ContractWithAmerica2.com
My problem is this: When I scroll up and down on my mobile device, and don't scroll "exactly" up/down, the screen slides to the left or right due to the extra content, (content is this: my hamburger menu which I hid to the right of the visible viewport).
Now, my desktop behaves: I was able to insert HTML CSS code that removes the scrollbar; however, on my smartphone, the scroll is not disabled-- and it is annoying to me (and to others).
Now, I found another webpage with HTML and CSS that, like my page, has a hamburger menu on top-right, so I thought I'd be "smart" and copy it. That page is at this URL:
https://www.WesternJournal.com
However, it uses a form of CSS that draws from a stylesheet, and yet even when I tried copying their stylesheet method, I was unable.
My request is for assistance in writing CSS directly into my page's HTML code (which makes my page more stable, as it will not need to send a "call" for a stylesheet), that will do this.
My HTML and CSS are, so far, good in making my page work-- except for this one flaw. Does anyone know the proper code to make my page "lock" and stop the left-right scrolling when my menu is hidden? Like the Western Journal website does? When scrolling on that page, it scrolls up/down ONLY-- and does not allow me to scroll to the left-right, exposing the hidden menu-- as does my page.
P.S.: I looked all over StackOverflow, but no answers prior given have fixed this problem for me, so I must ask de novo.
Thanks!
Gordon, new StackOverflow member!
UPDATE: Remember, when I said I discovered a partial solution at top? Here is my update:
Initially, I had this code:
<meta name="viewport" content="width=device-width,initial-scale=1.0">
But just earlier today saw some post some place with newer info, and I updated that section to this:
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0" />
<meta name="apple-mobile-web-app-capable" content="yes" />
In other words, the newer code I found online had the "user-scalable=no" attribute, plus some code specific to Apple devices.
Plus, prior versions had this code:
<style>body{overflow-x: hidden;}</style>
But my newer version added a few more bells and whistles:
<style>body{overflow-x: hidden; position: relative; width: 100%;}</style>
When I ran the tests, however, it worked ok only on CHROME (both desktop and mobile device), where both the scrollbar disappeared, and the touch screen attempts to scroll "left-to-right" were finally stopped. (I.e., my menu, hidden off-screen, stayed hidden until clicked.)
My "desktop" OPERA browser worked ok, but, while my desktop MOZILLA FIREFOX hid the scroll bar (good), it still let me manually scroll (with the arrow keys). My mobile experience was even worse:
Both the SAMSUNG INTERNET BROWSER and my OPERA BROWSER on my smartphone (mobile device) allowed the page to scroll left-to-right, meaning users who scrolled "down," when reading would scroll to the left, exposing the hidden menu if they didn't scroll "exactly" top-to-bottom.
In other words, only GOOGLE'S CHROME worked ok on my mobile device.
Can anyone else weigh in?
URL: https://ContractWithAmerica2.com And: Mirror pages are https://GordonWatts.com/m.index.html and https://GordonWayneWatts.com/m.index.html
Call me old fashioned, but I like a "spare tire" (redundancy) on the Internet Highway, and so I cross-post to several mirrors.
Thank you if anyone can help me get it to work in ALL browsers!
Gordon Wayne Watts, FLORIDA
Screenshot of problem
I'm trying to test my touchscreen swipe event listeners on a react component built with storybook, and I can't seem to get proper mobile emulation to work. The style changes I have attached to window width breakpoints work upon physically resizing the window, but when viewing the iframe mode in either the chrome device emulator, or on my phone, it just looks like a tiny version of the desktop site. It doesnt seem to work with my swipe animations either. I've done tons of googling on this, and all I've managed to find is a storybook add-on to manipulate the viewport (https://www.npmjs.com/package/#storybook/addon-viewport). I'm pretty new to developing for mobile-only options like touchscreen swipe, so any help would be greatly appreciated!
i discovered that the problem was with meta tags. to get mobile emulation to work, you have to in the .storybook folder, add a file named preview-head.html and in the file put <meta name="viewport" content="width=device-width, initial-scale=1"> then to get the emulation to work correctly, view the component as an iframe.
I'm creating a webpage and I want create a version for smartphones.
I found information about this, but using a media-query with max-widht.
The problem is when a user open the page in a smartphone with full HD screen, it's showing all content like in notebook with 15.6"
How can i solve this?
Thanks
Take a look at HTML Responsive Web Design at w3schools: https://www.w3schools.com/html/html_responsive.asp
What you need is to make viewport responsive by adding meta viewport tag to your pages head:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I agree with #StaXter. But IF you can, I'd implement a feature both back end and front end solution. From what I've read online, the back end solution may fail sometimes, and as every web developer knows, JS sometimes fails too, for whatever reason although JS failing is becoming less common in my personal opinion.
But if you can't then there's 0 doubt, just use the solution that StaXter said.
Only other thing I can add to that where you're just using the front end is to make sure you use meta tags: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
There are even meta tags for when someone has disabled JS, you can redirect them to a page where there's no JS.
I have already disabled the CSS, deleted half of the HTML code, it looks like it is a bug with the Android browser. I'm using Android 4.2.2, built-in browser.
How it should render:
Text 1234567891011
How it is actually rendering:
Text 1234
567891011
I have double checked the page code and the CSS, disabled Javascript and CSS, and still get the same results. I'm not sure if it is a browser issue or a code issue.
Page to check: http://lucrebem.com.br/blog/emp/66-o-que-vender
Screenshots, as requested:
So far I have found this:
Those images are from a tutorial using Android 4.1.2, which means those older versions of Android have that issue with auto-fitting the pages. Isn't there a way to configure the code itself to fit the page, instead of having to change Android settings?
Solved.
Had to insert this in the HTML:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
What it does is controlling the viewport layout in mobile, this way the page can fit to screen without having to change Android settings.
As stated here:
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
I'm trying to add touch functionality to an SVG.
I recognise the touch event using a jQuery like selector.
(I'm actually using angular JQLite - angular.element()):
.on("mousedown touch", function(event) {
On my desktop and in mobile Safari, there's no issue. The touches are recognised correctly.
It also responds correctly when saved as a bookmark, but when I include:
<meta name="apple-mobile-web-app-capable" content="yes" />
in my header, and save to the home screen.. the touch piece doesn't respond.
I'm wondering whether anybody knows the root cause of this or has a a workaround?
I'm using Angular 1.2.27 and iOS 8
For info, I worked around the issue by embedding an ng-click within the SVG itself.
This would tend to point to angulars JQLite implementation of click/moousedown/touchstart being the cause or possibly not supporting the same touch events as ng-click.
Add the following lines to your css-file.
svg {
pointer-events: none;
}
Now it should work.