I'm building an app for iPhone, iPad, Android and BlackBerry. The app only has to work in portrait mode (i.e. if you rotate the mobile device in landscape orientation, nothing happens). The app has to display differently depending on the resolution:
If the screen width is <= 240px: micro mode (mainly for BlackBerry)
Otherwise, if the screen width is <= 480px: small mode (for normal res mobile devices)
Otherwise, if the screen width is <= 767px: medium mode (for high res mobile devices like iPhone 4+)
Otherwise (screen width >= 768px): big mode (for tablets)
Everything works fine when trying to resize the window on my browser, all the elements resize and reposition correctly depending on the viewport size. The only problem I'm facing is with iPhone 4 (and probably the same thing would happen on iPhone 4S and iPhone 5). In fact, it's using the small mode instead of the medium mode despite its screen width is 640px. I specified the viewport meta in the following way:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, target-densitydpi=device-dpi" />
Does anybody know why this happens and how to fix it?
Thank you very much.
The iPhone is 320 CSS pixels wide, which is scaled from 640 device pixels.
You can filter by device-pixel-ratio:2 if you need to handle it differently to the non-retina version.
Related
http://www.myobgyn.ca/demo789/desktop/index4sdm.html
Looks good on desktop and designed to be pixil perfect and not extend on desktop. However, on iphone / ipad, I would like it to extend out to full width automatically. I don't want a mobile version, but simple for it to display full screen on iphone / ipad; but also have fixed pixil width desktop.
meta id='viewport' name="viewport" content="width=device-width"
I have tried multipe VIEWPORT tags, (scale etc, defined width) current am only using the below, and its not working in portrait. pixil width of app is 580
on iPhone 5S it scrolls in portrait, but fits screen in landscape..
Also, device has a roller at bottom that user moves. Unofrtunately, that movement at edge of screen triggers the ios swipe to open the next safari pages.. can I turn that feature off.
I'm currently developing a "mobile version" of a website that is primarily targeting more current iPhones (4+), it's my first time doing this. I'm testing on an iPhone 4S, my understanding is that the screen resolution of that device is 640x920 (when held in "portrait" orientation). I have everything on the site within a 600px wide container, although when I view it on the phone it seems to display by default in a "zoomed out" state, being that I can still see something like 1000-1200 pixels of content on the screen.
I assume that the iPhone displays sites in this way as many are not built to adapt to it's smaller resolution? Is there something I'm missing here? Is there something I set to tell the device to display the site at it's actual resolution?
You need to add a viewport meta tag in your html head.
<meta name="viewport" content="width=device-width">
That tells the browser that the viewport (virtual width) should be set to the device width (physical width).
I'm having some issues with a page that doesn't have a lot of content and therefore has a small height. The iPhone is scaling the page, and due to this, I can't see the full menu bar (960px wide). I put a minimum height using a media query for both portrait mode and mobile devices with a minimum resolution. I really dislike doing this as I don't know how this will work on other devices, and it only works if the user doesn't rotate the screen (after rotation, the original issue re-occurs).
Is there some way to force the iphone to show a minimum width of 960px even if the height of the content doesn't fill the screen?
You can control the viewport width, and maximum scale (depth visitor is allowed to zoom in) for Apple mobile devices with this META tag:
<meta name="viewport" content="width=960px, maximum-scale=1.0" />
Works with Android and other mobile browsing devices, too.
By default iOS browsers supply a set of default screen dimensions, regardless of actual screen res or orientation.
In order to get them to supply #media tags with the actual screen dimensions there is a Meta tag they will obey:
<meta name="viewport" content="width=device-width, initial-scale=1">
If you add this to your page(s) then your #media commands should work with the actual screen resolution of each device. You then have full control with your #media queries
You can then use things like width: 100% to use the actual screen width.
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
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'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.