I know that the safari web header uses the following code to set it's color.
<meta id="flutterweb-theme" name="theme-color" content="#2196f3">
(results pictured below)
however, I can't find anywhere to specify what this color is in the flutter docs or anywhere else. Is there somewhere that shows where I can manually set this without a hacky regex on posting to live?
Related
I have this page with a TinyMCE 5.10.4 Editor if I load the page at full desktop size, and then switch it to mobile sized, the text box appears as normal, I believe this is because while the screen is sized to a mobile device, TinyMCE recognizes it as a desktop screen.
However, if I load the page in mobile sizing it gives me a graybox that links to an external editor, and gives me this gross empty text area that has my background image behind it.
How do I get TinyMCE to always load desktop mode?
I'm not sure if this is what you are looking for, but have you tried overriding the mobile settings to match your existing settings when initializing TinyMCE? This would ensure that even if TinyMCE loaded in mobile mode, it would still look like desktop mode. Something like this:
tinymce.init({
selector: 'myTextArea',
mobile: {
menubar: true,
toolbar_mode: "wrap"
}
});
The docs also specify that you should include the following <meta> tag in your HTML document's <head> to ensure it can detect the correct mode to use.
<meta name="viewport" content="width=device-width, initial-scale=1">
Here is the reference in the TinyMCE v5 doc where I found this info:
https://www.tiny.cloud/docs/mobile/#configuringmobile
So I have an application that allows users to toggle between light and dark mode. I would like to set the background_color accordingly when users toggle the theme mode.
For theme_color, I can dynamically set the meta tag and put a placeholder value in the manifest.json. But as far as I know, there isn't a meta data for background_color
There are discussions on the standard of how to support light and dark modes.
About IOS part. It's hard code in index.html, So can't changed dynamic.
first line define app-icon img path
<meta name="msapplication-TileImage" content="<path of Icon>">
<meta name="msapplication-TileColor" content="#000000">
second line define the background-color of app-icon
When you save a website to your iphone home screen, it pick's the site title as the name to save as, is it possible to force as a specific name regardless of which page they bookmark it on a domain?
On iOS 6 and later you can override the name by using this meta tag:
<meta name="apple-mobile-web-app-title" content="App Title" />
Unfortunately though, it doesn't get around the problem (bug?) that you can easily fit more characters in most shortcut names than Safari naturally truncates to, but at least it means you can choose a shorter name for your app, and it doesn't require any JavaScript.
If I have you right, when you're in Safari and you press Add to Home Screen, you are given an opportunity to changed the name of the home screen icon. After you've edited the name, press Add and you're set.
On the iPhone I'm using a UIWebView to display some content that is stored on the device so my content can be viewed on the device when there is no internet connection. I'm using the jQuery and mobile stuff in an attempt to create web apps and mobile apps that use one code base.
When I include:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
everything works fine, the sprites that make up the back button, home icon etc. all work fine. When I include the above as a local resource such as:
<link rel="stylesheet" href="jquery.mobile-1.0a4.1.min.css" />
The sprites do not display, I just get a dark circle where the sprite should appear. All the other attributes defined in the css work fine, just not the sprites. If I misname the local resource, everything is messed up, so I know the css as a local resource is being included, but it is being handled differently as a local resource vs a remote resource. It even works if I hit the local dev box running apache... so it must have something to do with how the web server is serving the page vs. including it as a file......
I played around with loading the same page twice with separate UIWebViews in an attempt to see if there is some timing issue... since a local resource would load much quicker than a remote resource. The second instance of the UIWebView loaded it correctly. Is there a $.mobile command I can call to refresh the page, or for the library to do it's magic?
any ideas?
thanks for any help
Question was answered in the jQuery forum. Funny, the answer was related to my comments above, and I still didn't think to look at the image files! palm2forehead
had to go in the jquery mobile css file and remove the references to the "images" directory. IOS doesn't handle directories like normal systems so once I did that all was ok.
It did not solve my issue chaning the path.
I had to look up in the mobile.css, i found that the icon were first set with an image, an then moved with classes, i had to set the the full background property on the classes that moved the background image.
Like so:
.ui-icon-plus {
background:#9c9c9c url(icons-18-white.png) no-repeat 0 50%; }
Old way were:
.ui-icon-plus {
background-position:-0 50%;}
Put everything (js,css) to www folder along with index.html file, and include file like this <script src="jquery-mobile-min.js">`, it has solved my problem.
OK, I'm having some issues with my site's mobile stylesheet on the iphone. I reworked the stylesheet to be similar to what http://m.facebook.com give the browser, only I'm getting an issue where the Safari on iPhone browser is still zooming the page out from like 960px, instead of constraining it to the native screen resolution. What gives?
Do you think it has to do with my .container960 class on the body element? I tried reseting those styles with the mobile stylesheet, but maybe it's not reseting the container styles properly.
The site is http://beta.cureinternational.org. You'll need to use username Guest and password guest to view the page.
Have you tried adding a meta-tag like this?
<meta name = "viewport" content = "width = device-width">
Or hard-coding in the dimensions yourself (see Viewport in https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariHTMLRef/Articles/MetaTags.html)