References SO Questions: remove-unwanted-white-space-in-webview-android
and android-webview-has-extra-white-space-at-the-bottom
I am using NativeScript for angular mobile app development. I have a login page that renders in webview and once app has the token, app then redirects to other native components.
My problem is: Screen renders fine for the first time and when user clicks on any of the text field, key board appears but when user presses Android Back button to hide the keyboard it shows the whitespace in top and bottom of the page.
Based on suggestions available on above threads, I have tried setting the padding and marging to 0.
and
<meta name="viewport" content="target-densityDpi=device-dpi, width=device-width, height=device-height, initial-scale=1">
Thanks for the Playground Manoj.
It looks like there was percentage height and width in html page and everytime user moves out from html page it re adjusts itself to available space and sometimes squeezes as well.
I was using the webview inside the GridLayout and setting the height and width 100% to that GridLayout solved my problem.
Related
http://jsbin.com/fopiwaluwo/edit?html,css,js
http://output.jsbin.com/fopiwaluwo (full screen output - should be viewed on an iPad/iOS simulator.)
When scrolled to the bottom or top of the scrollable overlay the body also scrolls. I want to disable any scrolling on the body while scrolling on the overlay (white transparent area with copy).
This is a simplified example of the web app I wish to apply this to. I know that adding position: fixed to the body disables the scrolling however I can't use that in the real world example. JavaScript solutions welcome.
Cheers
Just add:
<script type="text/javascript">document.ontouchmove=function(event){ event.preventDefault(); }</script>
And behold, body does not scroll, but the overlay does :-)
Update: seems to work on iPhones running iOS 10 only.
Does not work on iPad or iOS 9.
I am building a mobile app with jQuery Mobile for iPad landscape orientation. The pages are 1024px to 768px. When I view it on the desktop (Chorome, Safari, Firefox) it is rendering as it should (1024x768).
But after I save it to the Home Screen on the iPad (iOS 8) and open it, the pages are rendered as trimmed (around 20px) from the bottom. When I check it from the inspector, i see that the html element (which is assigned 99.9% height) is rendering as 747px height. So is the body element.
I tried to give pixel values as height, margins, paddings and all but some greater container seems to be clipping them.
I also tried a few things with the #viewport rule but nothing came out of it.
Any ideas why this is happening and how I can solve this?
It seems the problem was about the status bar. In the default mode, the iOS will pull all your html under the status bar but size the viewport to leave space for the bar (height: 748px). So the space below the 748px will be left blank, to show the white background.
When I added the line below in the head of my html file, the problem was solved (the viewport height equal to 768px -landscape)
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
I then tried it with different values for the content attribute, first with content="black", and then with content="default". In the latter it was the same as no meta tag was applied. With content="black", the bottom was again left blank, but this time the the background color was black.
I have a UIWebView shown in an iPad screen (iOS7, landscape). The web page is exactly 1024 x 768.
If I inspect the view at runtime (using revealapp.com) I can see the width of the UIWebView is 1024px. However, it contains a UIWebBrowserView within it, which is showing as 1027px wide.
The upshot of this is that the user can scroll the web page 3px horizontally, which is annoying. It should fit perfectly and be "locked" when the page loads. I still allow pinch zooming using these settings.
self.webView.delegate = self;
self.webView.scrollView.bounces = NO;
self.webView.scalesPageToFit = YES;
If I inspect the DOM of the webpage running in the app using Safari, I can see that the web page itself is definitely 1024px wide. So, it seems iOS is causing the problem.
So... does anyone know how I can force the UIWebBrowserView to 1024px rather than 1027px?
Thanks
Tobin
There are two things you could try here:
Zoom in the content using the scrollView property of your UIWebView by setting it's contentSize to your desired size (you may need to play with the contentOffset, too, until you get it right).
Set an appropriate viewport meta tag on your web page to control the layout on a mobile device. Something along these lines:
<meta name="viewport" content="width=device-width, initial-scale=1">
Hope this helps.
In Bootstrap 3, there seems to have been an issue with the fluid grid causing a horizontal scrollbar to appear on small devices. My question is different...
I'm not getting any scrollbar, unless I click a text input. On an iPhone, there is an automatic zoom on the current field. This is ok (I guess), but after leaving the field, the zoom is not removed, so the content is clipped and there's an ugly horizontal scrollbar.
Is there a way to prevent the zoom? Or maybe tell mobile safari to set the zoom back to what it was?
First: you can create fluid-responsive tables. But you do not need it. If you don't give the <table> the class="responsive" the horizontal scroolbar doesn´t appear.
If you want to disable the zoom on small devices use this:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
Hope, it helps :)
So you can make a website go "full screen" and hide the addressbar/chrome on ipad if the user adds your page to their home screen, which makes an icon on the home screen that they launch your site from. You just put some meta tags like this:
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-touch-fullscreen" content="yes" />
However, I haven't been able to get a site to hide the browser chrome when the page is just in a normal browsing session (the user hasn't launched your site directly from an icon on their home screen). Is it possible to do so? How?
According to the Apple Docs it doesn't specifically say you can't (however as you've noted, it appears to only behave as desired when the site has been added to your home screen).
I also noted that on the Apple Support Forum the consensus seems to be that you need to launch from the home screen to get the desired effect.
Quote from Docs:
apple-mobile-web-app-capable
Sets whether a web application runs in full-screen mode.
Syntax
<meta name="apple-mobile-web-app-capable" content="yes">
Discussion
If content is set to yes, the web application runs in full-screen mode; otherwise, it does not. The default behavior is to use Safari to display web content.
You can determine whether a webpage is displayed in full-screen mode using the window.navigator.standalone read-only Boolean JavaScript property.
Availability
Available in iOS 2.1 and later.
I found this works,
$('body').delay('1000').animate({ scrollTop: '0px' }, 'slow');
I noticed that scrolling down removed it, so scrolled 60px (height of the chrome), but that hide it and scrolled down the page, but a scroll of 0px, assuming your page has started at the top (not on a # target), fools it!
I guess you could even remove the delay and animate, but I wanted it to be smooth, and not too jerky.