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).
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 have a question, client needs a mobile website and it has to display pixel perfect on mobile devices (emphasis on iPhone).
I have a .PSD design which is 640px wide.
This website tells me that older iPhones (<= 3) have width of 320px and newer ones (>= 4) have width of 640px.
My question is - how do I make a single page that will display the same on both the older and newer devices?
I know the newer versions have retina display, so do I leave the width and adjust everything to 640px or scale the .PSD down to 320px and adjust everything to that?
Thanks!
You'll need to use a meta viewport tag so that the browser knows to calculate dimensions based on the device. Then define your css classes using percentages (not pixels).
An example looks like this:
<meta name="viewport" content="width=device-width">
And a blog post: http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html
If you need to load different images for different screen densities, you can try using window.devicePixelRatio to determine the screen density and then use javascript to load the correct image.
http://www.quirksmode.org/blog/archives/2012/06/devicepixelrati.html
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
This is a long shot but I'm hoping there's a way to stop IPhones from resizing a page on load. Problem is if it's a site with a lot of need for refreshing (Say a forum) it gets a little old for users to have to resize that page every refresh.
Is there a way to force Safari/The IPhnone to not minimize the site on refresh that doesn't involve a user changing a setting?
There is a meta tag you can use that will constrain the viewport for the iPhone:
<meta name="viewport" content="width=320" />
From Apple's developer documentation:
Use the viewport meta tag to improve the presentation of your web content on iPhone. Typically, you use the viewport meta tag to set the width and initial scale of the viewport. For example, if your webpage is narrower than 980 pixels, then you should set the width of the viewport to fit your web content. If you are designing an iPhone-specific web application, then set the width to the width of the device.
There is a constant you can use for the iPhone's device width: width=device-width.
Not sure if this link will work, but you can read more about Mobile Safari and the viewport tag on the Apple Developer website