d.bernaert Posted October 10, 2020 Share Posted October 10, 2020 Hi, On this page (https://medium.com/appscope/designing-native-like-progressive-web-apps-for-ios-1b3cdda1d0e8) is stated that with this meta tag you can specify the color to be used by IOS for the header of a web application. <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> It then uses the background color of the body element. How can I set a background-color of the body element? Thx, Doominique Quote Link to comment Share on other sites More sharing options...
Sherzod Posted October 10, 2020 Share Posted October 10, 2020 Hi Dominique, This post may help you: Quote Link to comment Share on other sites More sharing options...
d.bernaert Posted October 10, 2020 Author Share Posted October 10, 2020 Thx Sherzod, Thx, but that does not seem to work on Safari. Safari needs this in the custom meta <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> And it will apparently take over the background-color of the body of the application then. So I would need to put the background-color of the body of the main form I think. Dominique Quote Link to comment Share on other sites More sharing options...
alfr Posted October 10, 2020 Share Posted October 10, 2020 Hi, You need to add them in the servermodule - as "CustomMeta" For it to work you then as well need to add the url/web app on the home screen - and start the webapp from the homescreen Alf Quote Link to comment Share on other sites More sharing options...
d.bernaert Posted October 10, 2020 Author Share Posted October 10, 2020 Hi, I've added the following meta to the servermodule: <meta name = "theme-color" content = "#1B3766"> <!-- icons --> <link rel="apple-touch-icon" href="touch-icon-iphone.png"> <link rel="apple-touch-icon" sizes="20x20" href="files/images/ios/AppIcon.1.0/Icon-20x20@1x.png"> <link rel="apple-touch-icon" sizes="40x40" href="files/images/ios/AppIcon.1.0/Icon-20x20@2x.png"> <link rel="apple-touch-icon" sizes="60x60" href="files/images/ios/AppIcon.1.0/Icon-20x20@3x.png"> <link rel="apple-touch-icon" sizes="29x29" href="files/images/ios/AppIcon.1.0/Icon-29x29@1x.png"> <link rel="apple-touch-icon" sizes="58x58" href="files/images/ios/AppIcon.1.0/Icon-29x29@2x.png"> <link rel="apple-touch-icon" sizes="87x87" href="files/images/ios/AppIcon.1.0/Icon-29x29@3x.png"> <link rel="apple-touch-icon" sizes="80x80" href="files/images/ios/AppIcon.1.0/Icon-40x40@2x.png"> <link rel="apple-touch-icon" sizes="120x120" href="files/images/ios/AppIcon.1.0/Icon-40x40@3x.png"> <link rel="apple-touch-icon" sizes="120x120" href="files/images/ios/AppIcon.1.0/Icon-60x60@2x.png"> <link rel="apple-touch-icon" sizes="180x180" href="files/images/ios/AppIcon.1.0/Icon-60x60@3x.png"> <link rel="apple-touch-icon" sizes="76x76" href="files/images/ios/AppIcon.1.0/Icon-76x76@1x.png"> <link rel="apple-touch-icon" sizes="152x152" href="files/images/ios/AppIcon.1.0/Icon-76x76@2x.png"> <link rel="apple-touch-icon" sizes="334x334" href="files/images/ios/AppIcon.1.0/Icon-83.5@2x.png"> <!-- fullscreen webapp --> <meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-title" content="Roelants"> <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent"> <link rel="apple-touch-startup-image" href="files/images/ios/AppIcon.1.0/launchimage.png"> <link rel="apple-touch-startup-image" sizes="640x960" href="files/images/ios/AppIcon.1.0/LaunchImage_640x960.png"> <link rel="apple-touch-startup-image" sizes="320x480" href="files/images/ios/AppIcon.1.0/LaunchImage_320x480.png"> <link rel="apple-touch-startup-image" sizes="640x1136" href="files/images/ios/AppIcon.1.0/LaunchImage_640x1136.png"> <link rel="apple-touch-startup-image" sizes="1334x750" href="files/images/ios/AppIcon.1.0/LaunchImage_1334x750.png"> <link rel="apple-touch-startup-image" sizes="750x1334" href="files/images/ios/AppIcon.1.0/LaunchImage_750x1334.png"> <link rel="apple-touch-startup-image" sizes="828x1792" href="files/images/ios/AppIcon.1.0/LaunchImage_828x1792.png"> <link rel="apple-touch-startup-image" sizes="1125x2436" href="files/images/ios/AppIcon.1.0/LaunchImage_1125x2436.png"> <link rel="apple-touch-startup-image" sizes="2208x1242" href="files/images/ios/AppIcon.1.0/LaunchImage_2208x1242.png"> <link rel="apple-touch-startup-image" sizes="1242x2208" href="files/images/ios/AppIcon.1.0/LaunchImage_1242x2208.png"> <link rel="apple-touch-startup-image" sizes="1242x2688" href="files/images/ios/AppIcon.1.0/LaunchImage_1242x2688.png"> <link rel="apple-touch-startup-image" sizes="1792x828" href="files/images/ios/AppIcon.1.0/LaunchImage_1792x828.png"> <link rel="apple-touch-startup-image" sizes="2436x1125" href="files/images/ios/AppIcon.1.0/LaunchImage_2436x1125.png"> <link rel="apple-touch-startup-image" sizes="2688x1242" href="files/images/ios/AppIcon.1.0/LaunchImage_2688x1242.png"> I've added the shortcut to the home screen again and I still get the following result. Quote Link to comment Share on other sites More sharing options...
alfr Posted October 10, 2020 Share Posted October 10, 2020 Not sure I exactly understand what you say is your problem. You wrote Safari. But the header is very white and doesn't look like Safari? Also there is perhaps also a mixup between the theme-color and apple-mobile-web-app-status-bar-style? (Also your end comment characters look a bit different, but perhaps only in the post? "-->" instead of-- >?) To my understanding the theme-color is not supported by Safari but by Chrome on Android. Safari On Safari/iPhone, you can make the status bar more be a part of the WebApp by the following meta setting - as I wrote earlier in my first post. So if your problem is Safari - that your status bar is not the correct color, (if it's white and not blue), also take a look at the color settings in the server module - change the properties BgColor and BgColorlogin to your color/ clblue / $1B3766. (And when active - do a new link on the homepage to the app). (I assume you have the correct back color on your forms/pages...) Quote Link to comment Share on other sites More sharing options...
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.