I created a sample script to add and remove metatags from the head. But Android 2.2 doesn't seem to respect it's removal. However it does respect the addition of the metatag on click for example.. How do I get it to respect the removal of the tag and revert to the default viewport through javascript?
<script type="text/javascript">
$(document).ready(function(){
function initMeta(){
var headID = document.getElementsByTagName("head")[0];
var metaNode = document.createElement('meta');
metaNode.name = 'viewport';
metaNode.content = 'width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0';
metaNode.id = 'metatag';
headID.appendChild(metaNode);}
function closeMeta(){
$("#metatag").remove();}
$("#add").click(function(){initMeta();alert("meta opened");});
$("#del").click(function(){closeMeta();alert("meta closed");});
});
</script>
<input name="add" type="button" value="add metatag" id="add"/>
<input name="del" type="button" value="delete metatag" id="del"/>
I note this behavior in iOS Safari too.
You are actually removing the meta tag (verifiable through DOM - Try alerting $("#metatag").length after removal)
The problem is the viewport itself does not respond to the absence of content in this tag. If you update the contents or re-add the meta tag with new contents, you should see it manifest on your screen. But by simply removing the meta tag, the UA seems to think "No change necessary" as it's not getting any explicit instructions there.
Hope that helps! Your question / example helped me realize this was even possible!
Related
I have html code that I need to render in webview to display HTML text editor styled content. The one and only option is to use webview. So, I implemented my API to send response particular <div> element and displayed it using official flutter webview. Android its displaying correctly and IOS font sized is very small(can't even read). What I am doing wrong?
Relevant code snippet:
var contentBase64 = base64Encode(const Utf8Encoder()
.convert(
"""<html>
<body style='"margin: 0; padding: 0;'>
<div>
$htmlString //my html code snippet coming from API
</div>
</body>
</html>"""));
//.....
WebView(
initialUrl: 'data:text/html;base64,$contentBase64',
// gestureRecognizers: Set()..add(Factory<VerticalDragGestureRecognizer>(()=>VerticalDragGestureRecognizer())),
),
The reason is, you only wrapped with html element. You have to specify meta tag to responsive in IOS devices. To do that you also have to add head element as below:
var contentBase64 = base64Encode(const Utf8Encoder()
.convert(
"""<!DOCTYPE html>
<html>
<head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head>
<body style='"margin: 0; padding: 0;'>
<div>
$htmlString
</div>
</body>
</html>"""));
In my opinion:
Android is smart enough to identify html code without <meta> with viewport, but IOS does not. You have to explicitly set viewport to mobile device, like you make webapp responsive to mobile devices.
It's better to wrap <!DOCTYPE html> annotation to render correctly.
This is what you need exactly to your code:
<!DOCTYPE html><html><head><meta name="viewport" content="width=device-width, initial-scale=1.0"></head><!--rest of your html-->
I have this page where i use the input type number. so that it will show the numeric keyboard on wp, android and ios device .
But my problem is that if the user use a culture info on the device for. lets say Denmark. the numeric keyboard shown use , instead of .
But the input number won't accept , only .
Anyone got a idea how this can be done?
Thanks for your time.
Try setting the lang attribute to en in the <html> element or the <input> element itself to force decimal point as input syntax. For example:
<input type="number" name="myNum" id="myNum" lang="en">
However the user's environment may even override this, in which case the only alternative would be to include a message requiring decimal point rather than comma.
This is a good write-up of locale handling for the number input type:
https://www.aeyoun.com/posts/html5-input-number-localization.html
UPDATE:
Another alternative would be to stop the form from validating the input by using the novalidate attribute in a <form> element, like so:
<form novalidate>
<input type="number" name="myNum" id="myNum">
<button id="submit">Submit</button>
</form>
This would allow anything, even non-numbers, so you'd have to set up the JavaScript code to check and handle the value.
UPDATE AGAIN:
Just thought of one more alternative — use the pattern attribute to do a regular expression check and use the plain old text input type. For example:
<input type="text" name="myNum" id="myNum" pattern="[0-9.]*">
Advantage: You get to control exactly what users can input.
Disadvantage: The keyboard on mobile devices will not be the numeric keypad.
Note that HTML input types can be spoofed so you still need to do server-side validation.
When retrieving the value with jquery it is returned with a . decimal separator. Try this:
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<input type="number" name="myNum" id="myNum">
<button id="submit">Submit</button>
<hr/>
<code></code>
<script>
$("#submit").on("click",function() {
var numericValue = $("#myNum").val();
$("code").html(numericValue);
});
</script>
</body>
</html>
http://output.jsbin.com/xixunewowe
I didn't seem to find any related answers, SL4A version is R6, Py4A is R5. It's really simple, the app calls webViewShow with a HTML page, it displays properly, the script terminates, but the page does not want to disappear. Can't reach menu, back button doesn't work, only home button, then you need to kill sl4a from app manager if script is running through adb, or kill the script if run from the on-device interpreter. I also tried with http://www.google.com, same happening. The webViewShow returns a NoneType, but still, the page is displayed.
Example:
import android
droid = android.Android()
droid.webViewShow('/sdcard/sl4a/scripts/main_view.html'
HTML:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" id="viewport"
content="width=device-width, target-densitydpi=device-dpi,
initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
/>
</head>
<body >
<h1 style="text-align:center">Supervisor</h1>
</body>
</html>
Thanks in advance!
Maybe this could help:
<script>
var droid = new Android();
</script>
<input type="button" value="Exit" onclick="droid.dismiss();" />
I also ran into this problem, and could not find a proper answer. In my case I suspect the script cannot fully 'terminate' until the WebView closes...catch-22. To work around it I added an explicit 'Quit' option to the phone's menu button before spawning the WebView:
# give us a way to escape from the webview
droid.addOptionsMenuItem('Quit','menu-quit',None,"ic_lock_power_off")
Not ideal (the user still has to hunt for the Quit option or know about it in advance), but seems to work taking down both the script and WebView, at least on my phone (SL4A r6, Android 2.3.7).
i agree with pedro. this is the only way to exit a webview from sl4a, confirmed by damon kolher, the last maintainer of the project before it was finally forked.
once you deployed a webview, there is no way to kill it besides from within itself using js.
<script> var droid = new Android(); </script>
Then attach this to an element.
onclick="droid.eventPost('kill', ''); droid.dismiss();
For me I use an eventPost call back to my main script via eventWait.
while True:
event = droid.eventWait().result
if event['name'] == 'kill':
pipe.send('kill')
pipe.close()
i find this to work exceptionally well as i am using bottle to serve up my webview as two seperate processes and needed a way to shutdown my script as soon as the webview was exited.
We're developing a jQuery Mobile application using ASP.NET 3.5, and we've run into a problem with lots of large, strangely shaped, and quite distracting tap highlights. I discovered that the inclusion of a ScriptManager in the page seemed to be the culprit, in our case. Here's a simple .aspx page that should reproduce the problem (I'm testing on Android 2.2.2 and iOs 4.2.6).
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2.Default" %>
<!DOCTYPE html>
<html lang="en-US">
<head>
<title>Title</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.6.2.min.js"> </script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager runat="server" ID="ScriptManager"></asp:ScriptManager>
<h1>Oh Hai!</h1>
</form>
</body>
</html>
With the ScriptManager, that h1 tag will produce a tap highlight each time it's touched. Lose the ScriptManager, and the tap highlight goes away. Assuming that the ScriptManager is necessary, is there anything better than doing something like:
<script type="text/javascript">
$(function () {
$('*').css('-webkit-tap-highlight-color', 'rgba(0, 0, 0, 0)');
})
</script>
Adding a css rule to our stylesheet doesn't work, because the client-side initialization of the ScriptManager seems to override it somehow.
ScriptManager is adding a click handler to the form element, so in fact webkit is intercepting clicks on the form - H1 just happens to be within it from a DOM perspective.
You could prove this by moving the <form> tag after the <H1></H1> tags, naturally that won't be practical for all your elements.
I think the approach of adding "-webkit-tap-highlight-color" is valid but perhaps you need to do this after script manager does its stuff:
$(document).ready(function(){
$('*').css('-webkit-tap-highlight-color', 'rgba(0, 0, 0, 0)');
});
You could also experiment with adding the css inline to specific form/h1 elements just to eliminate css cascading or script issues.
I developp a mobile web app with facebook javascript SDK.
I use the meta <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"/> to scale my content. But when I init my facebook app FB.init(), page width expands a lot and horizontal scroll appears.
How to fix this bug width on Android browser ? (don't appear on iOS)
We were encountering this same issue and we came up with a workaround. Note that obviously this may be outdated in future FB API modifications.
We had to load in the FB SDK asyncronously and make sure the XFBML param is set to false.
<!-- this div element is required by FB JS SDK -->
<div id="fb-root">
</div>
<script>
window.fbAsyncInit = function() {
FB.init({appId: facebookapikey, status: false, cookie: false, xfbml: false});
};
(function() {
var e = document.createElement('script'); e.async = true;
e.src = document.location.protocol +
'//connect.facebook.net/en_US/all.js';
document.getElementById('fb-root').appendChild(e);
}());
</script>
Hope that helps everyone out.