I'm developing a web application that also has a mobile webapp.
I currently use :
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
This works great for both iPhone and iPad.
My problem is that I'm using fixed size font (e.g. 18px), but on iPad I would like for it to look exactly as on the iPhone just much respectively bigger.
Is there a way for me to define the viewport in a way that will fit iPhone, and on iPad will look the same just in bigger scale? (like zooming in)?
p.s
I also don't want to stop it from working on android, which it currently does :)
The mobile webapp could be viewed here: HocSpot Mobile, and the webapp here: HocSpot
Why not just use CSS media queries? That will work in a UIWebView.
#media screen and (max-width:1024px) {
// iPad rules
}
#media screen and (max-width:480px) {
// iPhone rules
}
Then you can just style the font sizes with CSS.
Try it out
http://lessframework.com/
Related
I have a CSS layout for a web-based game that was designed to fit the iPad screen only (it's running inside an iPad app). Now I want to port that same game to the iPhone. If I simply run the app using the iPhone 5 simulator, it will just show me a 320x568 section of the screen.
I was wondering if there was a way to (automatically?) shrink down every component on the page to be smaller and fit the iPhone 5's screen. There's lots of images that were designed with the iPad's resolution in mind, so they're bigger than they should be on the iPhone. Can these be resized by the CSS depending on the screen size or would I need to resize them all manually?
In the index.html file I already have included:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
It won't size automatically to the iPhone's screen however. There's also a lot of hardcoded pixel values. Can I simply change those to a percentage that's relative to the screen?
For the record, I didn't write this code, and am not THAT good at CSS. Thank you for your help.
You can checkout this website for help... You can study how to fit a layout as per device size.
http://alistapart.com/article/responsive-web-design
Don't blame if the link expires;-)
I'm having trouble wrapping my head around sizing images and ui elements for my iphone app using phonegap (basically mobile website gone native app). Here are my PSD settings:
width: 640px
height: 960px
resolution: 326px
I'm creating two images, one at half resolution and the other at full. Then I'm using a plugin to recognize the retina display and replace all images with "*-2x". The trouble is that the images appear larger on my retina iphone and are blurry. I'm wondering if my viewport is messing things up as it zooms in on the screen to fit the app:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
I have never used PhoneGap, but to make HTML show images in Retina res what I do is link to a retina res image, say the image is 640x960 pixels, but in the HTML set the size properties to 320x480.
The reason for this, is iOS uses resolution independent "points" instead of "pixels" for layout.
I am creating an application in HTML and javascript for iPhone and iPad.
I would like to have a splash screen for both devices since they must have different dimensions.
I know that there is a link tag "apple-touch-startup-image" that allows you to specify the link for the splash screen image.
What do I do if I want to specify 2 different links? I put 2 link tags with rel="apple-touch-startup-image" and 2 different URL?
Will the mobile device take the correct one if I respect the naming convention here?
What are the sizes used for the iOS application splash screen?
Thanks!
Just figured out how to do this, and it's similar to the apple-touch-icon setup.
Here's my example:
<link rel="apple-touch-startup-image" href="iPhonePortrait.png" />
<link rel="apple-touch-startup-image" sizes="768x1004" href="iPadPortait.png" />
Just set the "sizes" attribute to the specific width and height and mobile Safari should match it up correctly. You can see the various width/height values from the link you posted, too. Hope it works!
I don't believe this is possible on web apps. The naming convention in that question will not work, it is for native apps.
I'm developing a mobile website for iPhone and Android browsers.
As I was playing around with an Iphone 4 and a HTC Desire I found out that the two devices react differently on orientation change. If I load the website in portrait mode and then rotate the device to horizontal mode, the Iphone zooms closer to the content using the same width (320px). With an Android device, if I rotate it seems that the viewport changes, so there isn't any zooming going on (width >320px), instead the websites gets wider.
My current viewport (I already tried setting a fixed width of 320px):
<meta name="viewport" content="width=device-width; initial-scale=1.0;" />
Now my question: Is there a way to make the Android Webkit browser "zoom in" like an iPhone on orientation change from protrait to horizontal?
Thank you very much in advance!
Andrew
This functionality is present on iPhone because of the way the viewport works. Here is how to disabled it on all devices and thus creating the same user experience.
If you set your viewport to this:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0," />
then it will prevent the iPhone from "re-zooming" back to device-width. This ALSO disables zoom entirely though. Don't have a better solution at this point.
Some mobile web sites such as the BBC mobile website stop you zooming in on the main home page on an iPhone - how is this acheived. Is there a directive that has to be included in the HTMl code or something ?
You just need to tell the iPhone not to let the user zoom, with a meta-tag:
<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=0;"/>
This should still let your webpage rotate, but not zoom.
It's because the width of the site is set to the native resolution of the iPhone display. Mobile Safari never actually zooms past 100% on any site, on a standard sized site say (1000px wide) it is zoomed out to begin with and you specify the zoom level when double tapping or using the pinch gesture.
To achieve the same effect use a max width on your site to match the resolution of the iPhone which is 320px.
In CSS this would be done like:
div#wrapper
{
width: 320px;
}