I've been trying to test my code on my iphone 4, I am running iOS6.
Everything looks fine and dandy inside of the iphone when in portrait mode, however when I switch to landscape everything is zoomed in! Any suggestions? My viewport code is below along with the css condition.
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.5, user-scalable=0" />
#media screen and (max-device-width: 480px) {
#sidebar {
width:38px;
}
.menuhide {
display:none;
}
.menushow {
display:inline;
}
#mainframe {
margin-left:38px;
}
}
Thanks again!
Maybe using this:
<meta name="viewport" content="width=device-width, initial-scale=1.0 user-scalable=0">
Related
i have included view-port meta tag in header i.e.
<meta name="view-port" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0"/>
but in iPhone screen..its allow user to zoom screen using pinch in/pinch out.
document.documentElement.addEventListener('touchstart', function (event) {
if (event.touches.length > 1) {
event.preventDefault();
}
}, false);
we are making an HTML5 app where width is not know at design time.
So we change the viewport tag at runtime to match the desidered size.
e.g.
<meta name="viewport" id="viewport-meta" content="width=' + params.mobilePortraitWidth + ', initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
The problem on iOS is that after we change the viewport size, view is not correctly scaled until we double tap the screen.
EDIT, after double tap is all fine, so: how can we "DOUBLE TAP" programmatically?
Thank you very much
NSString *js = #"var t=document.createElement('meta'); t.name="viewport"; t.content="initial-scale=1.0, maximum-scale=3.0"; document.getElementsByTagName('head')[0].appendChild(t);";
[myWebView stringByEvaluatingJavaScriptFromString:js];
EDIT
Thanks for update.
I had very similar issue and remember that setting viewport meta tag solved it.
If you are trying to modify this meta tag just after loading html, try doing that in webViewDidFinishLoad (loadRequest is asynchronous).
Another solution would be to read your html file into NSString and replace that meta tag before loading it to webView.
Hope it helps!
Thank you very much for your replies, I would like to share the solution we found after some test on iPhone 5s with iOS 9.2 and iPad Air with iOS 8.4.
Basically, to make it work, we didn't set initial-scale=1.0, maximum-scale=1.0, user-scalable=no
Following a working example
<html>
<head>
<meta name="viewport" id="viewport-meta" content="width=device-width, user-scalable=no" />
<style>
html, body { -webkit-text-size-adjust: 100%; }
h1 { padding: 1em; background-color: #FF80BB; }
</style>
</head>
<body>
<h1>I am the page content</h1>
<button id="s320">Set 320</button><br />
<button id="s640">Set 640</button><br />
<button id="s960">Set 960</button>
<script>
function setViewportWidth(newWidth) {
var m = document.getElementById("viewport-meta");
m.setAttribute('content', 'width=' + newWidth + ', user-scalable=no');
}
document.getElementById("s320").onclick = function () { return setViewportWidth(320); };
document.getElementById("s640").onclick = function () { return setViewportWidth(640); };
document.getElementById("s960").onclick = function () { return setViewportWidth(960); };
</script>
</body>
</html>
Consider the following page:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<style type="text/css">
html, body
{
padding: 0;
margin: 0;
height: 100%;
}
</style>
</head>
<body>
</body>
</html>
Load it into safari on the iPhone. The page renders at 100% height. Now turn the iPhone to landscape and drag the page upwards. The (bottom) button bar appears and now we're scrolling the page up and down by the amount that the button bar offsets the content. No longer is the page height 100%, and content that should be visible is underneath the button bar, and a vertical scrollbar is evident.
Is it possible to eliminate this annoyance and get true 100% height?
Use this script to add a class to html if it is an iPhone:
if((navigator.userAgent.match(/iPhone/i))) {
$('html').addClass('iphone');
}
Then try making its position as fixed, but only for when the orientation is in landscape, like so:
#media (orientation:landscape) {
html.iphone > body {
position: fixed;
bottom: 0;
width:100%;
height: 480px !important; /* pretty sure its 480px? */
}
}
Finally solved this by a meta directive in the head section that makes the appearance of the bottom button bar considerably less aggressive. Notice the last part (minimal-ui)
<meta name="viewport"
content="width=device-width, initial-scale=1.0, user-scalable=no, minimal-ui">
My problem is for my webpage designed for iOS. When testing on iPhone 5 (Safari) it loads fine in portrait mode then flips fine to landscape mode. But when going back to Portrait from Landscape it zooms in. I don't have this issue with iOS Chrome thought.
I've tried lots of different meta tags like :
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" >
But they seem to only cover the opposite issue of going from portrait to landscape zooming.
Some help would be greatly appreciated. I've spend many hours searching without success.
Here's a link if you wish to try it on a mobile device: http://www.blueberry-studio.co.uk/Robomoco_Websites/Device_iPhone_5/
and here's the code used:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge" />
<meta name="viewport" content="user-scalable=no, width=1280" />
<meta name="apple-mobile-web-app-capable" content="yes"/>
<style type="text/css">
#media screen and (orientation:portrait)
{
#robomocomobileportrait_hype_container {
display: block;
}
#robomocomobilelandscape_hype_container{
display: none;
}
}
#media screen and (orientation:landscape)
{
#robomocomobileportrait_hype_container {
display: none;
}
#robomocomobilelandscape_hype_container {
display: block;
}
}
</style>
<div id="robomocomobileportrait_hype_container" style="position:relative;overflow:hidden;width:1280px;height:2260px;">
<script type="text/javascript" charset="utf-8" src="Robomoco_mobile_portrait.hyperesources/robomocomobileportrait_hype_generated_script.js?71837"></script>
</div>
<div id="robomocomobilelandscape_hype_container" style="position:relative;overflow:hidden;width:1280px;height:720px;">
<script type="text/javascript" charset="utf-8" src="Robomoco_mobile_landscape.hyperesources/robomocomobilelandscape_hype_generated_script.js?17049"></script>
</div>
I've found a way that resolves my problem:
var alsoenlarge = true;
$(function(){
if(isScalePossible()){
$('body').css({overflow:'hidden'}); //geen scrollbars
$('#scalecontainer').css({position: 'absolute', margin: 0}); //centreren met de hand na resize
// Run scale function on start
scaleSite();
scaleSite();
// run scale function on browser resize
$(window).resize(scaleSite);
}
});
function scaleSite()
{
windoww = $(window).width();
sitew = $('#scalecontainer').width();
f = windoww/sitew;
if(!alsoenlarge && f>1) f = 1;
$('#scalecontainer').css({
"-moz-transform" : "scale("+f+")",
"-webkit-transform" : "scale("+f+")",
"-ms-transform" : "scale("+f+")",
"-o-transform" : "scale("+f+")",
"transform" : "scale("+f+")",
"left" : ((windoww-(sitew*f))/2)+"px"
});
}
function isScalePossible()
{
can = 'MozTransform' in document.body.style;
if(!can) can = 'webkitTransform' in document.body.style;
if(!can) can = 'msTransform' in document.body.style;
if(!can) can = 'OTransform' in document.body.style;
if(!can) can = 'transform' in document.body.style;
if(!can) can = 'Transform' in document.body.style;
return can;
}
And my content in this div:
<div id="scalecontainer"> </div>
On my jQuery Mobile project I'm using the following code:
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
I'm getting the Safari browser address bar and nav footer. How can I hide those so I can just have my app showing?
You can setup a few meta tags to tell iOS that your site can be added to the Home Screen as a web app. Once launched from there, all of the Safari elements are hidden.
Check out the section titled "Hiding Safari User Interface Components" here.
You can specify start up splash screen images and custom icons for the app as it appears on the home screen.
<meta name="viewport" content="width=device-width, minimum-scale=1, maximum-scale=1">
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
<link rel="apple-touch-icon" href="apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon" sizes="72x72" href="apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon" sizes="114x114" href="apple-touch-icon-114x114.png" />
<link rel="apple-touch-startup-image" href="apple-touch-startup-image-320x460.png" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="apple-touch-startup-image-768x1004.png" />
You should not need a <meta> tag. jQuery mobile should take care of hiding the address bar on iOS. Never been able to get the nav footer disappear myself.
Rob,
try adding below script. This should do the trick of opening new request in the same window
<script type="text/javascript">
window.onload = function () {
var a = document.getElementsByTagName("a");
for (var i = 0; i < a.length; i++) {
if (a[i].className.match("noeffect")) {
// Does nothing
}
else {
a[i].onclick = function () {
window.location = this.getAttribute("href");
return false;
};
}
}
};
</script>