Hi I have a problem with iPhone web app. The problem is that the website is moves under the statusbar when I add the app to to the home screen.
So for example my header block is not fully shown.
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no" />
Here is the image showing the problem.
Try to change:
<meta name="apple-mobile-web-app-status-bar-style" content="default" />
into:
<meta name="apple-mobile-web-app-status-bar-style" content="black" />
I had the same problem where this was set to black-translucent and setting it to black removed the problem.
Related
I'm having a problem where the image that is pulled through to the user's wall after they click the like button is cropped. See link for image:
http://imageshack.us/photo/my-images/36/fblikeimage.jpg/
Here is my iFrame code:
<iframe src="//www.facebook.com/plugins/like.php?href=https%3A%2F%2Fmysite.org&send=false&layout=box_count&width=450&show_faces=false&action=recommend&colorscheme=light&font&height=90&appId=1234"
width="320" height="60"></iframe>
Here are my OG tags:
<meta content="123456879" property="fb:app_id">
<meta content="sch_donations:donate" property="og:type">
<meta content="https://mysite.org/?utm_source=internal&utm_medium=social&utm_content=recommend-on-facebook&utm_campaign=WTH-FB" property="og:url">
<meta content="Title text" property="og:title">
<meta content="Description text" property="og:description">
<meta content="https://mysite.org/image.jpg" property="og:image">
<meta content="https://mysite.org/?utm_source=internal&utm_medium=social&utm_content=recommend-on-facebook&utm_campaign=WTH-FB" property="sch_donations:link">
I wondered if anyone else has come across this problem? Can you see anything in my code that might cause this?
I think the image is the problem... What are its original dimensions? Fb tends to crop it like that if an image doesn't have its height and width equal...
Following is head section:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
<meta name="apple-touch-fullscreen" content="yes" />
<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="/custom_icon.png"/>
<link rel="apple-touch-startup-image" href="/startup.png">
<script src="http://www.google.com/jsapi"></script>
<script>
window.top.scrollTo(0, 1);
alert('ok');
google.load("jquery", "1.4.1");
google.load("jqueryui", "1.8.0");
</script>
</head>
using iOS 4.2.1
Above is not working for me. Browser Address bar and bottom toolbar are still there. I have tried some tutorials but I am unable to change anything. Any idea?
For iOS 7.1, you can set this in your header to minimize the UI:
<meta name="viewport" content="width=device-width, minimal-ui">
It was introduced in iOS 7.1 beta 2. This site was instrumental in helping me understand how minimal-ui works: http://www.mobilexweb.com/blog/ios-7-1-safari-minimal-ui-bugs
You cannot programmatically hide the toolbar in Mobile Safari.
Your users need to add your web app to their home screens in order for the bars to be hidden when they next launch your app by tapping its icon. This is done by tapping the middle button in the toolbar, then choosing Add to Home Screen. You may need to display a message informing your users to do this.
Working good with iPad but not iPhone
Any code can I direction to iPad and iPhone
for iPad
<meta name="viewport" content="width=1040px, minimum-scale=0.5, maximum-scale=1.0" />
for iPhone
<meta name="viewport" content="width=440px, minimum-scale=0.5, maximum-scale=1.0" />
iPhone max-width is 480px not 440px
<meta name = "viewport" content = "user-scalable=no, width=device-width"/>
<meta name="apple-mobile-web-app-capable" content="yes"/>
This sets the viewpoint with the scaleable option off
<link media="only screen and (device-width: 768px)" rel="stylesheet" href="css/ipad.css" type="text/css" title="no title"/>
This is a css file for only iPad
<link media="only screen and (max-device-width: 480px)" rel="stylesheet" href="css/small-device.css" type="text/css" title="no title"/>
This is a css file for only iPhone
They are conditional comments so they will only apply to specific devices with specified max-widths.
how can I get my fixed width site to always appear "fully zoomed in" on webkit (iphone and android) browsers?
right now, it looks fine on an iPhone and "too small/zoomed out" on an Android phones that have higher resolution.
i'm trying this viewport:
<meta name="viewport" content="user-scalable=yes, width=device-width, target-densityDpi=device-dpi, initial-scale=1.0" />
The following worked for me. The page gets scaled down for medium and low density devices. Android 2.2 has some issues with handling meta tags.
<meta name="viewport" content="width=device-width, target-densitydpi=high-dpi" />
Try changing the "initial-scale=x.x" number until it looks right:
<meta name="viewport" content="user-scalable=yes, target-densityDpi=device-dpi, initial-scale=1.6" />
The following code does not fit onto the iphone screen;
how do I have to define the viewport?
<html>
<body>
<center>
<div id="karteu" style="background: url('../customer/Karten/karte1.jpg') no-repeat left center;width:714px;height:540px;" >
</div>
</body>
</html>
Normally the site should be zoomed, so i first should see the website in small, and then be able to zoom that i see it in the original size, but in my case it does not, when i call the site, the zoom is, that the image has this original size already, and that i have to scroll, but i dont want to scroll,...i want to use the normal safari mobile zoom and then scroll
The solution at the bottom does not zoom anything.
I want to see the overview of the image at the beginning.
Then i want to be able to zoom with the normal safari zoom functions,..
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
<meta name="apple-mobile-web-app-capable" content="yes" />
use the following meta tag:
<meta name="viewport" content="width=*your site width*, initial-scale=0.30">
works for both tablet and mobile