I am using the StageWebView Class to show html pages inside my iOS app. Everything is working fine except for the scrolling. It allowing the end-user to scroll the entire webview and is showing an unsightly gray background after reaching the end of the pages content.
My question is: Is there a way to disable the scrolling past the content of the page?
I don't think there's a way to do what. The StageWebView uses the iOS default browser which implements this feature (with a different background color, the behavior is the same though).
Did you try with this viewport?
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
The important part is user-scalable=no which should remove the "scroll bounce" of the iOS browser.
Related
I'm serving a page for phones and tablets. I am using OpenX to serve advertising on there. The advertising should be loaded in an iframe which should be the width of the page. I'm using bootstrap.
I tested things with this code:
<iframe src='http://www.cnn.com' width=100% height=120px scrolling='no'></iframe>
This makes an iframe that's the exact same width as the browser window. Problem is that if I open this on an iphone it will rescale the iframe to the size of the window loaded in it, and that's very unwanted behaviour. It doesn't do it on my desktop, only on the iphone. I haven't tested yet with other smartphones.
Basically what I'm looking for is an iframe that is the same width as the screen (100%) and doesn't rescale when I load a bigger page in it
I'm pretty sure you are looking for the viewport meta tag to control this. Here is a reference that will explain it completely: https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
Basically you want to drop this code into your head:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
I want to make html5 fullscreen app. I made a page and added it as an icon to my iphone. I added metatags:
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="viewport" content="width=device-width, user-scalable=no" />
What I wanted to achieve is: black status bar on top (this does not work and I do not know why. It is still default status bar...anyone ideas?) without possibility to zoom (like in facebook app) - this works fine.
Now the problem - I can scroll on my iphone even if my app fits on the screen. It bounces back, but I dont want this behavior. I would like to disable that and enable scrolling for a particular div (.ui-content). How can I achieve that?
EDIT:
status bar is black now. It changed itself after some time. Was the previous version cached on the iphone or what?
This will prevent scrolling on the whole page
document.ontouchmove = function(e) {e.preventDefault()};
In your case, where you want some divs to be scrollable, and some not to, you should be able to catch the event before it gets to the document
scrollableDiv.ontouchmove = function(e) {e.stopPropagation()};
If your using Cordova 1.7+, open the Cordova.plist file and set the key UIWebViewBounce to NO
Extending dmanxii's approach here is what we are doing.
$("body").on("touchmove", function (event) {
if ($(event.target).is(".WhatEverClass") || $(event.target).parentsUntil().is(".ParentClass")) {
//console.log("NOT Disabled");
}
else {
//console.log("Disabled");
event.preventDefault();
}
});
As the title says, i need to disable vertical bounce on iphone on my mobile web form application. Ive tried alot of different things, but most of them disables my form or horizontal scroll and bounce as well. Any ideas?
Im using jquery.mobile btw :)
Update:
I actually managed to get the code from the first answer working somewhat:
function stopScrolling( touchEvent ) { touchEvent.preventDefault(); }
document.addEventListener( 'touchstart' , stopScrolling , false );
document.addEventListener( 'touchmove' , stopScrolling , false );
The reason why I couldnt get it to work in the first place, was that there actually was some margin on my body (stupid me).
But. As the layout is fluid and im using jquery.mobile and have <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> in the header (I think) it doesnt work properly. The page is zoomed out (view from like a desktop browser) and zooming is disabled. Without the code, the page scales perfectly right from an 50" tv to the smallest nokia on the planet.
Am I doing something wrong? Im starting to think the problem is caused by the body/content somehow being over 100% of the viewport. No idea how though.
use this view port specify your initial zoom level and maintain minimum and maximum zoom level
<meta id="viewport" name="viewport" content ="width=device-width, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I found this answer : https://stackoverflow.com/a/20477023/2525304
They are basically detecting when the user is reaching the top/bottom of the page and then catch the scrolling event with event.stopPropagation(); to prevent any more scrolling.
This is how the site I'm putting together should look:
GB Personal Training
This is what it looks like on the iPhone:
iPhone Browser
As you can see it pushes in the #wrap and #outer-wrap DIVs, so that the background images in them have a right margin and I don't know why. I only have access to the custom.css file and not the HTML.
I'm currently editing a clone of it at:
gbptclone.live.subhub.com/
Define max-width in your body. Write like this:
body {
min-width: 1000px;
}
add this inside your HTMLhead:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Actually this will prevent the user to zoom the content (wich sucks, from an user end experience):
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Instead, in my opinion (and I am no guru), you should use:
<meta name="viewport" content="width=1000px">
Try setting a width for #outer_wrap and #wrap (you probably want 100%).
It looks like Mobile Safari is expanding the size of the #visual-portal-wrapper div, which isn't enough because Safari resizes text for iPhone display. You can change this with -webkit-text-size-adjust: none; but that would make the links rather undersized for iPhone users. That's why it fits in a normal browser but not in Mobile Safari.
Changing the width of the divs should stop them from having content expand beyond their edges (they're 974px by default because that's what #visual-portal-wrapper is, but all the contents overflow and cause the visual errors) and have the background images appear cut off. You might also want to add background positioning for #outer_wrap since it appears slightly off on the screenshot from what I'm seeing in Firefox.
Edit: Alternatively, you could try changing the width: 974px; on the #visual-portal-wrapper div to min-width: 974px;, of course making sure you account for IE's problems with min-width).
I have a gwt application which is developed to be also used with mobile.
I have this tag put in the html file of the gwt app to fit the app in mobile screen:
<meta name="viewport" content="width=device-width; initial-scale=1.0; user-scalable=no" />
However I need to allow the app to be scrolled vertically, as the app will output a list results. I have tried to wrap the main VerticalPanel with ScrollPanel however it still does not scroll vertically?
Any ideas?
Did you give a fixed size to your scroll panel? Otherwise it automatically grows to fit its content.