Is there a way to set white background on PWA status bar in dark theme?
In index.html I put meta tag:
<meta name="theme-color" content="#FFFFFF" />
<meta name="apple-mobile-web-app-status-bar-style" content="default">
The default value would work in light mode however is black in iOS dark mode.
Inside manifest.json I did this:
"theme_color": "#ffffff",
"background_color": "#ffffff"
Thank you!
You need to use this line in html <meta name="apple-mobile-web-app-status-bar-style" content="white">
apple-mobile-web-app-status-bar-style "white" is not a valid value for this
Related
I have used react-native-webview for rendering HTML text. But text is too small in iOS while in android it is perfect.
Here are lines of code :
import { WebView } from "react-native-webview";
render() {
<WebView
originWhitelist={['*']}
source={{ html: '<p>This is a static HTML source!</p>' }}
/>
}
Attaching screenshot :
Using the viewport meta tag to control layout on mobile browsers
<meta name="viewport" content="width=device-width, initial-scale=1">
<WebView
originWhitelist={['*']}
source={{ html: '<html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><body><p>This is a static HTML source!</p></body></html>' }}
/>
link :https://github.com/react-native-community/react-native-webview/issues/386
Additionally to the <meta> you can add <style> tag into the <head> section to scale the font:
<style>
body { font-size: 120%; word-wrap: break-word; overflow-wrap: break-word; }
</style>
Here there is an example of my problem:
http://asdcastelli.altervista.org/test-bootstrap/
In the head i have
<meta name="viewport" content="width=device-width, initial-scale=1.0">
but the responsive works only if i resize the window browser, not in mobile
Why?
This is the page in the resized windows browser
This is the page in the mobile view (chrome inspector)
You have to include table into a div.
<div class="responsive_table">
<table id="pubblicazioni_table">
/*your content*/
</table>
</div>
and on your css, you have to paste this line:
.responsive_table { overflow-x: scroll; width: 100%; }
I have an HTML5 page, and it looks like this:
<html>
<head></head>
<body>
<canvas id="c1" width="500" height="500" />
</body>
</html>
I used Bootstrap 3 and Fabric.js as a canvas library. When I run it on mobile device, I have got an issue that when I touch the object on canvas and move it, the page is moved too. Seems the touch event is also handled by mobile device browser.
What I expect is that to stop the default event handle for mobile device browser, so when I touch the object in canvas and move it, the web page will not move as well. How can I make this with Fabric.js?
I have changed the way while I making the html:
<meta name="viewport" content="width=device-width, initial-scale=0.5, user-scalable=no">
And then, to prevent browser default zoom bouncing, we can bind "touchmove" in document and disable it. That's from jQuery mobile, but vmousemove = touchmove for mobile device somehow.
$(document).on("vmousemove", "body", function(e) {
e.stopPropagation();
e.preventDefault();
return false;
});
This is not about Fabric.js anyway, so I don't have to change Fabric.js or else.
I'm having trouble figuring out why the viewport line from html5bp is causing a problem with colorbox. The problem arises when I view with my iPhone 4. The YouTube video in the popup modal is too big for the screen. On the desktop everything is fine.
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
If I don't use this line, my colorbox modal works great. However my page is not scaled well for mobile.
If I include this line, my colorbox modal is too big for the screen.
Here are example links showing both behaviors:
http://ivantown.com/cbtest/good.html
http://ivantown.com/cbtest/bad.html
Here is the code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width; initial-scale=1.0;">
<title>colorbox youtube</title>
<link rel="stylesheet" type="text/css" href="colorbox.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="jquery.colorbox-min.js"></script>
<script>
$(document).ready(function(){
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:464});
});
</script>
</head>
<body>
<h2>colorbox youtube</h2>
<a class="youtube" href="https://www.youtube.com/embed/C0DPdy98e4c?autoplay=1">Link1</a>
</body>
</html>
Thanks for any help. Long time benefactor from the community here but first question.
Your problem lies here
$(document).ready(function(){
$(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:464});
});
If you pay attention to your code you are specifying the innerWith of the colorbox to 640px. (innerWidth:640, innerHeight:464) iPhone portrait width is 320px. That's why it is running over.
So you have two options: you can set the width and height as a percentage, or using javascript detect if the user is on a desktop or mobile device and set your width and height accordingly.
I just started using Sencha Touch and download its Free Commercial Version. I was trying the following sample in Visual studio, but I got the Sencha Touch app appears blank in browser. I tried in Safari (Version 5.1.7) and also in Chrome(Version 23). [Also I could able to see the example provided with the downloaded Sencha framework in safari, but not in Chrome).
The same application I tried in Android using the IDE eclipse. But there also the android emulator shows nothing.
Please help me to find out the issue.
Code:-
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title></title>
<meta name="description" content="" />
<meta name="keywords" content="" />
<meta name="author" content="" />
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
<!-- !CSS -->
<link href="/content/css/sencha-touch.css" rel="stylesheet" type="text/css" />
<!-- !JS -->
<script src="/content/js/sencha-touch.js" type="text/javascript"></script>
<script type="text/javascript">
Ext.setup({
onReady: function () {
// create the root panel
new Ext.Panel({
fullscreen: true,
html: "Sencha Touch is ready!"
});
}
});
</script>
</head>
<body>
</body>
</html>
Thanks.
I think you should look at the getting started documentation here.
You are going to be using Visual Studio as a text editor, which is great but the Architect product might help you get going faster, i think there is a free version.
If you are still having issues the error in the "console" of the browser will help with other errors you might be having.
Have you tried setting the index.html file as the Startup page?
On VS solution explorer, right-click the index.html file, then select Set As Start Page.
If you are using visual studio then u r obviously using IIS server on Windows.
To get this working just add a new MIME type "JSON" with extension .json to your we server. IIS by default does not handle json mime type.
Good luck.
It's better to use (when debug) Google Chrome and won't work in IE or Firefox.
If you launch in Google Chrome then you'll see the results.