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>
Related
In some html editors when you create a new html file, some default codes as below created automatically:
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8"/>
</head>
<body>
</body>
</html>
how can I enable this feature in VSCode editor?
Thanks.
Press shift and 1 (!) It will show two options select the first one or type html:5 and enter the option it will give you default boilerplate for html
Just give the ! sign and then press Tab.
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
This is my first time building a responsive site, and as I tailor the CSS for the iPhone I'm running into a problem. The styles all apply correctly, the text changes size and the wrapper changes widths. The problem is the iPhone browser still opens up at a huge width, see the screenshot:
I'm using
#media all and (max-device-width: 480px) {}
to set the specific iPhone css. body {width:;} doesn't work.
Thanks for the help :)
You have to add the following to your page header
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
As in:
<!doctype html>
<html>
<head>
<title></title>
<meta name="viewport" content="initial-scale=1.0, width=device-width" />
</head>
<body>
</body>
</html>
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