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.
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 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.
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 am designing a mobile website and when I see my website in portrait view on iphone/ipod its layout, images everything is perfect but when I change to landscape view everything is showing a little bit zoomed-in. I have tried all the meta tag (viewport) attributes:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, user-scalable=1" />
What am I missing? I want to continue to allow users to zoom, I just don't want the orientation change to zoom my content in.
The guys behind jQuery Mobile have a solution to this. It works by checking the accelerometer data and disabling zoom while the device is changing orientation.
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;
}