9 ms·
Detect iPad Mini in HTML5?
- andybak 14y agoOr just design your touch targets to be acceptable on both. Visual size is much less of a concern as people will simple tend to hold a 7" tablet closer than a 10" tablet.
- pfisch 14y agoHonestly, that sucks and is really unacceptable. We are talking about significantly changing the size of buttons/text between these two tablets. You should be able to design for both.
- Tyrannosaurs 14y agoI don't think we are. Every iPad mini review I've seen so far says existing applications work fine and touch targets aren't an issue. Font size is the only thing I've seen mentioned and there's a large element of that which is user preference (hence the adjustable fonts in iBooks, Kindle, Instapaper etc.). The answer would seem to be sensible sized touch targets that work on both and adjustable font sizes which are actually beneficial to everyone regardless of what device they're using.
- rimantas 14y agoTouch targets are the same size as on iPhone, so really should not be an issue there.
- objclxt 14y agoExactly - Apple have always been completely crystal clear that your touch targets should be a minimum of 40x40pts. Your graphics themselves might be smaller, but the touchable area should be at least 40x40. Text size, certainly, but touchable targets shouldn't be a problem assuming you're following Apple's guidelines. I appreciate that may not always be the case, but then you only have yourself to blame.
- smackfu 14y agoThis question is about doing it in HTML5 though, so it's not like the iOS app guidelines are particularly followed.
- DanBC 14y agoMay I ask why it sucks? Genuine question. I don't get it. (I'm asking in the context of someone who strongly appreciates "semantic markup" and "separate content from presentation".)
- supercoder 14y agoYou shouldn't need to know if it's an iPad Mini. If your fonts / buttons are too small, then just make them bigger. Easy. This will then mean it will be even more accessible on the 10" device. Plus we've never bothered to know the PPI of the screens before, I've got a 15" screen that is 1920x1080 as well as a 50" screen. But I don't see anyone checking for that. Just stick to reasonable sized fonts and buttons and you should be good.
- Tyrannosaurs 14y agoAlternatively make it user adjustable - good for accessibility too.
- deleted 14y ago[deleted]
- taligent 14y agoYes. Because sight-impaired people are a mythical creature I only read about in books.
- Tyrannosaurs 14y agoBut not large print books because that might suggest that they were real.
- Tyrannosaurs 14y agoDuplicate of a comment I made below but: There seem to be two main things here - touch targets and fonts. All the reviews have suggested that by and large touch targets on existing apps are fine which suggests that it's not only possible but actually pretty simple to size them such that they're fine for both devices. Fonts are somewhat different. There have been comments which suggests that some fonts are smaller than you'd want on the mini but the other side of that is that there is no one "right" font size. When I was in my 20s frankly the smaller the better, now I've turned 40 I'm happier with larger. I agree configurability can be a cop out (and iOS is almost a monument to that view) but there are some things where there are really good reasons why you might make it something the user can work with and this feels like one.
- GotAnyMegadeth 14y agoDevice fragmentation is a massive problem for Apple developers.
- supercoder 14y agoI'm going to take that as sarcasm...
- brador 14y agoIt's actually becoming more of a problem. The longer screen of the new iphone for example.
- smackfu 14y agoAlso, the fact that you need to keep devices around just to test older OS versions. iOS has good upgrade stats but a lot of people are not upgrading to iOS 6 yet, and Apple is also marooning some well used devices like the iPad 1.
- brador 14y agoIt's a single data point but the reason I haven't updated is the 2.7gb of space required for IOS 6. I wanted an ipad 3 on day 1 and they only had the 16gb in stock. Which has just 12gb of usable.
- huxley 14y agoMy impression was that the 2.7GB was required for installation itself (space to save the installer, extract temporary files and install), after installation you get most of that space back.
- smackfu 14y agoTrue, although for a lot of people, that's a problem in itself. In a "post-PC" world where most of the space is taken up by photos and videos, how do you clear out 2.7 GB?
- taligent 14y agoThe iPad 2 is ever so slightly faster: http://www.youtube.com/watch?v=YpV8AoToeHs http://www.youtube.com/watch?v=YpV8AoToeHs Would a JS micro-benchmark work e.g. some integer calculation ? Of course performance may change depending on the other apps the user has open but maybe it doesn't.
- MrScruff 14y agoI imagine this is an intentional omission based on Apple's own research. Personally, while I'm not in the market for an iPad mini it would irritate me if developers tried to treat it as a separate target for layouts. The whole point is it's supposed to be a (slightly) more compact iPad but behave identically.
- Tyrannosaurs 14y agoOr based on the frustration of iPhone users being punted onto second rate "mobile sites" when the full site in Safari with a bit of zooming is absolutely fine. Don't give people any more information which they're likely to use to do dumb things?
- lukifer 14y agoThis is the paradox of platforms in general: the more you empower smart, nice devs, the more you also empower not-so-smart, not-so-nice devs.
- Tyrannosaurs 14y agoAgreed. With this though I'm not hearing any argument that suggests there's a compelling reason to distinguish based on this platform. I'm not saying that there isn't one, just that in a situation like that the chances are there will be a lot more implementations that do something stupid with it than do something good.
- lukifer 14y agoI tend to side with empowering devs by default (of course), but I see your point. Readability should be addressed with adjustable fonts on all devices anyway. The only possible case I could see is augmented-reality stuff where the real size matters, maybe such as rendering a ruler to the screen. An edge case, admittedly, but if it were my edge case, I'd be pissed.
- 14y ago
- alextingle 14y agoBreaking the "cm" units in CSS is inexcusable.
- jrmg 14y agoIt's actually required by the CSS spec[1]: 1px is equal to 1/96th of 1in, 1pt is equal to 1/72nd of 1in So, given that hard requirement, you have three options: - make your hardware have 96 dpi (or a multiple thereof). - have 1 'px' equal to 1 screen pixel (or point) but 'cm', 'in' etc. not equal to real-world centimetres, inches etc. - have 'cm', 'in' etc. identical to real-world centimetres, inches etc., but 'px' without a direct relation to a screen pixel (or point). Apple (and everyone else except perhaps printers) chose the second of those options. [1]http://www.w3.org/TR/css3-values/#absolute-lengths http://www.w3.org/TR/css3-values/#absolute-lengths
- taejo 14y agoIn CSS, px does not have a direct relation to screen pixel. From your reference: > The reference pixel is the visual angle of one pixel on a device with a pixel density of 96dpi and a distance from the reader of an arm's length. For a nominal arm's length of 28 inches, the visual angle is therefore about 0.0213 degrees. For reading at arm's length, 1px thus corresponds to about 0.26 mm (1/96 inch).
- jrmg 14y agoTrue, but, also from there: For lower-resolution devices, and devices with unusual viewing distances, it is recommended instead that the anchor unit be the pixel unit. For such devices it is recommended that the pixel unit refer to the whole number of device pixels that best approximates the reference pixel.
- smackfu 14y agoI don't understand why CSS would have both actual lengths, and device pixel lengths, and then define them relative to each other. That makes no sense.
- 14y ago
- gadders 14y agoGet Raymond Chen to patch iOs.
- jhull 14y agoI think the approach of asking a user if they are using an iPad Mini or an iPad 2 is a good one. Apple values the UX so much that anything which degrades it will be noticed and updated.
- marcus 14y agoAlready posted it on SO but here goes: Play a stereo audio file and compare the accelerometer response when volume is high on the right channel and on the left channel - iPad2 had mono speakers and iPad Mini has stereo speakers built in
- mrtnkl 14y ago+1 on creativity :)
- UnoriginalGuy 14y agoI assumed that was a joke. While this might work, wouldn't the sound have to be audible to the user in order for this to work? And therefore when you browse to a web-site it is going to let out a bloop on LOUD just to test the device? Personally if that happened to me I would never visit your web-site again.
- marcus 14y agoiOS audio will only play in response to user generated event (click for example) never when the site loads. And I am not saying it has to be a random noise or very loud the accelerometer on the iDevices since the iPhone 4 is superb a very low sound will probably be sufficient. The sound can be easily integrated into the natural flow of the site, as many sites already do small beeps or play music etc to provide feedback to the user.
- smackfu 14y agoReally? I swear there are video games that start playing music when launched, but maybe they are just clever about it. Edit: Oops, this is a Safari question, not an iOS app question, so this doesn't apply.
- williamcotton 14y agoIf you play the sound using the Web Audio API, you're not restricted by user interaction.
- xvillain 14y agoAll comments focus on the 'rendering' issue, what about log/traffic analyses ? The root of the problem is Apple not following standards and pushing 'native apps'.
- minikomi 14y ago+-----------------------+ | Are you using an | | iPad mini? | | | | [yes] [ No ] | | | +-----------------------+
- bad_user 14y agoYou forgot [cancel]
- envex 14y agoWouldn't "No" be considered "Cancel" in that situation?
- genwin 14y agoPeople will want a Cancel button because they don't want to be asked a question at that time, but then they'll want to be able to answer (or change the answer) to the question later; e.g. on an options screen.
- bad_user 14y agoIt was also partially a joke, remembering one WTF moment I had with Windows Vista (don't know if it still happens): +--------------------------+ | | | An error occured! | | | | [yes] [ No ] [cancel] | | | +--------------------------+
- smackfu 14y agoYes, people forget that Cancel is the answer in the case of "I didn't mean to click the thing that triggered this box".
- natep 14y agoMost people will just click yes or no to get past this screen. Better to ask "What iPad device are you using?" With options (with pictures?) of "iPad Mini" and "iPad 1/2/3"
- zeteo 14y ago> we may want to scale certain images or buttons Start with iPad2 mode. Add some invisible areas around those images and buttons. If the user keeps touching these areas instead of actual UI, switch to iPad Mini mode. This is also good for iPad2 users who have big and/or clumsy fingers.
- Tyrannosaurs 14y agoIf you have that space available why not just make it part of the touch target in the first place?
- zeteo 14y agoYou could do that and keep track of touches that are not very close to the target's center instead. But it seems a bit more complicated to implement.
- JoelSutherland 14y agoiPhone 3GS: 160dpi iPad Mini: 163dpi iPad 2: 129dpi The iOS guidelines are 40 points for a button on all devices. So a button on an iPad mini is the same physical size as a button on an iPhone. Complaints about fixed finger sizes don't really make sense to me. If buttons on the iPad mini are too small, so are the buttons on every iPhone app made since 2007.
- kamkha 14y agoSome sites have device-specific designs, and so they present different designs for the iPad 2 and iPhone. Your comment would be applicable if the iPad Mini were indistinguishable from the iPhone and were served designs meant for the iPhone as they have roughly the same pixel density, but as it stands it is indistinguishable from the iPad 2 and thus it would be served a design not meant for its pixel density.
- Tyrannosaurs 14y agoThese people can presumably adjust their designs so they work on the iPad mini and the new design will still work well on the iPad 2 (just with slightly roomier touch targets and slightly larger fonts). Can someone give me a real world example of a site than needs to have separate versions for the iPad Mini and the iPad 2 where some genuine benefit accrues (ideally to the user rather than the organisation who run the site)? I'm genuinely interested in what that site might be and what the problem with a single version which works for both devices is. At the moment all I'm hearing is a lot of vague hypotheticals and frustration but not much in the way of real reasons why it's a problem. Are they also coding individually for every single Android device? And if so how many designers are they employing and how the hell are they justifying the expense?
- JoelSutherland 14y agoYou're missing the point entirely. If you're concerned about the size of touch targets on the iPad mini, they are already the EXACT same size as the touch targets on an iPhone since the two share the same pixel density and recommended touch target size (40px).
- dmethvin 14y agowindow.screen.availHeight and window.screen.availWidth look like the best bet.
- kamkha 14y agoOne user posted a link to this blog post which describes a seemingly quick and easy Javascript detection method: http://konstruktors.com/blog/web-design/4396-detect-ipad-mini-javascript/ http://konstruktors.com/blog/web-design/4396-detect-ipad-min... I can't confirm it for myself, but if what the blog post says is true, isn't this an easy method for detection? Though, I can't imagine that all of the people who have deemed it impossible glossed over this.
- saurik 14y agoThis question is making me really wonder how anything useful ever gets done on StackOverflow: every time I look back at it, there is some new answer with 50+ upvotes that is just as wrong as every other answer. Are people seriously upvoting things because they "sound right"? There also tend to be a bunch of comments from people with rampant speculation as to why various behaviors occur, without having even taken the time to just test whether the things they are talking about actually happen on real devices, or continue to happen if you mess with the device some between tests (such as rotating it).
- smackfu 14y agoObviously stuff that gets linked externally all over the place has different kind of answers and voting than your average SO question. Seems silly to judge the whole site on it.
- ygra 14y agoThe average question is probably either one of the following anyway: • How can I parse a bit of information from a HTML page? [regex] [php] • Why does the compiler complain here? [c#] • Regex question [regex] • How to add two numbers in jQuery? [jquery] [html] • What does this operator do? [java] The long tail of not-very-highly voted questions is mostly beginner questions about a particular language or environment. As for me, it gets tiring explaining exactly the same thing in slight variations (adapted to the problem) three times a day.
- smackfu 14y agoAnd actual hard questions that can't be answered by Googling just sit there with no answers. And then I win the Tumbleweed badge: http://stackoverflow.com/badges/63/tumbleweed http://stackoverflow.com/badges/63/tumbleweed That kind of thing is the problem with SO, not the ones with 5k views and hundreds of votes.
- ygra 14y agoYep, a few times I had an actually hard problem and the question got maybe 15 views, no answer and just sat there dying. However, that's probably the sort of question you won't get answered in any forum or similar. SO does very well for the trivial and semi-complicated questions – the kind where there are enough developers to have encountered the problem already to answer. And it does so in a way that appears quite high in Google's results and often comes straight to the point (i.e. the answer) – they set out to become better than expert-sex-change which hides the answer below a plethora of ads and it's only visible if you come from Google/Bing. I'd say SO's dominance here is for the better. That's not to say there isn't anything left to improve, though :-). For trivial questions there are usually a hundred duplicates, at least one of which is often the official documentation.
- irishcoffee 14y agoIf a dev can ensure that the app works correctly (in terms of size proportions) on the Mini, would it not also ensure it works on the non-Mini?
- blauwbilgorgel 14y agoPerhaps the following solutions are possible: - Hardware fingerprinting with the canvas-tag ( http://cseweb.ucsd.edu/~hovav/dist/canvas.pdf http://cseweb.ucsd.edu/~hovav/dist/canvas.pdf ) - Somehow check which assets are preferred downloads: rel="apple-touch-icon" sizes="144x144" rel="apple-touch-icon" sizes="114x114" rel="apple-touch-icon" sizes="72x72"
- nsxwolf 14y agoPlease don't. The iPad mini is an iPad. It should run everything exactly the same way. Please don't fracture the experience. The whole point of the mini is that the screen size is large enough that it doesn't need to be a compromise.
- dpcan 14y agoYes, please do. If someone is playing a game on an iPad, the buttons for controlling the character should not be huge on the screen. They need to be shrunk down and moved off to the corners so the thumbs can easily reach and touch them.
- ricardobeat 14y agoThe recommended minimum target size for iPad (44px) is fine on an iPad mini. You don't need to change it unless it's already too small on the iPad.
- genwin 14y agoHow can it possibly be large enough for a UX designed for an iPad, having elements sized minimally for a human?
- anonymous 14y agoThis is an interesting conundrum. How do you accommodate both people who have small fingers and bought the mini precisely because everything is smaller and more convenient on it, thus expecting that everything is scaled down; as well as people who expect the mini to act as a smaller viewport to applications and websites that retain the same physical size? If only you could ask the user if he has big hands or something...
- smackfu 14y agoThis is rather dogmatic. You could also say the whole point of a 10" Retina screen is to use smaller text sizes... and the mini defeats that.
- 14y ago
- BenSS 14y agoIs everyone forgetting that you can easily zoom on any iOS device?
- randomdata 14y agoMost sites that are device specific disable zooming.
- BenSS 14y agoWhich drives me crazy. If I want to zoom, let me. I don't care of the designer wants a pixel perfect layout, that's not the web.
- ck2 14y agohttp://konstruktors.com/blog/web-design/4396-detect-ipad-mini-javascript/#comment-24726 http://konstruktors.com/blog/web-design/4396-detect-ipad-min... iPad Mini: screen.availWidth = 768 screen.availHeight = 1004 iPad 2: screen.availWidth = 748 screen.availHeight = 1024
- Hupo 14y agoIs there a difference in the default font size of iPad 2 and iPad Mini? Seeing as the latter has a higher pixel density, it would make sense to me (but you never know). Anyway, if that is indeed the case, you could use CSS media queries built with ems instead of pixels. I think it makes much more sense than the regular pixel-based approach as our mobile devices get increasingly higher resolutions and pixel densities.
- robomartin 14y agoMeasure finger size: http://stackoverflow.com/a/13381781/576311 http://stackoverflow.com/a/13381781/576311
- wildmXranat 14y agoSome way down in the answers is the proposition to simply ask the user. As spartan and elegantly simple it is, I'm not sure the user will always be accurate, what then ?
- mrtnkl 14y agoI updated the question and gave a bit more reasoning to why it's ridiculous that we aren't able to properly tell the difference between an iPad Mini and an iPad 2. Short version: It's not just about size. It's about weight and form factor. The iPad mini can and will be used differently, like being held with one hand. Designers/ developers such as myself should be able to provide users with a different default controlscheme for the Mini that could make advantage of this situation (such as using tap to walk instead of a virtual thumbstick - but that's just an arbitrary example).