when I load my Wix website using webview_flutter it doesn't take fullscreen, but it works using flutter_webview_plugin, and I figured that the problem is that webview_flutter doesn't set wide viewport natively webView.getSettings().setUseWideViewPort(true);
so how can i make it use this wide viewport?
If you control the html yourself that is loaded (or it's just some embed code), try adding the viewport meta tag in the head; for example:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"/>
</head>
<body>
<script async="" src="https://url-to-the-embed-code-you-are-using"></script>
</body>
</html>
so after 24 hours of debugging i was able to acheive the desired effect by forking the package and modifying the native code myself.
the modification was on the file WebViewBuilder.java and simply adding the line webStettings.setUseWideViewPort(true); to activate the wideviewport
Related
I'm using bootstrap to make a web site. On the browse everything is ok, but on the mobile(Iphone 5c) the carousel grows and shrinks. I tryed to fix the size of the carousel on many sizes like 320px, 480px, etc and add .img-responsive class.
Did you set <meta name="viewport" content="width=device-width, initial-scale=1"> inside of the <head> tag in your html?
You need to do the pevious to ensure proper zooming on mobile devices.
Source
I am trying to word wrap my html string when zoomed. I have set scalePagesToFit=YES and added a meta tag with device-width. But still i have to pan to see the hidden content. Please help me. Thank you.
Here is the HTML code for iOS 5.1
<html>
<head>
<meta name='viewport'
content='initial-scale=3.0,
minimum-scale=3.0,
maximum-scale=3.0,
user-scalable=no'>
</head>
<body>Stack Overflow<br>iOS 5.1</body>
</html>
I am adapting a fixed size website (800x600 pixels) to work on mobile phones and I have run in to some problems on the iPhone.
I have set the meta viewport tag with width=800 to fit the page exactly on the screen.
Unfortunately on the iPhone it centers the page on the height giving it an unwanted top-margin. It works fine on Android.
How can I get it to align to the top on iPhone?
Here is a simplified version of the page
<html>
<header>
<meta name="viewport" content="width=800">
</header>
<body>
<div style="width:800px; height: 600px;">
</div>
</body>
</html>
Try this , and it should rescale automatically
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Hi Im developing a sencha-touch-2 app which will be embedded on iPhone UIWebview. The UIWebview size is 280x420 which is centered on the iPhone screen. Everything works perfect on sencha development but when I try to build the sencha into production, the size of the sencha page streched or not fit to the size of the UIWebview. Please see code below
SENCHA
Adding meta tag to the body of index.html
<body>
<meta name="viewport" content="width=device-width; initial-scale=1; maximum-scale=1;">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-touch-fullscreen" content="yes">
<div id="appLoadingIndicator">
<div></div>
<div></div>
<div></div>
</div>
</body>
This code works on development but when change to production the page change. What should I do to make it on the production build, since production is very fast on loading.
Try this, just add this script in your html body tag.
<script type="text/javascript">
setTimeout(function(){
var meta = document.createElement('meta');
meta.setAttribute("name","viewport");
meta.setAttribute("content","width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;");
(document.getElementsByTagName("head")[0] || document.documentElement).appendChild(meta);
},1000);
</script>
Sencha touch 2.0 will overwrite your script with it's built in meta tag. So, what happen is your meta tag will be loaded but will be replaced by it's own meta tag.
Old trick with window.scrollTo(0,1); doesn't work. And even worse, the address bar moves only a bit and gets stuck halfway out sometimes.
It is a combination of many things as I have found when researching this issue for myself.
Here's the code that properly works on iOS5:
(I know I'm a little late, but an answer is an answer, hopefully it can help people in the future)
<!DOCTYPE html>
<html>
<head>
<title>Hide Address Bar</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
window.addEventListener("load",function() {
setTimeout(function(){
window.scrollTo(0, 0);
}, 0);
});
</script>
<style>
body { min-height: 480px; }
</style>
</head>
<body>
<h1>Content</h1>
</body>
</html>
Source: http://24ways.org/2011/raising-the-bar-on-mobile
Example: http://jsbin.com/isenax/
i guess the code should still work..
anyways here is the correct way to tell mobile safari that you want the full screen:
click me
e.g. use
<meta name="apple-mobile-web-app-capable" content="yes" />
EDIT
Apple uses a new mobile-ui property to display a minimal UI in safari:
A property, minimal-ui, has been added for the viewport meta tag key that allows minimizing the top and bottom bars on the iPhone as the page loads. While on a page using minimal-ui, tapping the top bar brings the bars back. Tapping back in the content dismisses them again.
use it like this:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, maximum-scale=1.0, minimal-ui" />
source: https://www.perpetual-beta.org/weblog/ios-7-dot-1-mobile-safari-minimal-ui.html
Since IOS7 the window.scrollTo trick doesn't work anymore. There is no work around for the moment except to invite the user to add your website to Home Screen.
http://www.mobilexweb.com/blog/safari-ios7-html5-problems-apis-review
Is it possible to hide the address bar in iOS 7 Safari?
Impossible to hide navigation bars in Safari iOS 7 for iPhone/iPod touch
On iOS 7 you can use the minimal-ui meta tag. Unfortunately, that was removed in iOS 8.
For iOS 8 there's a project called brim that is supposed to bring back the minimal-ui type functionality. It can be found here: https://github.com/gajus/brim