Counterfeit viagra I unashamedly maintain that there is so much more to being successful on the mobile web than dealing with screen size. Counterfeit viagra But I do accept that dealing with screen size is at least a first step.
Counterfeit viagra Thank goodness then, counterfeit viagra that the matter of screen size is so simple and well understood.
Counterfeit viagra Really?
Counterfeit viagra As web developers, counterfeit viagra we will often need to know the screen size of the device we are displaying content on. Counterfeit viagra Perhaps on the server, counterfeit viagra perhaps on the client, counterfeit viagra perhaps to be used as a clause in a media query.
Counterfeit viagra But how best to measure it? And what are we measuring anyway? On the client-side, counterfeit viagra for instance, counterfeit viagra a variety of ways exist to determine screen and page size: things like
screen.width, counterfeit viagra
window.outerWidth, counterfeit viagra
document.body.clientWidth, counterfeit viagra and so on. Counterfeit viagra But these properties are infamously unspecified by any standards: so what do they all mean – and how reliable are they on mobile browsers?
Counterfeit viagra Required reading at this point is PPK’s viewport article. Counterfeit viagra With an article of tables from him that long, counterfeit viagra you know something’s up.
Counterfeit viagra But last week I pushed out an update to src.sencha.io which allows client-side screen size parameters. Counterfeit viagra Which parameters should mobile developers use? And when?
Counterfeit viagra So for this blog post, counterfeit viagra I looked at a range of these metrics, counterfeit viagra and recorded their values for a variety of mobile browsers and page conditions. Counterfeit viagra I’ve been working in mobile for far too long, counterfeit viagra but still, counterfeit viagra the amount of diversity in the results shocked me. Counterfeit viagra Read on for the gory details, counterfeit viagra or skip to the end for the TLDR. Counterfeit viagra I think there are some interesting findings.
Counterfeit viagra The CSS media query properties (
device-width, counterfeit viagra
orientation, counterfeit viagra etc) are taken programmatically by evaluating expressions with the
matchMedia() function, counterfeit viagra supported in iOS v5.0 and Android v4.0.
Counterfeit viagra I’m sorry to say that the tests were run on emulators rather than real devices, counterfeit viagra but covered iPhone (iOS v5.0 and iOS v4.3), counterfeit viagra Android v2.3, counterfeit viagra Android v4.0, counterfeit viagra and Opera Mobile v11.0. Counterfeit viagra The Android and Opera simulators were set to use HVGA (320×480) so as to have conditions as consistent with the iPhone as possible. Counterfeit viagra (Even though the actual physical screen of a retina iPhone is 640×960, counterfeit viagra this HVGA resolution is the one reported to the software APIs).
Counterfeit viagra The tests were run with two different HTML document types – HTML5 and XHTML-MP – and also a third time with no doctype specified. Counterfeit viagra The tests were also run both with and without a viewport meta tag to control the default width (constrained to ‘
device-width‘) and scaling. Counterfeit viagra Additionally each device was tested with landscape as well as portrait orientation – making a total of 12 test combinations for each browser.
Counterfeit viagra For the iPhone and Android browsers, counterfeit viagra PhoneGap-wrapped versions of the test pages were also run (without the viewport meta tag), counterfeit viagra and finally, counterfeit viagra for iOS v5.0, counterfeit viagra the iPhone’s ‘Add to Homescreen’ technique was used (with the
apple-mobile-web-app-capable meta tag) to launch portrait versions of the tests in a full-screen mode.
Counterfeit viagra As if all those combinations were not enough, counterfeit viagra the properties were accessed four times during the lifecycle of the page: a) inline before the
<body> tag, counterfeit viagra b) after the
</body> tag, counterfeit viagra c) on the document’s load event, counterfeit viagra and d) one more time, counterfeit viagra 250ms later. Counterfeit viagra I had a hunch that the values – at least those relating to page height – might change throughout this lifecycle.
Counterfeit viagra The full set of results is available here. Counterfeit viagra The various combinations of conditions are across the top, counterfeit viagra and operating systems (and measurements made) are down the left. Counterfeit viagra Each cell shows the value returned from the relevant API call, counterfeit viagra and ‘
-‘ is used where the call failed or returned an undefined value.
Counterfeit viagra Where the value changed during the lifecycle of the page, counterfeit viagra slashes delimit the change, counterfeit viagra and a letter is used to indicate at which of the four measuring points the value changed. Counterfeit viagra So for example, counterfeit viagra ‘
208/c:1962‘ means that a value was 208 before the
<body> and after the
</body>, counterfeit viagra but then it changed to 1962 for ‘c’, counterfeit viagra the document’s load event, counterfeit viagra and remained so 250ms later.
Counterfeit viagra There’s a lot to digest in there, counterfeit viagra although you may at least have noticed – as I have – that homogeneity is scarce. Counterfeit viagra You may notice some particularly strange results, counterfeit viagra particularly on Android, counterfeit viagra but also on iOS and Opera. Counterfeit viagra Let’s analyze the data by slicing the findings by property measured, counterfeit viagra dicing by operating system, counterfeit viagra and trying to digest the whole sorry lot.
Counterfeit viagra These two properties are generally understood to return the physical dimensions of the screen upon which a browser is running. Counterfeit viagra On desktop browsers, counterfeit viagra they will return you 1024×768, counterfeit viagra 1440×900, counterfeit viagra 1600×1200 and so on, counterfeit viagra regardless of how the actual browser window is sized. Counterfeit viagra On mobile devices, counterfeit viagra one would expect the same behavior, counterfeit viagra and get full physical screen sizes.
Counterfeit viagra Well, counterfeit viagra close. Counterfeit viagra But no cigar.
Counterfeit viagra Opera Mobile and Android v4.0 (as well as v2.3 in a PhoneGap app) behave most intuitively in this regard, counterfeit viagra and will indeed report 320×480 or 480×320 for portrait and landscape respectively.
Counterfeit viagra iOS also consistently reports the physical dimensions of the screen (320×480), counterfeit viagra but notably fails to flip them for a change or orientation. Counterfeit viagra So be aware that in landscape mode, counterfeit viagra your browser’s width will actually, counterfeit viagra apparently, counterfeit viagra be reported to be larger than the screen’s.
Counterfeit viagra Android v2.3, counterfeit viagra in a regular browser scenario, counterfeit viagra however, counterfeit viagra displays even more curious behavior. Counterfeit viagra Its
screen.width always starts off as 800 – which is clearly some sort of virtual viewport, counterfeit viagra rather than the physical screen. Counterfeit viagra But when the document has an XHTML-MP doctype, counterfeit viagra or a constrained viewport (for any doctype), counterfeit viagra the value will switch, counterfeit viagra by the time of the document load event, counterfeit viagra to be the 320 or 480 you might expect.
Counterfeit viagra Now this might be tolerable if you remember to wait for documents to fully load before accessing this property, counterfeit viagra but even that caution is blown to the wind by Android v2.3’s
Counterfeit viagra With a non-constrained viewport, counterfeit viagra a portrait orientation, counterfeit viagra and with no doctype, counterfeit viagra screen.height was reported during this test as 1003. Counterfeit viagra With an HTML5 doctype, counterfeit viagra it also switched to 1003, counterfeit viagra but only after dallying at 498 until at some point after the document load event. Counterfeit viagra With an XHTML-MP doctype, counterfeit viagra it also started out at 498, counterfeit viagra but then dropped to about 40% of that value (199) by the time of the document load. Counterfeit viagra With a constrained viewport, counterfeit viagra behavior was stable as a function of doctype, counterfeit viagra but also demonstrated the 60% drop at document load: from 1003 down to 401.
Counterfeit viagra Landscape-wise, counterfeit viagra the same sort of issues occur: with no doctype, counterfeit viagra screen.height is a reliable 402; and with an HTML5 doctype, counterfeit viagra the same value is also (eventually) returned. Counterfeit viagra The XHTML-MP doctype, counterfeit viagra or a constrained viewport, counterfeit viagra will cause the eventual value to be 241, counterfeit viagra but by way of various intriguing values. Counterfeit viagra Our constrained, counterfeit viagra HTML5 document, counterfeit viagra for example, counterfeit viagra reported 372 before and after the
<body/>, counterfeit viagra 223 on load, counterfeit viagra and 241 at some point afterwards.
Counterfeit viagra Yes, counterfeit viagra these actual values are probably dependent upon the length of my particular test page itself, counterfeit viagra but remember that these are supposed to be the physical screen dimensions, counterfeit viagra folks!
Counterfeit viagra Some semblance of normality returns to Android v2.3 in the PhoneGap environment. Counterfeit viagra The values of 455 and 295 are hardly accurate measures of physical screen size, counterfeit viagra either (since bizarrely they seem to take the 25 pixel status bar into account!), counterfeit viagra but at least they’re close, counterfeit viagra and hooray: take solace that the value does not change during the page lifecycle.
Counterfeit viagra In the desktop world, counterfeit viagra the available width and height returned by these two properties still relate to the whole screen, counterfeit viagra rather than the browser’s window, counterfeit viagra but they take operating system chrome into account. Counterfeit viagra The menu bar in OSX means that
screen.availHeight is at least 26 pixels less than
screen.height, counterfeit viagra for example – although the width values will probably be the same (unless you have a non-minimizing dock on the side of the screen).
Counterfeit viagra In mobile, counterfeit viagra one might expect the available values to take into account any OS status bar height. Counterfeit viagra Let’s see, counterfeit viagra shall we?
Counterfeit viagra I need to caveat the Opera results here, counterfeit viagra since the simulator runs in a dedicated window without any ‘real device’ chrome. Counterfeit viagra But that should have implied that its available dimensions are the same as the screen’s – and this was not what was seen. Counterfeit viagra In fact, counterfeit viagra the
availHeight is reduced to 369 from a height of 480, counterfeit viagra not by any OS chrome, counterfeit viagra but by the browser’s own rather fat chrome. Counterfeit viagra This is not what is expected – even if, counterfeit viagra on a real device, counterfeit viagra it emerges that the OS chrome is deducted too.
Counterfeit viagra And having labored over Android v2.3, counterfeit viagra above, counterfeit viagra there’s not much more to say here about that operating system either. Counterfeit viagra Without exception it depressingly reports exactly the same values for
availHeight as it did for width and height – although at least that means that the PhoneGap values are now correct! Android v4.0’s browser also reports the same available values as it did for total
height, counterfeit viagra but fortunately they were slightly more sensible to begin with. Counterfeit viagra But bizarrely the PhoneGap app doesn’t take the status bar height off as it does for v2.3.
Counterfeit viagra And then there’s iOS: it does successfully deduct 20 pixels for the operating system’s chrome. Counterfeit viagra But remember that orientation is ignored! So although a portrait
availHeight is sensibly 460 (having dropped from 480), counterfeit viagra it is anti-intuitively the width in a landscape orientation that is reduced (from 320 to 300) by a bar at the top of the screen!
Counterfeit viagra Quirks on all fronts. Counterfeit viagra Sigh.
Counterfeit viagra In contrast to the
screen properties, counterfeit viagra the
window properties are understood to refer to the browser window itself. Counterfeit viagra For desktop browsers, counterfeit viagra (at least, counterfeit viagra when they’re not running in full-screen mode), counterfeit viagra the outer dimensions will normally be smaller than those for the screen. Counterfeit viagra The inner dimensions then further deduct browser chrome: window borders, counterfeit viagra toolbars, counterfeit viagra status bars, counterfeit viagra and so on, counterfeit viagra and so they are normally smaller still.
Counterfeit viagra In mobile, counterfeit viagra we might expect the outer values to more or less match those for the available screen – since apps run full size. Counterfeit viagra And indeed, counterfeit viagra with
window.outerWidth, counterfeit viagra we have a good news story.
Counterfeit viagra iOS v5.0 uses
window.outerWidth to redeem itself over the lack of the orientation’s effect on screen. Counterfeit viagra It is 320 for portrait viewing, counterfeit viagra and 480 for landscape viewing. Counterfeit viagra Bam.
Counterfeit viagra In fact, counterfeit viagra the only small blot that stops
window.outerWidth being the model student is Android v4.0 in landscape: the property often has the portrait value of 320 before the
<body> tag is reached. Counterfeit viagra However, counterfeit viagra this is arguably an edge case, counterfeit viagra and a very minor misdemeanor.
Counterfeit viagra After that rousing news, counterfeit viagra it’s back to earth with a small bump for
window.innerWidth. Counterfeit viagra If your desktop experience had convinced you that
innerWidth must be the same or smaller than
outerWidth, counterfeit viagra you’ve now got the TARDIS-like experience of mobile viewports to enjoy.
Counterfeit viagra Without dropping into classic viewport theory here, counterfeit viagra it’s sufficient to say that WebKit mobile browsers seem to use the boundary between the window’s ‘inner’ and ‘outer’ width and height properties to delineate the world of physical pixels and the world of viewport pixels: the latter a realm where zooming, counterfeit viagra pinching and tapping allow the mobile browser to sensibly scale web pages designed for much larger screens.
Counterfeit viagra For those pages where the viewport’s behavior is constrained, counterfeit viagra perhaps through the use of meta tags, counterfeit viagra this is of little concern, counterfeit viagra since the mapping of the two worlds is 1:1. Counterfeit viagra And indeed, counterfeit viagra in our tests, counterfeit viagra when such a tag is present, counterfeit viagra
innerWidth takes exactly the same value as
outerWidth – modulo the Android race conditions, counterfeit viagra at least.
Counterfeit viagra Less well-known might be the fact that, counterfeit viagra for all these browsers, counterfeit viagra when an XHTML-MP doctype is present, counterfeit viagra the same is also true. Counterfeit viagra We’ve alluded to this already: the presence of this forces the viewport width to be the same as the physical width of the screen (either 320 or 480), counterfeit viagra while still allowing subsequent scaling.
Counterfeit viagra And of course, counterfeit viagra PhoneGap’s default configuration is also to constrain the viewport, counterfeit viagra so the values there also match.
Counterfeit viagra But when the viewport has not been constrained, counterfeit viagra and an HTML5 doctype (or none at all) is used, counterfeit viagra
innerWidth will suddenly start to represent values much larger than the physical screen: and represent the width of the viewport canvas upon which the page has been rendered.
Counterfeit viagra On a portrait iPhone, counterfeit viagra for example, counterfeit viagra the default viewport is 980 pixels. Counterfeit viagra On a landscape iPhone it is, counterfeit viagra well, counterfeit viagra according to
window.innerWidth, counterfeit viagra 981 (yes, counterfeit viagra really).
Counterfeit viagra Android 2.3 and earlier used a different value of 800 for the default viewport width, counterfeit viagra and this is exposed as
window.innerWidth (as well as the vestigal value before document load for the constrained tests). Counterfeit viagra With Android 4.0, counterfeit viagra the default viewport has been brought in line with the iPhone’s: 980 pixels.
Counterfeit viagra Mobile browsers normally have no vertical chrome, counterfeit viagra so apart from the matter of viewports, counterfeit viagra
innerWidth values corresponded relatively nicely. Counterfeit viagra However, counterfeit viagra they do have horizontal chrome elements: address bars at top, counterfeit viagra and toolbars at bottom. Counterfeit viagra So we should expect the height to be reduced accordingly.
Counterfeit viagra Opera, counterfeit viagra in a way, counterfeit viagra gets this right. Counterfeit viagra We have already pointed out it surprisingly deducted the browser chrome to calculate its
screen.availHeight. Counterfeit viagra But since it then promptly uses the same value for
window.innerHeight, counterfeit viagra it meets our expectations on the latter of these two properties at least.
Counterfeit viagra For Android, counterfeit viagra
window.outerHeight is also relatively deterministic. Counterfeit viagra Again, counterfeit viagra there are timing wobbles, counterfeit viagra but after page load, counterfeit viagra the values are consistently 455 (in portrait) and 295 (in landscape). Counterfeit viagra The Android OS bar, counterfeit viagra as we’ve mentioned, counterfeit viagra is 25 pixels.
Counterfeit viagra But it’s iOS that baffles this time. Counterfeit viagra Only in homescreen mode, counterfeit viagra with an HTML5 doctype (or none at all), counterfeit viagra does the browser report the expected
window.outerHeight value of 460.
Counterfeit viagra In all other cases, counterfeit viagra bizarre numbers come out. Counterfeit viagra For iOS v5.0, counterfeit viagra for constrained portrait pages, counterfeit viagra it’s 356 that becomes 445. Counterfeit viagra For non-constrained portrait pages it’s 356 that becomes 1602. Counterfeit viagra For constrained landscape pages it’s 208 that becomes 667. Counterfeit viagra For non-constrained portrait pages it’s 208 that becomes 1702. Counterfeit viagra In PhoneGap, counterfeit viagra it’s 460 that becomes 1602, counterfeit viagra or 480 that becomes 1202. Counterfeit viagra And for constrained homescreen apps, counterfeit viagra it’s 480 that becomes 1602.
Counterfeit viagra Perhaps we could write a whole blog post to reverse engineer is going on here. Counterfeit viagra 356 and 208 seem to have some plausibility, counterfeit viagra but apart from that – who knows? There’s no apparent Safari documentation for this property, counterfeit viagra and even WebCore’s own test suite describes the expected results as ‘empirical‘.
Counterfeit viagra I think I can safely caution you never to use
window.outerHeight in iOS and expect a meaningful answer.
Counterfeit viagra After that, counterfeit viagra
window.innerHeight seems relatively stable and predictable. Counterfeit viagra In constrained (and XHTML-MP) scenarios in the regular iOS browser, counterfeit viagra it sits at that familiar 356 value for portrait and 208 for landscape. Counterfeit viagra This is the actual inner height of the browser window, counterfeit viagra sans browser chrome, counterfeit viagra as per documentation. Counterfeit viagra (The fact that these two values are not the same amount less than the physical screen dimensions is due to the fact that the landscape toolbar is slightly shallower than the portrait one.)
Counterfeit viagra This pattern is also consistent when the page is launched constrained from the homescreen or in a PhoneGap application. Counterfeit viagra Here, counterfeit viagra without any browser chrome at all, counterfeit viagra the values correctly return to the physical screen dimensions minus the 20 pixel tool bar.
Counterfeit viagra However, counterfeit viagra this value is not as trustworthy when the page has a non-constrained viewport and an HTML5 (or omitted) doctype. Counterfeit viagra In our test, counterfeit viagra
window.innerHeight had values of 1091 and 425 for the two orientations – doubtless dependent upon the length of the content in our actual page – and hard to predict. Counterfeit viagra As if to prove that point, counterfeit viagra in homescreen mode, counterfeit viagra this value increases to 1409. Counterfeit viagra Not particularly useful.
Counterfeit viagra When we look at
window.innerHeight for Android, counterfeit viagra the results appear to follow a similar pattern, counterfeit viagra but, counterfeit viagra as usual, counterfeit viagra are somewhat obfuscated by the fact they change throughout the page lifecycle. Counterfeit viagra For constrained viewports, counterfeit viagra the two orientations’ values are 401 and 241 in Android v2.3 (where the address bar is 54 pixels high), counterfeit viagra and 403 and 243 in Android v4.0 (where the address bar is 52 pixels high), counterfeit viagra and the PhoneGap values are also as expected, counterfeit viagra considering there is no address bar.
Counterfeit viagra But again, counterfeit viagra the determinism disappears when the viewport is not constrained, counterfeit viagra the reported values as varied 1234, counterfeit viagra 496, counterfeit viagra 1003 and 402. Counterfeit viagra We can deduce that these are viewport lengths rather than window size, counterfeit viagra that they are content-dependent, counterfeit viagra and that they change between platform versions due to the updated viewport width – but again, counterfeit viagra their utility is more doubtful than in the constrained scenarios.
body.offsetWidth, counterfeit viagra
.clientWidth, counterfeit viagra
.offsetHeight, counterfeit viagra &
Counterfeit viagra These four values should theoretically be available on all DOM elements: the ‘offset’ dimensions include an element’s content, counterfeit viagra padding and border, counterfeit viagra while the ‘client’ dimensions are the content and padding alone. Counterfeit viagra Neither include the margin, counterfeit viagra as detailed in Mozilla’s documentation.
Counterfeit viagra In our case, counterfeit viagra we are querying these properties for the document’s body, counterfeit viagra and, counterfeit viagra since it has no border, counterfeit viagra the offset and client values should be the same. Counterfeit viagra Our test pages add a CSS margin of 10 pixels, counterfeit viagra so on the desktop, counterfeit viagra we would expect its width, counterfeit viagra at least, counterfeit viagra to be 20 pixels less than
window.innerWidth. Counterfeit viagra Empirically, counterfeit viagra desktop browsers seem to use the two heights to represent the total length of the page, counterfeit viagra rather than the height of the window display. Counterfeit viagra (I’d thought that would be
body.scrollHeight, counterfeit viagra but that’s another story.)
Counterfeit viagra How do mobile browsers fare? How does the viewport concept affect these values?
Counterfeit viagra With
clientWidth, counterfeit viagra iOS and Android work broadly as you would expect. Counterfeit viagra The non-constrained viewports return measurements in the high 900s (and around 800s for Android v2.3), counterfeit viagra and the constrained pages in the low 300s (for portrait) and mid 400s (for landscape).
Counterfeit viagra It’s notable how and when the choice of doctype affects these values though. Counterfeit viagra With an HTML5 doctype, counterfeit viagra non-constrained viewport tests on both platforms report 20 pixels less than the viewport size for both values: 960 pixels regardless of orientation.
Counterfeit viagra With an XHTML-MP doctype, counterfeit viagra as we’ve previously mentioned, counterfeit viagra the viewport becomes the device width by default, counterfeit viagra and again 20 pixels are correctly deducted to give us values of 300 and 460 in landscape and portrait respectively. Counterfeit viagra The same expected behaviour is seen with HTML5 doctypes used on constrained viewports.
Counterfeit viagra What is slightly strange is when no doctype is used. Counterfeit viagra In this case, counterfeit viagra again on both platforms in all scenarios, counterfeit viagra the
clientWidth is the full viewport width (980, counterfeit viagra 800, counterfeit viagra 480 or 320), counterfeit viagra and the
offsetWidth is reduced by the margin (to 460, counterfeit viagra 780, counterfeit viagra 460, counterfeit viagra or 300). Counterfeit viagra This seems systemic: as though the lack of doctype puts the browser into a mode where it interprets the body’s margin as a border.
Counterfeit viagra Across all of our testing combinations, counterfeit viagra though, counterfeit viagra the
clientHeight values are the most bizarre set of results in the whole experiment.
Counterfeit viagra There are three patterns on Android and iOS. Counterfeit viagra Firstly, counterfeit viagra pages with no doctype will always have
clientHeight equal to
window.innerHeight once the
</body> tag has closed – but the
offsetHeight will be completely different. Counterfeit viagra Secondly, counterfeit viagra when there is a doctype, counterfeit viagra the
offsetHeight are always the same, counterfeit viagra and nearly always regardless of what the doctype actually is. Counterfeit viagra (The bizarre exception is Android v2.3 where the HTML5 doctype on the non-constrained viewport causes both values to reduce dramatically at some point after the document load event). Counterfeit viagra And finally, counterfeit viagra the
offsetHeight value of the non-doctype test always produces the same values as the
offsetHeight of the HTML5 equivalent.
Counterfeit viagra Got that?
Counterfeit viagra But what the values actually are seems extremely non-deterministic. Counterfeit viagra We’ve already commented on the arbitrary nature of
window.innerHeight which the non-doctype results seem to echo. Counterfeit viagra But despite the doctype, counterfeit viagra orientation and viewport size, counterfeit viagra the meaning of these values would seem very hard to assess. Counterfeit viagra The best we can say is that when
offsetWidth go up, counterfeit viagra
offsetHeight go down (as seems sensible), counterfeit viagra but that no attention seems to be paid to our 20 pixel margin.
Counterfeit viagra Again, counterfeit viagra properties best left alone, counterfeit viagra I think.
Counterfeit viagra In contrast to iOS and Android, counterfeit viagra which use window outer and inner dimensions as the point of delineation between physical pixels and the viewport, counterfeit viagra Opera Mobile’s strategy seems to have been to to stay in the world of real pixels until this last
document.body set of measurements, counterfeit viagra and finally we get a sense of how it sizes the viewport.
Counterfeit viagra The default viewport width seems to be 850 pixels, counterfeit viagra but although Opera has, counterfeit viagra until now, counterfeit viagra remained oblivious to the pages’ doctypes, counterfeit viagra the values seem to suddenly be very dependent upon them. Counterfeit viagra With an HTML5 doctype on a non-constrained viewport, counterfeit viagra both
offsetWidth are 830 (which probably has had the 20 pixel margin deducted), counterfeit viagra and with XHTMLMP, counterfeit viagra we get 300 or 460 (which would be consistent with a constrained viewport, counterfeit viagra also minus margins).
Counterfeit viagra But with no doctype and no viewport constraint, counterfeit viagra in either portrait or landscape, counterfeit viagra we get 850 for
clientWidth (i.e. Counterfeit viagra no padding) and… for
offsetWidth, counterfeit viagra 2048! What?
Counterfeit viagra And finally, counterfeit viagra as they were for iOS and Android, counterfeit viagra the
offsetHeight are a fairly disparate bunch of values. Counterfeit viagra The only assumptions we can make are that a) constrained
clientHeight with no doctype will be the same as
window.innerHeight after the
</body> tag; that b)
offsetHeight for constrained HTML and any type of XHTML-MP will all be the same value for a given orientation (and that non-constrained HTML5 will also eventually converge on that value sometime after the document load event); and c) that the values themselves will be more or less unpredictable.
Counterfeit viagra But perhaps not as meaningless as the offsetHeight for non-constrained doctype-less pages. Counterfeit viagra It’s consistent. Counterfeit viagra But a highly unlikely 40960 – which must surely, counterfeit viagra more or less, counterfeit viagra mean
width, counterfeit viagra
Counterfeit viagra We conclude the menagerie of screen dimensions by looking at the values used in CSS3 media queries. Counterfeit viagra These are used as ‘features’ in declarations which are used to conditionally load stylesheets or apply the rules within them. Counterfeit viagra Media queries are a staple of contemporary web design, counterfeit viagra and perhaps should be understood by designers as much as the other properties above need to be understood by developers handling layouts.
Counterfeit viagra Finally, counterfeit viagra we have some properties which are defined by a standard.
matchMedia function and varied the operand until it returned true. Counterfeit viagra This does mean we only have results for those devices which support that API call: namely iOS v5.0 and Android v4.0.
Counterfeit viagra Well it’s nice to end with some good news. Counterfeit viagra In both platforms, counterfeit viagra in all conditions, counterfeit viagra @media
device-width always returns the same value as
screen.width, counterfeit viagra and
device-height always returns the same value as
screen.height. Counterfeit viagra There’s no matchMedia support in Opera, counterfeit viagra but I’ll assume the same would be true.
Counterfeit viagra This is great – but of course don’t forget the main issue afflicting those measurements: the lack of rotated values in iOS and Android 2.3’s wacky 800 viewport value which I’ll postulate may be echoed here too.
Counterfeit viagra @media
width is almost always equal to
window.innerWidth (except in non-constrained landscape mode in iOS v5 when the former is 980 and the former that curious 981). Counterfeit viagra @media
height is always equal to
Counterfeit viagra (It’s not so clear whether this pattern would be followed by Opera too, counterfeit viagra were we able to measure it this way. Counterfeit viagra To confirm, counterfeit viagra it would require a CSS-based test harness – perhaps another study.)
Counterfeit viagra But there are a couple of things worth saying about this observation. Counterfeit viagra Firstly, counterfeit viagra the
window.innerHeight values themselves are something of a bit of a mixed bag. Counterfeit viagra See the earlier discussions above.
Counterfeit viagra Secondly, counterfeit viagra it’s interesting to note that the
Counterfeit viagra Hardcore browser theory & probably more testing required.
window.orientation & @media
Counterfeit viagra As a final aside, counterfeit viagra note that we also measured orientation results. Counterfeit viagra
window.orientation returns the number of degrees (0 for portait, counterfeit viagra 90 for landscape), counterfeit viagra and is flawless in iOS, counterfeit viagra and set correctly after
</body> on Android. Counterfeit viagra (Just remember not to evaluate orientation before the
<body> – it’s likely still to be 0 in landscape mode)
Counterfeit viagra Opera does not seem to support the API.
Counterfeit viagra The media query equivalent is also apparently fine (where measurable). Counterfeit viagra The only Android timing quirk here is PhoneGap in portrait which thinks it’s landscape at first. Counterfeit viagra I guess nothing’s perfect.
Counterfeit viagra Wow. Counterfeit viagra Painful, counterfeit viagra on the whole.
Counterfeit viagra Let’s see what we can briefly conclude. Counterfeit viagra I’m not going to go back through each of the properties, counterfeit viagra but a couple of things jumped out at me.
- Doctypes matter – you may have no intention of using an XHTML-MP doctype, counterfeit viagra but if you forget your HTML5 one, counterfeit viagra some measurements are affected.
- Default viewports vary from 980 through 850, counterfeit viagra to 800, counterfeit viagra depending on platform. Counterfeit viagra Be aware that Android’s default has changed between v2.3 and v4.0.
- Page lifecycle matters: even if you aren’t stupid enough to run measurement code before the
<body>, counterfeit viagra it can still change radically afterwards, counterfeit viagra at the document load event, counterfeit viagra or – most painfully – sometime after that.
- Race conditions seem more common on Android than on iOS – I admit this could also be affected by the poor performance of the platform’s emulator
- Height measurements are probably too nerve-wracking to use – as might be expected. Counterfeit viagra Except in iOS, counterfeit viagra where you’ll need
heightto get width.
- Nothing much is standardized and where viewports are involved, counterfeit viagra the chaos of interpretation ensues. Counterfeit viagra That
Counterfeit viagra But overall, counterfeit viagra the message should be: don’t take anything for granted. Counterfeit viagra Mobile diversity is, counterfeit viagra unsurprisingly, counterfeit viagra still with us with a vengeance – even for apparently simple things like screen size.
Counterfeit viagra Check out the table again, counterfeit viagra get a little scared, counterfeit viagra choose your APIs carefully, counterfeit viagra and test on real devices* like crazy.
Counterfeit viagra (* yes, counterfeit viagra yes, counterfeit viagra I still realize this whole experiment is underpinned by the ultimate sin of using emulators 🙂 )
Counterfeit viagra Thoughts? War stories? Techniques? Fears? Comments welcome.