I made a web application (ASP.NET Webforms) recently to be used as an IPhone hosted application.
I adjusted the body dimensions to : 768 width x 854 height, which is very commensurate to IPhone screen view, but bigger.
I've included the following in the header section:
<meta name="viewport" content="width=device-width, initial-scale=1.0,user-scalable=1.5;"/>
<link rel="apple-touch-icon" href="../logo.png" />
<meta http-equiv="Content-Type" content="application/vnd.wap.xhtml+xml; charset=utf-8" />
<meta name="HandheldFriendly" content="true" />
<meta name="apple-mobile-web-app-capable" content="yes" />
The thing is when you open this hosted application on IPhone, you have to zoom out in order to fit the web screen to the Iphone screen.
The question is: How may I get this automatically adjusted / scaled / zoomed out to the IPhone original dimensions?
Related
I'm developing a responsive theme and the issue is all of the pixels are doubled on the iPhone.
I believe this is due to a retina display.
My question is do I have to create an another style sheet ( or using media queries) by giving special values for retina only displays (dividing actual pixel size by pixel density)?
All of the margins are doubled
Border thickness is doubled
Font size is doubled
Currently I have all the margins, borders ..etc. in pixels.
For now, I'm using following java-script to control initial scale and it's working fine.
(function() {
var meta = document.createElement("meta");
meta.setAttribute('name','viewport');
var content = 'initial-scale=';
content += 1 / window.devicePixelRatio;
content += ',user-scalable=no';
meta.setAttribute('content', content);
document.getElementsByTagName('head')[0].appendChild(meta);
})();
Can some one please tell me a solution for this?
Edit:
I'm using <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1, user-scalable=no" /> too.
<meta name="viewport" content="width=device-width,initial-scale=1.0"> is what you are looking for, combine this with media queries.
I want my site's width to automatically fit on the iPhone portrait screen (testing on an iPhone 5). I currently have the width CSS set to 100% and am using this meta viewport tag:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; minimum-scale=1.0; user-scalable=0;" />
This technique was recommended by this question: Website does not automatically fit to iphone screen
It doesn't work for me though. The site width is still way wider than the iPhone portrait screen.
How can I get the site width to automatically fit on the iPhone portrait screen?
Make sure the viewport is configured correctly:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Make sure you don't have content that is wider than the viewport.
For instance if you have an image that is wider than the viewport set the CSS to
max-width:100%;
I think you may just be off a little. This is what works for me.
<meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1.0,maximum-scale=1.0" />
I am developing a jquery mobile app and I'm trying to load a splash screen and for the life of me can't work out why its not loading.
Here is my code
<meta name="viewport" content="width=device-width, target-densitydpi=160dpi, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="apple-touch-icon" href="http://maps.mappingsa.com.au:81/DestinationRiverland/images/icon.png">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="apple-touch-startup-image" href="http://maps.mappingsa.com.au:81/DestinationRiverland/images/splash.png">
<title>Dest River</title>
I can link to the images no worries and the touch icon works fine.
Any suggestions?
you just need to have a png file according to the pixel size of you iPhone or iPad and give the name of the File
Default.png it works
Another way other than Default.png is by simply dragging and dropping the PNG files to the following boxes under your target settings. Note that the must be the correct size, 1024x768 for landscape and 768x1024 for portrait.
I am testing a mobile site with 2 iPhones. When I rotate 1 into landscape mode, the text resizes (desired). When I rotate the other into landscape mode, the text does not resize (not desired)
I have tried using the -webkit-text-size-adjust style, but the same behavior occurs
html, body, p, div, h1, h2, h3, h4, h5, h6 {
-webkit-text-size-adjust:none;
}
My head tag
<head>
<meta charset="utf-8">
<title>Site</title>
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320"/>
<meta name="viewport" content="width=device-width, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
Is there some setting that can be changed to always resize text? Should I revisit my meta info for mobile?
Edit:
iPhone1 = iPhone 4 Verizon running iOS 4.2.6
iPhone2 = iPhone 4 AT&T running iOS 4.3.5
Thanks
device-width always refers to width in portrait mode, so width=device-width will scale the viewport in landscape mode. This is a quirk of the iPhone (and I think iPad too). Seems a bit dumb, but this is how apple have done it.
So just use:
<meta name="viewport" content="maximum-scale=1.0, minimum-scale=1.0">
Or better this, which will still allow the user to scale if they want to:
<meta name="viewport" content="initial-scale=1.0">
I am displaying some content in a UIWebView on both an iPhone and an iPad (same content, two different apps). On the iPhone, the content fills the entire 320px in width, but on the iPad, it does not - it seems to only be about 240px across.
I don't have control of the content, but I did find this in the source:
<meta name="viewport" content="width = 320" /><meta name="viewport" content="initial-scale=1, user-scalable=no" /></head>
Can anyone suggest why this wouldn't be working on an iPad app, and if there's anything I can do about it without being able to change the HTML? I'd rather not manipulate it through javascript either, if possible.
I'm not sure exactly what is going wrong, or what effect you are trying to achieve, but I usually use a tag like this in my UIWebView-based views:
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0">