i am trying to display video as the splash screen using this Tutorial. I am able to do css and add images but i can not use video as the splash screen.
MY code in index.html
<!-- Ionic's root component and where the app will load -->
<ion-app>
<!-- custom splash screen (non-angular component) -->
<div id="splash-screen" class="splash">
<video autoplay muted loop webkit-playsinline playsinline src="assets/splash/Splash_Reduced.mp4"></video>
</div>
</ion-app>
The splash screen is present but the video is broken or not available.
It looks like IONIC does not let us remove the default splash screen. The white blank screen will display for a while in android and the default splash screen is required for IOS.
SO, THE ONLY OPTION I FOUND IS USING TWO SPLASH SCREENS.
The default static splash screen and then the animated splash screen for the same logo. :)
I know it is not good practice. But after long searching and trying, I got to this solution.
Related
I have a HTML which has a background image but on MAUI Android App it is not appearing, only a white background.
<WebView Source="https://maui20220216.azurewebsites.net/test.html" />
I tried this same code on Xamarin and it correctly displays the background image.
The HTML page on the Source is like this:
<!DOCTYPE html><html lang="en"><body style="min-width:100vw; min-height:100vh;background-image:url('https://way2tutorial.com/images/img_nat.png') !important; background-attachment:fixed; background-position:center bottom; background-size: cover;"></body></html>
MAUI:
Xamarin Forms:
How to make the background image appear on the WebView on MAUI Android?
Related:
https://github.com/dotnet/maui/issues/4733
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 have a mobile website with two header buttons. In portrait mode on iPhone it works fine. I can push the buttons.
Here is the problem:
When I switch to Portrait mode and try to tap on the buttons the native iPhone address bar shows up. It comes over the header so I cannot push the buttons.
The images show the problem:
After pushing one button you see this:
How can I prevent this problem?
Is there a way to detect i the iPhone browser bar is shown to the user?
Edit: When you use Safari whatever page you are on and turn your phone into landscape orientation and tap too much at the top of the page the address bar shows up. If you page has a fixed header bar you cannot reach it.
Edit: When I make the header position fixed then it turns out that I cannot tap the header buttons anymore when the orientation changes to landscape and the address bar shows up.
Edit: Here is a sample project which I use: http://mobilegwt.appspot.com/showcase/ You can try this on an iPhone and see the effect I showed in the images.
Maybe you should try to add the meta tag to run in full-screen mode :
<meta name="apple-mobile-web-app-capable" content="yes" />
Referenced at this link.
EDIT
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
Have you tried adding a padding to the body? All of the fixed header designs have this. The padding to the body is equal to the height of the bar on your site that contains the icons. You can do them inside media queries if it's only on landscape:
/* iPhone 4" screen: landscape */
#media screen and (aspect-ratio: 568/114) and (device-aspect-ratio: 320/568), screen and (aspect-ratio: 568/320) and (device-aspect-ratio: 320/568) {
body {padding-top:20px} /*your padding*/
}
You can give a try add min-height to your body.
<style>
body { min-height: 505px; }
</style>
This is the source.
With the new App Pages on a Facebook Apps Timeline is there any way to remove the 20px white border around the iframe?
Here is an example page, https://www.facebook.com/Firefox/app_219601608073693
If you make your background white then there are not really borders ;)
But in all seriousness - what you could do is use a "Wide (810px)" layout for your tab app and then create a smaller centered div element in which you can contain your entire application.
Eg:
<div style="width:520px; margin:0 auto;">
Your 520px centered content appears here!
</div>
Please don't be lazy like me :) Don't use inline styles.
Other than that I do not believe that there is a way to remove or customize any of Facebook's styling inside a timeline/page app...
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.