I am currently developing an application in BB 10 web works. I am facing an issue of page showing a grey screen when scrolling up and down. This issue happens only when the content of the page is scrollable and the complete UI shifts up and down if we scroll. Any help would be great.
Thanks
Have you setup the viewport for you app yet?
<head>
<script>
var meta = document.createElement("meta");
meta.setAttribute('name','viewport');
meta.setAttribute('content','initial-scale='+ (1/window.devicePixelRatio) + ',user-scalable=no');
document.getElementsByTagName('head')[0].appendChild(meta);
</script>
</head>
Related
I am very new to mobile development so please don't knock me to much for newbie questions.
I think I have the correct meta tags.
<meta name="viewport" content="width=device-width, initial-scale=1">
From apples site it said use the below tag to allow running in full screen mode but it does not seem to work.
<!-- Allow web app to be run in full-screen mode. -->
<meta name="apple-mobile-web-app-capable"
content="yes">
Width and Height are set for Iphone 4S on IOS 8
width: 320px;
height: 480px
I can post the full code if it will help it is very simple 1 page layout header with two buttons, content just text, and a footer with nav icons
The problem as I see it is that it is not full screen and because of this the IOS navigation bar at the bottom cuts off my footer which has an icon menu
I figured it out, the meta tags are correct, you just have to create a shortcut on the home screen by clicking on the up arrow box on the bottom bar in safari and choosing add to home screen. Then launch your app and presto bars are gone. Just browsing to say 192.../yourapp does not work you have to add a shortcut to the homescreen to remove bars
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">
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.
I am designing screens using jquery mobile.
I'm not able to scroll horizontally and i used the following meta tag for view port settings.
How to get the horizontal scrollbar?
You can limit the width of the div tag and then declare overflow scroll on the div:
<div style="width:200px; overflow:scroll" ></div>
There are serious cross-platform short-falls with using overflow=scroll in a mobile environment. I have had success with implimenting iScroll: http://cubiq.org/iscroll-4
I know that iScroll works on iPhone and Android devices from my own testing.
Hi I have designed a custom facebook landing page and it is quite long but the iframe seems to be limited to a set length. getting the scrollbars turned on or off is not a problem, I can do this but regardless of having the scrollbars or not the iframe stays the same size. any ideas?
you can view the page here:
http://www.facebook.com/petsmarket?sk=app_199629183389823
cheers.
paul
Change your IFrame size to auto-resize then use: FB.Canvas.setSize
P.S: Be-aware that your JS code is broken since you have it all in one line with comments in it!
When you know desirable height the simplest way to do this is below (let it be 1200px):
<body onLoad="FB.Canvas.setSize({height: 1200})">
...
</body>
<script src="http://connect.facebook.net/en_US/all.js"></script>