iPhone Safari Viewport Scaling Bug. Those who create responsive design for iPhone may be aware of the viewport scaling bug in iPhone Safari. The bug occurs when you set the viewport width to device-width and rotate the phone to landscape view. To see this in action, view the bug demo page with your iPhone and rotate the phone from portrait to landscape view (you should see the page being scaled up).
This is a known bug for a long time. Today I'm going to share some tips on how to fix this bug. Problem (view demo) View the demo page with an iPhone and rotate the phone from portrait to landscape. Solution 1: Quick Meta Tag Fix (view demo) A quick fix to this issue is by setting maximum-scale=1 in the viewport meta tag. Solution 2: Javascript (view demo) For usability concerns, setting maximum-scale is not an ideal solution because user can not zoom the page.
Comments? Do you know more solutions to fix this viewport scaling bug? Glyphish – Great icons for great iPhone & iPad applications. A tale of two viewports — part two. Page last changed today Related files: Part one of this article, about desktop browsers. Compatibility tables. The full list of browsers can also be found here. Test page. Many thanks to Grace Kloba (Google), David Storey and Anne van Kesteren (Opera), Mike O'Malley (Microsoft), Kartikaya Gupta and George Staikos (RIM), and Mark Finkle (Mozilla) for reviewing earlier versions of this piece and providing me with valuable feedback. This article has been translated into Russian, Chinese, and Korean. In this mini-series I will explain how viewports and the widths of various important elements work, such as the <html> element, as well as the window and the screen. On this page we’re going to talk about the mobile browsers. When we compare the mobile browsers to the desktop ones, the most obvious difference is screen size.
A mobile screen is far smaller than a desktop screen; think about 400px wide at maximum, and sometimes a lot less. Let’s go back to our sidebar with width: 10%. Meaning Problems.
ORIENTATION. » Web Development for the iPhone :: CSS, JavaScript and XHTML Explained. Web Development for the iPhone: Targeting the iPhone Safari browser Developing for the iPhone Also check out Creating native looking iPhone web apps with CSS3 (no images). That works on the iPhone and Safari 5 only. Also see CSS, XHTML and JS support in the iPhone. The Safari iPhone user agent string is:Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3Platform string: (iPhone; U; CPU like Mac OS X; en)Version string: Version/3.0 Mobile/1A543a Safari/419.3 To target the iPhone with CSS, use: <! The logic of this is that only browsers that understand screen understand only, and of these, only the iphone has a max-device-width of 480px. To target the iPhone server-side with PHP you can use: if (stripos($_SERVER['HTTP_USER_AGENT'], 'iPhone')) {} :hover pseudoclass on the iPhone Please see hover pseudoclass for the iPhone to learn how to simulate hover effects on the iphone iPhone Viewport Orientation Hiding the iPhone toolbar.
Media Queries. Abstract HTML4 and CSS2 currently support media-dependent style sheets tailored for different media types. For example, a document may use sans-serif fonts when displayed on a screen and serif fonts when printed. ‘screen’ and ‘print’ are two media types that have been defined. Media queries extend the functionality of media types by allowing more precise labeling of style sheets.
A media query consists of a media type and zero or more expressions that check for the conditions of particular media features. Status of This Document This section describes the status of this document at the time of its publication. A W3C Recommendation is a mature document that has been widely reviewed and has been shown to be implementable. This document has been reviewed by W3C Members, by software developers, and by other W3C groups and interested parties, and is endorsed by the Director as a W3C Recommendation. Please see the Working Group's implementation report and the Media Queries Test Suite. 1. 3. 5. Targeting the iPhone 4 Retina Display with CSS3 Media Queries - WaltPad. Four years ago, (eight months before the original iPhone was announced) Dave Hyatt wrote about high DPI web sites on the Surfin’ Safari blog: One area of Web design that is going to become more important in the coming years is high DPI.
For those of us working on WebKit, this will also become an issue for WebKit applications and for Dashboard widgets. The future is now. The iPhone 4’s Retina Display doubles the pixel density we’re used to seeing on handheld devices and thus drastically improves the sharpness of text on the web. But what about images? In order to preserve the design of existing websites, images are automatically pixel-doubled.
And this creates a schism between “device pixels” and “CSS pixels”. John Gruber’s “Why 960 × 640”: I don’t think that MobileSafari will be able to continue mapping the “px” unit to physical display pixels, because the disparity between the physical pixel size of old and new iPhones is going to be enormous. Dave Hyatt again: See also: Designing for iPhone 4's Retina Display. So, um, maybe you heard: there’s a new iPhone out. For my money (and I shelled out plenty for it), the phone’s best feature is the new “Retina display,” the eye-popping high-resolution screen.
Everything they say about it is true: at 320 ppi, the pixels are just plain invisible. The crisp bright screen really looks as good as print, absolutely gorgeous. But what soothes the eye also adds headaches for designers. For three years, the iPhone came in just one flavor of screen resolution: the 3.5-inch screen was always 320x480 pixels. The new phone doubles the resolution to 640x960 pixels.
Suddenly, we’re all designing for two different screens. Apple’s done some nice work under the hood in iOS 4 to make this transition as easy as possible, but designers still have to take on some extra legwork. I’ll Give You Two Pixels for That Point Starting in iOS 4, dimensions are measured in “points” instead of pixels. Really? There’s one exception to that: the app icon. Boy Howdy, That’s a Lot of Icons. Designing for the Retina Display (326ppi)
For three generations of the iPhone, Apple kept the screen consistent (320x480 pixels and 3.5 inches diagonal). But now Apple's new iPhone 4 boasts the "highest resolution phone screen ever (960x640 pixels, 3.5 inches diagonal, & an 800:1 contrast ratio). " What's the impact to designers? But first, why is it an issue? Because of PPI (pixels per inch) or pixel density variations. "A screen with lower density has fewer available pixels spread across the screen width and height, where a screen with higher density has more — sometimes significantly more — pixels spread across the same area. The density of a screen is important because, other things being equal, a UI element (such as a button) whose height and width are defined in terms of screen pixels will appear larger on the lower density screen and smaller on the higher density screen. " The next set of Android phones featured much higher PPI only to be bested by Nokia's next generation of smartphones and finally the iPhone 4.
The iOS Design Cheat Sheet / Ivo Mynttinen - (Navigazione anonima) Great tips to improve your iOS design workflow. This article is outdated. The current version of this article includes data for newer iOS devices such as iPhone 5 and the new iPad. Check out the iOS Design Cheat Sheet Volume 2. When you are designing a lot of applications for Apple’s touch devices like the iPhone or iPad you often have to follow some conventions regarding sizes or radii of Icons, Buttons or Tables.
Because it is always a big time loss if you have to search on the Web for this information again and again, I’ve put the most important specifications into a nice iOS Design Cheat Sheet. Download the iOS Design Cheat Sheet You can download the Cheat Sheet as printable (300dpi) PDF or as normal sized PNG. While I’ve found out some information on my own, these guys provided some very helpful details via Forrst or Twitter too: Sean Nicholls and Fabio Basile.
Some Tips that can be useful The Help Sheet offers the most important information but the devil is in the detail. Any additions? iPhone - Safari Screen Dimensions & Layout | iPhone Compatible. 10 Tips for New iPhone Developers. Making a webapp for the iPhone is a lot like making a normal web site, but with a few quirks to abide by. In this article, I'll give you a wide variety of tips, covering things such as: "must-haves", usability guidelines, testing/debugging, pitfalls, and performance issues. I hope you enjoy it! WebApps vs. Native Apps Keep in mind that a web application runs in the browser, while a native application is installed on the iPhone. Still not convinced? The list goes on... 1: Viewport, Viewport, Viewport I would say this may be the simplest and most important thing for an iPhone web app. This tells the browser to scale your page in such a way that will make it fit nicely on the iPhone.
Width=device-widthThis fits the page to the device's width. Keep in mind that the viewport IS NOT A WINDOW. A viewport is a rectangular area of screen space within which an application is displayed. Specifying the viewport is a *must-have* and is the first step into making your web app iPhone-friendly. Conclusion. How to Hide the Address Bar in MobileSafari « Mobile. While the iPhone packs a lot of resolution into its relatively small screen, the address bar consumes about 60 pixels of real estate by default when a page is loaded in MobileSafari.
With either 320 or 480 pixels available to the viewport, 44 of which are reserved for the bottom toolbar, it’s necessary to maxamize every available pixel. Below, we will show you two examples you can use to hide the default address bar when the page loads, allowing you to reclaim this valuable space in your iPhone presentations.
There are several ways to accomplish this, the simplest way we have found is as follows: NOTE: This is depreciated in iOS 5. We define an on load event handler in the body tag and use a simple function to hide the scrollbar whenever the page loads. Another method is as follows: <script type="application/x-javascript"> addEventListener("load", function() { setTimeout( hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script> Here’s an example. Comments. Hide the Address Bar within Mobile Safari. With both iOS and Android-driven devices using WebKit as their browser's rendering engine, web developers have many advantages: A rendering engine with capable of flawless CSS animationsA rendering engine that's fast...very fastA rendering engine that's modern and forward-thinking These advantages allow us to create web apps within that browser that look as good as native applications.
If your goal is to create web apps that look like native applications, the details count. One of those details: hiding the address bar. You may think hiding the address bar within the mobile browser is difficult but you'd be surprised how simple it is. The JavaScript window.addEventListener("load",function() { setTimeout(function(){ window.scrollTo(0, 1); }, 0);}); The window.scrollTo method is the key to hiding the address bar.
Bonus: META Tag for Bookmarked Sites If a user has added your web application to their springboard, the following meta tag can remove the top bar from the browser: And that's all! Gotcha: Hiding the Status Bar. Okay, so this is a well-worn topic. However, there are a few potential gotchas that are worth visiting. To begin, if you want to hide the status bar in a running application, it’s quite simple – this technique is handy for things that are best shown fullscreen, for example, I used this technique when previewing images for an iPhone wallpaper app so users could see the entire image with no scaling. Hiding the status bar is as easy as: Gotcha #1 If you want to set the status bar to hidden at application startup, if you attempt to use the above line inside the applicationDidFinishLaunching method, the status bar will be shown while your application is loading, then it will quickly disappear.
Not a good thing. The trick is to set the UIStatusBarHidden property in the application plist.info file. This property needs to be set to true inside the property list, the trick is, you have to be sure that the property is saved as a boolean. UIStatusBarHidden needs to be saved as a boolean. Statusbar - IOS 4.3 hide status bar permanently. Recent. Lovely ui. About / badges / buttons / capture / coach mark / comments / circles / compose / count / detail / empty data sets / favorites / feed / home / icons / launch screen / list / navigation / notifications / player / profile / search / settings / stats / menu on Brewseful on the App Store on iTunes — 1 day ago #brewseful #iphone times on Brewseful — 1 day ago with 4 notes icons on Brewseful — 1 day ago with 1 note navigation on Cook — 2 days ago with 4 notes #cook #ipad #navigation #Illustration #icons #Check List coverflow on Cook — 2 days ago with 2 notes #cook #ipad #coverflow #rainbow typography on Cook — 2 days ago #cook #ipad #Typography #circles #quote — 2 days ago with 2 notes #cook #ipad #Typography #circles list on GoodGuide — 2 days ago with 3 notes #goodguide #iphone #list #gradients #rating illustrations on GoodGuide — 2 days ago with 8 notes #goodguide #iphone #Illustration search on GoodGuide — 2 days ago with 7 notes #goodguide #iphone #search illustration on Wake Up With the World Previous / Next →