May 26, 2016

China Viagra

China viagra I unashamedly maintain that there is so much more to being successful on the mobile web than dealing with screen size. China viagra But I do accept that dealing with screen size is at least a first step.

China viagra Thank goodness then, china viagra that the matter of screen size is so simple and well understood.

China viagra Really?

China viagra As web developers, china viagra we will often need to know the screen size of the device we are displaying content on. China viagra Perhaps on the server, china viagra perhaps on the client, china viagra perhaps to be used as a clause in a media query.

China viagra But how best to measure it? And what are we measuring anyway? On the client-side, china viagra for instance, china viagra a variety of ways exist to determine screen and page size: things like screen.width, china viagra window.outerWidth, china viagra document.body.clientWidth, china viagra and so on. China viagra But these properties are infamously unspecified by any standards: so what do they all mean – and how reliable are they on mobile browsers?

China viagra Required reading at this point is PPK’s viewport article. China viagra With an article of tables from him that long, china viagra you know something’s up.

China viagra But last week I pushed out an update to src.sencha.io which allows client-side screen size parameters. China viagra Which parameters should mobile developers use? And when?

China viagra

China viagra So for this blog post, china viagra I looked at a range of these metrics, china viagra and recorded their values for a variety of mobile browsers and page conditions. China viagra I’ve been working in mobile for far too long, china viagra but still, china viagra the amount of diversity in the results shocked me. China viagra Read on for the gory details, china viagra or skip to the end for the TLDR. China viagra I think there are some interesting findings.

Methodology

China viagra The tests comprised a very simple web page, china viagra containing several paragraphs of meaningless Latin, china viagra and a JavaScript function that runs to take screen measurements within the browser. China viagra The following properties are sought:

  • screen.width
  • screen.availWidth
  • window.outerWidth
  • window.innerWidth
  • document.body.clientWidth
  • document.body.offsetWidth
  • @media device-width
  • @media width
  • screen.height
  • screen.availHeight
  • window.outerHeight
  • window.innerHeight
  • document.body.clientHeight
  • document.body.offsetHeight
  • @media device-height
  • @media height
  • window.orientation
  • @media orientation

China viagra The CSS media query properties (device-width, china viagra orientation, china viagra etc) are taken programmatically by evaluating expressions with the matchMedia() function, china viagra supported in iOS v5.0 and Android v4.0.

China viagra I’m sorry to say that the tests were run on emulators rather than real devices, china viagra but covered iPhone (iOS v5.0 and iOS v4.3), china viagra Android v2.3, china viagra Android v4.0, china viagra and Opera Mobile v11.0. China 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. China viagra (Even though the actual physical screen of a retina iPhone is 640×960, china viagra this HVGA resolution is the one reported to the software APIs).

China viagra The tests were run with two different HTML document types – HTML5 and XHTML-MP – and also a third time with no doctype specified. China 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. China viagra Additionally each device was tested with landscape as well as portrait orientation – making a total of 12 test combinations for each browser.

China viagra For the iPhone and Android browsers, china viagra PhoneGap-wrapped versions of the test pages were also run (without the viewport meta tag), china viagra and finally, china viagra for iOS v5.0, china 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.

China viagra As if all those combinations were not enough, china viagra the properties were accessed four times during the lifecycle of the page: a) inline before the <body> tag, china viagra b) after the </body> tag, china viagra c) on the document’s load event, china viagra and d) one more time, china viagra 250ms later. China viagra I had a hunch that the values – at least those relating to page height – might change throughout this lifecycle.

Results

China viagra The full set of results is available here. China viagra The various combinations of conditions are across the top, china viagra and operating systems (and measurements made) are down the left. China viagra Each cell shows the value returned from the relevant API call, china viagra and ‘-‘ is used where the call failed or returned an undefined value.

China viagra Where the value changed during the lifecycle of the page, china viagra slashes delimit the change, china viagra and a letter is used to indicate at which of the four measuring points the value changed. China viagra So for example, china viagra ‘208/c:1962‘ means that a value was 208 before the <body> and after the </body>, china viagra but then it changed to 1962 for ‘c’, china viagra the document’s load event, china viagra and remained so 250ms later.

China viagra There’s a lot to digest in there, china viagra although you may at least have noticed – as I have – that homogeneity is scarce. China viagra You may notice some particularly strange results, china viagra particularly on Android, china viagra but also on iOS and Opera. China viagra Let’s analyze the data by slicing the findings by property measured, china viagra dicing by operating system, china viagra and trying to digest the whole sorry lot.

Analysis

screen.width & .height

China viagra These two properties are generally understood to return the physical dimensions of the screen upon which a browser is running. China viagra On desktop browsers, china viagra they will return you 1024×768, china viagra 1440×900, china viagra 1600×1200 and so on, china viagra regardless of how the actual browser window is sized. China viagra On mobile devices, china viagra one would expect the same behavior, china viagra and get full physical screen sizes.

China viagra Well, china viagra close. China viagra But no cigar.

China viagra Opera Mobile and Android v4.0 (as well as v2.3 in a PhoneGap app) behave most intuitively in this regard, china viagra and will indeed report 320×480 or 480×320 for portrait and landscape respectively.

China viagra iOS also consistently reports the physical dimensions of the screen (320×480), china viagra but notably fails to flip them for a change or orientation. China viagra So be aware that in landscape mode, china viagra your browser’s width will actually, china viagra apparently, china viagra be reported to be larger than the screen’s.

China viagra Android v2.3, china viagra in a regular browser scenario, china viagra however, china viagra displays even more curious behavior. China viagra Its screen.width always starts off as 800 – which is clearly some sort of virtual viewport, china viagra rather than the physical screen. China viagra But when the document has an XHTML-MP doctype, china viagra or a constrained viewport (for any doctype), china viagra the value will switch, china viagra by the time of the document load event, china viagra to be the 320 or 480 you might expect.

China viagra Now this might be tolerable if you remember to wait for documents to fully load before accessing this property, china viagra but even that caution is blown to the wind by Android v2.3’s screen.height behavior.

China viagra With a non-constrained viewport, china viagra a portrait orientation, china viagra and with no doctype, china viagra screen.height was reported during this test as 1003. China viagra With an HTML5 doctype, china viagra it also switched to 1003, china viagra but only after dallying at 498 until at some point after the document load event. China viagra With an XHTML-MP doctype, china viagra it also started out at 498, china viagra but then dropped to about 40% of that value (199) by the time of the document load. China viagra With a constrained viewport, china viagra behavior was stable as a function of doctype, china viagra but also demonstrated the 60% drop at document load: from 1003 down to 401.

China viagra Landscape-wise, china viagra the same sort of issues occur: with no doctype, china viagra screen.height is a reliable 402; and with an HTML5 doctype, china viagra the same value is also (eventually) returned. China viagra The XHTML-MP doctype, china viagra or a constrained viewport, china viagra will cause the eventual value to be 241, china viagra but by way of various intriguing values. China viagra Our constrained, china viagra HTML5 document, china viagra for example, china viagra reported 372 before and after the <body/>, china viagra 223 on load, china viagra and 241 at some point afterwards.

China viagra Yes, china viagra these actual values are probably dependent upon the length of my particular test page itself, china viagra but remember that these are supposed to be the physical screen dimensions, china viagra folks!

China viagra Some semblance of normality returns to Android v2.3 in the PhoneGap environment. China viagra The values of 455 and 295 are hardly accurate measures of physical screen size, china viagra either (since bizarrely they seem to take the 25 pixel status bar into account!), china viagra but at least they’re close, china viagra and hooray: take solace that the value does not change during the page lifecycle.

screen.availWidth & .availHeight

China viagra In the desktop world, china viagra the available width and height returned by these two properties still relate to the whole screen, china viagra rather than the browser’s window, china viagra but they take operating system chrome into account. China viagra The menu bar in OSX means that screen.availHeight is at least 26 pixels less than screen.height, china 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).

China viagra In mobile, china viagra one might expect the available values to take into account any OS status bar height. China viagra Let’s see, china viagra shall we?

China viagra I need to caveat the Opera results here, china viagra since the simulator runs in a dedicated window without any ‘real device’ chrome. China viagra But that should have implied that its available dimensions are the same as the screen’s – and this was not what was seen. China viagra In fact, china viagra the availHeight is reduced to 369 from a height of 480, china viagra not by any OS chrome, china viagra but by the browser’s own rather fat chrome. China viagra This is not what is expected – even if, china viagra on a real device, china viagra it emerges that the OS chrome is deducted too.

China viagra And having labored over Android v2.3, china viagra above, china viagra there’s not much more to say here about that operating system either. China viagra Without exception it depressingly reports exactly the same values for availWidth and 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 width and height, china viagra but fortunately they were slightly more sensible to begin with. China viagra But bizarrely the PhoneGap app doesn’t take the status bar height off as it does for v2.3.

China viagra And then there’s iOS: it does successfully deduct 20 pixels for the operating system’s chrome. China viagra But remember that orientation is ignored! So although a portrait availHeight is sensibly 460 (having dropped from 480), china 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!

China viagra Quirks on all fronts. China viagra Sigh.

window.outerWidth & .innerWidth

China viagra In contrast to the screen properties, china viagra the window properties are understood to refer to the browser window itself. China viagra For desktop browsers, china viagra (at least, china viagra when they’re not running in full-screen mode), china viagra the outer dimensions will normally be smaller than those for the screen. China viagra The inner dimensions then further deduct browser chrome: window borders, china viagra toolbars, china viagra status bars, china viagra and so on, china viagra and so they are normally smaller still.

China viagra In mobile, china viagra we might expect the outer values to more or less match those for the available screen – since apps run full size. China viagra And indeed, china viagra with window.outerWidth, china viagra we have a good news story.

China viagra iOS v5.0 uses window.outerWidth to redeem itself over the lack of the orientation’s effect on screen. China viagra It is 320 for portrait viewing, china viagra and 480 for landscape viewing. China viagra Bam.

China viagra Opera does the same. China viagra Bam. China viagra Astonishingly, china viagra Android v2.3 also nails it. China viagra Bam.

China viagra In fact, china 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. China viagra However, china viagra this is arguably an edge case, china viagra and a very minor misdemeanor.

China viagra After that rousing news, china viagra it’s back to earth with a small bump for window.innerWidth. China viagra If your desktop experience had convinced you that innerWidth must be the same or smaller than outerWidth, china viagra you’ve now got the TARDIS-like experience of mobile viewports to enjoy.

China viagra Without dropping into classic viewport theory here, china 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, china viagra pinching and tapping allow the mobile browser to sensibly scale web pages designed for much larger screens.

China viagra For those pages where the viewport’s behavior is constrained, china viagra perhaps through the use of meta tags, china viagra this is of little concern, china viagra since the mapping of the two worlds is 1:1. China viagra And indeed, china viagra in our tests, china viagra when such a tag is present, china viagra innerWidth takes exactly the same value as outerWidth – modulo the Android race conditions, china viagra at least.

China viagra Less well-known might be the fact that, china viagra for all these browsers, china viagra when an XHTML-MP doctype is present, china viagra the same is also true. China 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), china viagra while still allowing subsequent scaling.

China viagra And of course, china viagra PhoneGap’s default configuration is also to constrain the viewport, china viagra so the values there also match.

China viagra But when the viewport has not been constrained, china viagra and an HTML5 doctype (or none at all) is used, china 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.

China viagra On a portrait iPhone, china viagra for example, china viagra the default viewport is 980 pixels. China viagra On a landscape iPhone it is, china viagra well, china viagra according to window.innerWidth, china viagra 981 (yes, china viagra really).

China viagra Android 2.3 and earlier used a different value of 800 for the default viewport width, china viagra and this is exposed as window.innerWidth (as well as the vestigal value before document load for the constrained tests). China viagra With Android 4.0, china viagra the default viewport has been brought in line with the iPhone’s: 980 pixels.

window.outerHeight & .innerHeight

China viagra Mobile browsers normally have no vertical chrome, china viagra so apart from the matter of viewports, china viagra outerWidth and innerWidth values corresponded relatively nicely. China viagra However, china viagra they do have horizontal chrome elements: address bars at top, china viagra and toolbars at bottom. China viagra So we should expect the height to be reduced accordingly.

China viagra Opera, china viagra in a way, china viagra gets this right. China viagra We have already pointed out it surprisingly deducted the browser chrome to calculate its screen.availHeight. China viagra But since it then promptly uses the same value for window.outerHeight and window.innerHeight, china viagra it meets our expectations on the latter of these two properties at least.

China viagra For Android, china viagra window.outerHeight is also relatively deterministic. China viagra Again, china viagra there are timing wobbles, china viagra but after page load, china viagra the values are consistently 455 (in portrait) and 295 (in landscape). China viagra The Android OS bar, china viagra as we’ve mentioned, china viagra is 25 pixels.

China viagra But it’s iOS that baffles this time. China viagra Only in homescreen mode, china viagra with an HTML5 doctype (or none at all), china viagra does the browser report the expected window.outerHeight value of 460.

China viagra In all other cases, china viagra bizarre numbers come out. China viagra For iOS v5.0, china viagra for constrained portrait pages, china viagra it’s 356 that becomes 445. China viagra For non-constrained portrait pages it’s 356 that becomes 1602. China viagra For constrained landscape pages it’s 208 that becomes 667. China viagra For non-constrained portrait pages it’s 208 that becomes 1702. China viagra In PhoneGap, china viagra it’s 460 that becomes 1602, china viagra or 480 that becomes 1202. China viagra And for constrained homescreen apps, china viagra it’s 480 that becomes 1602.

China viagra The fact that this is the one property whose values significantly vary from iOS v4.3 to iOS v5.0 also raises alarm bells.

China viagra Perhaps we could write a whole blog post to reverse engineer is going on here. China viagra 356 and 208 seem to have some plausibility, china viagra but apart from that – who knows? There’s no apparent Safari documentation for this property, china viagra and even WebCore’s own test suite describes the expected results as ‘empirical‘.

China viagra I think I can safely caution you never to use window.outerHeight in iOS and expect a meaningful answer.

China viagra After that, china viagra window.innerHeight seems relatively stable and predictable. China viagra In constrained (and XHTML-MP) scenarios in the regular iOS browser, china viagra it sits at that familiar 356 value for portrait and 208 for landscape. China viagra This is the actual inner height of the browser window, china viagra sans browser chrome, china viagra as per documentation. China 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.)

China viagra This pattern is also consistent when the page is launched constrained from the homescreen or in a PhoneGap application. China viagra Here, china viagra without any browser chrome at all, china viagra the values correctly return to the physical screen dimensions minus the 20 pixel tool bar.

China viagra However, china viagra this value is not as trustworthy when the page has a non-constrained viewport and an HTML5 (or omitted) doctype. China viagra In our test, china 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. China viagra As if to prove that point, china viagra in homescreen mode, china viagra this value increases to 1409. China viagra Not particularly useful.

China viagra When we look at window.innerHeight for Android, china viagra the results appear to follow a similar pattern, china viagra but, china viagra as usual, china viagra are somewhat obfuscated by the fact they change throughout the page lifecycle. China viagra For constrained viewports, china viagra the two orientations’ values are 401 and 241 in Android v2.3 (where the address bar is 54 pixels high), china viagra and 403 and 243 in Android v4.0 (where the address bar is 52 pixels high), china viagra and the PhoneGap values are also as expected, china viagra considering there is no address bar.

China viagra But again, china viagra the determinism disappears when the viewport is not constrained, china viagra the reported values as varied 1234, china viagra 496, china viagra 1003 and 402. China viagra We can deduce that these are viewport lengths rather than window size, china viagra that they are content-dependent, china viagra and that they change between platform versions due to the updated viewport width – but again, china viagra their utility is more doubtful than in the constrained scenarios.

body.offsetWidth, china viagra .clientWidth, china viagra .offsetHeight, china viagra & .clientHeight

China viagra We move onto our final set of JavaScript APIs, china viagra and we might hope that we are leaving the vagaries of BOM implementations and entering the consistency of the DOM & CSSOM (although, china viagra sadly, china viagra these properties are still not under the purview of any W3C standard).

China viagra These four values should theoretically be available on all DOM elements: the ‘offset’ dimensions include an element’s content, china viagra padding and border, china viagra while the ‘client’ dimensions are the content and padding alone. China viagra Neither include the margin, china viagra as detailed in Mozilla’s documentation.

China viagra In our case, china viagra we are querying these properties for the document’s body, china viagra and, china viagra since it has no border, china viagra the offset and client values should be the same. China viagra Our test pages add a CSS margin of 10 pixels, china viagra so on the desktop, china viagra we would expect its width, china viagra at least, china viagra to be 20 pixels less than window.innerWidth. China viagra Empirically, china viagra desktop browsers seem to use the two heights to represent the total length of the page, china viagra rather than the height of the window display. China viagra (I’d thought that would be body.scrollHeight, china viagra but that’s another story.)

China viagra How do mobile browsers fare? How does the viewport concept affect these values?

China viagra With offsetWidth and clientWidth, china viagra iOS and Android work broadly as you would expect. China viagra The non-constrained viewports return measurements in the high 900s (and around 800s for Android v2.3), china viagra and the constrained pages in the low 300s (for portrait) and mid 400s (for landscape).

China viagra It’s notable how and when the choice of doctype affects these values though. China viagra With an HTML5 doctype, china viagra non-constrained viewport tests on both platforms report 20 pixels less than the viewport size for both values: 960 pixels regardless of orientation.

China viagra With an XHTML-MP doctype, china viagra as we’ve previously mentioned, china viagra the viewport becomes the device width by default, china viagra and again 20 pixels are correctly deducted to give us values of 300 and 460 in landscape and portrait respectively. China viagra The same expected behaviour is seen with HTML5 doctypes used on constrained viewports.

China viagra What is slightly strange is when no doctype is used. China viagra In this case, china viagra again on both platforms in all scenarios, china viagra the clientWidth is the full viewport width (980, china viagra 800, china viagra 480 or 320), china viagra and the offsetWidth is reduced by the margin (to 460, china viagra 780, china viagra 460, china viagra or 300). China 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.

China viagra Across all of our testing combinations, china viagra though, china viagra the offsetHeight and clientHeight values are the most bizarre set of results in the whole experiment.

China viagra There are three patterns on Android and iOS. China viagra Firstly, china 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. China viagra Secondly, china viagra when there is a doctype, china viagra the clientHeight and offsetHeight are always the same, china viagra and nearly always regardless of what the doctype actually is. China 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). China viagra And finally, china viagra the offsetHeight value of the non-doctype test always produces the same values as the clientHeight and offsetHeight of the HTML5 equivalent.

China viagra Got that?

China viagra But what the values actually are seems extremely non-deterministic. China viagra We’ve already commented on the arbitrary nature of window.innerHeight which the non-doctype results seem to echo. China viagra But despite the doctype, china viagra orientation and viewport size, china viagra the meaning of these values would seem very hard to assess. China viagra The best we can say is that when clientWidth or offsetWidth go up, china viagra clientHeight or offsetHeight go down (as seems sensible), china viagra but that no attention seems to be paid to our 20 pixel margin.

China viagra Again, china viagra properties best left alone, china viagra I think.

China viagra In contrast to iOS and Android, china viagra which use window outer and inner dimensions as the point of delineation between physical pixels and the viewport, china 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, china viagra and finally we get a sense of how it sizes the viewport.

China viagra The default viewport width seems to be 850 pixels, china viagra but although Opera has, china viagra until now, china viagra remained oblivious to the pages’ doctypes, china viagra the values seem to suddenly be very dependent upon them. China viagra With an HTML5 doctype on a non-constrained viewport, china viagra both clientWidth and offsetWidth are 830 (which probably has had the 20 pixel margin deducted), china viagra and with XHTMLMP, china viagra we get 300 or 460 (which would be consistent with a constrained viewport, china viagra also minus margins).

China viagra But with no doctype and no viewport constraint, china viagra in either portrait or landscape, china viagra we get 850 for clientWidth (i.e. China viagra no padding) and… for offsetWidth, china viagra 2048! What?

China viagra And finally, china viagra as they were for iOS and Android, china viagra the clientHeight and offsetHeight are a fairly disparate bunch of values. China 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) clientHeight and 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.

China viagra But perhaps not as meaningless as the offsetHeight for non-constrained doctype-less pages. China viagra It’s consistent. China viagra But a highly unlikely 40960 – which must surely, china viagra more or less, china viagra mean undefined!

@media device-width & width, china viagra device-height & height

China viagra We conclude the menagerie of screen dimensions by looking at the values used in CSS3 media queries. China viagra These are used as ‘features’ in declarations which are used to conditionally load stylesheets or apply the rules within them. China viagra Media queries are a staple of contemporary web design, china viagra and perhaps should be understood by designers as much as the other properties above need to be understood by developers handling layouts.

China viagra Finally, china viagra we have some properties which are defined by a standard.

China viagra Because, china viagra for this test, china viagra we needed to evaluate these values in JavaScript, china viagra we use the matchMedia function and varied the operand until it returned true. China viagra This does mean we only have results for those devices which support that API call: namely iOS v5.0 and Android v4.0.

China viagra Well it’s nice to end with some good news. China viagra In both platforms, china viagra in all conditions, china viagra @media device-width always returns the same value as screen.width, china viagra and device-height always returns the same value as screen.height. China viagra There’s no matchMedia support in Opera, china viagra but I’ll assume the same would be true.

China 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.

China viagra @media width and height also track other JavaScript properties in both platforms. China 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). China viagra @media height is always equal to window.innerHeight.

China viagra (It’s not so clear whether this pattern would be followed by Opera too, china viagra were we able to measure it this way. China viagra To confirm, china viagra it would require a CSS-based test harness – perhaps another study.)

China viagra But there are a couple of things worth saying about this observation. China viagra Firstly, china viagra the window.innerWidth and window.innerHeight values themselves are something of a bit of a mixed bag. China viagra See the earlier discussions above.

China viagra Secondly, china viagra it’s interesting to note that the matchMedia result changes with page lifecycle in the same way that the regular JavaScript measures do. China viagra This may mean that media queries change their results as the page loads – I don’t know how to predict when these parametric CSS rules are evaluated – and I imagine this might create conditions under which certain resources referred to in the CSS, china viagra loaded early in the page (when the size is evaluated to one thing), china viagra might turn out to have been unneccessary later in the page’s life (when the size is evaluated to quite another thing).

China viagra Hardcore browser theory & probably more testing required.

window.orientation & @media orientation

China viagra As a final aside, china viagra note that we also measured orientation results. China viagra window.orientation returns the number of degrees (0 for portait, china viagra 90 for landscape), china viagra and is flawless in iOS, china viagra and set correctly after </body> on Android. China viagra (Just remember not to evaluate orientation before the <body> – it’s likely still to be 0 in landscape mode)

China viagra Opera does not seem to support the API.

China viagra The media query equivalent is also apparently fine (where measurable). China viagra The only Android timing quirk here is PhoneGap in portrait which thinks it’s landscape at first. China viagra I guess nothing’s perfect.

Summary

China viagra Wow. China viagra Painful, china viagra on the whole.

China viagra Let’s see what we can briefly conclude. China viagra I’m not going to go back through each of the properties, china viagra but a couple of things jumped out at me.

  • Doctypes matter – you may have no intention of using an XHTML-MP doctype, china viagra but if you forget your HTML5 one, china viagra some measurements are affected.
  • Default viewports vary from 980 through 850, china viagra to 800, china viagra depending on platform. China 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>, china viagra it can still change radically afterwards, china viagra at the document load event, china 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. China viagra Except in iOS, china viagra where you’ll need height to get width.
  • Nothing much is standardized and where viewports are involved, china viagra the chaos of interpretation ensues. China viagra That matchMedia provides a JavaScript API into the (standardized) CSS3 properties might be a chink of light.

China viagra But overall, china viagra the message should be: don’t take anything for granted. China viagra Mobile diversity is, china viagra unsurprisingly, china viagra still with us with a vengeance – even for apparently simple things like screen size.

China viagra Check out the table again, china viagra get a little scared, china viagra choose your APIs carefully, china viagra and test on real devices* like crazy.

China viagra (* yes, china viagra yes, china viagra I still realize this whole experiment is underpinned by the ultimate sin of using emulators 🙂 )

China viagra Thoughts? War stories? Techniques? Fears? Comments welcome.

Average Rating: 4.6 out of 5 based on 156 user reviews.

Comments (199)

  1. March 2, 2015

    Quality content is the main to attract the people
    to visit the website, that’s what this web site is providing.

  2. March 3, 2015

    We also provide possibilities for up and arriving popular
    music manufacturers around the globe to offer their beats online.

  3. March 3, 2015
    conytrac.com said...

    So those are actually the details of Bitcoin as a currency system, however Bitcoin is
    actually also a settlement network.

  4. March 3, 2015
    Chandra said...

    whoah this blog is fantastic i really like studying your articles.
    Stay up the great work! You already know, lots of persons are hunting around for this information, you could help them greatly.

  5. March 5, 2015

    You have the chance to supply info regarding your criminal history that you feel supports
    your application for a licence.

  6. March 6, 2015
    Margaret said...

    So, make sure that you’ve this information before you’d put an order with this website.
    You no longer have to concern yourself with all the insurance claims.
    If necessary, find new traffic to love and receive love from.

  7. March 7, 2015
    Alycia said...

    Hi admin, i found this post on 14 spot in google’s search results.
    I’m sure that your low rankings are caused by high bounce rate.

    This is very important ranking factor. One of the biggest reason for high bounce rate
    is due to visitors hitting the back button. The
    higher your bounce rate the further down the search results your posts and pages will end up, so having reasonably low bounce rate is important for increasing your rankings naturally.
    There is very handy wp plugin which can help you. Just search in google
    for:
    Seyiny’s Bounce Plugin

  8. March 15, 2015
    tas polo said...

    Greetings I am so grateful I found your blog page, I really
    receive you by error, while I was searching on Askjeeve for anything else, Anyhow I am available now and would just
    like to say kudos for a remarkable post and a all round entertaining
    blog (I also enjoy design, I do not have time to browse
    it all at the moment but I have saved it and also added
    your bookmarks to my Google, so when I have opportunity I will be
    back to read a lot more, Please do carry on to date the great
    b.

  9. March 21, 2015
    Detox said...

    It’s good to find decent posts like this. I really liked it.

  10. April 5, 2015

    Faites des economies grace au rayon electromenager Cdiscount !

  11. April 7, 2015

    Hello mates, pleasant paragraph and good arguments commented at this place, I am actually enjoying by
    these.

  12. April 11, 2015
    brittaney556 said...

    Now i’m really glad I stumbled upon this posting. It’s nicely written and the information is excellent. I hope to uncover more like this.

  13. April 27, 2015

    Phen375 hasn’t just helped me lose weight. It’s literally altered my well being.
    My friends say they’ve never ever viewed me happier…and
    they are right . I am also in the new romantic relationship and he’s SO Popular!
    ” Alice Black colored, California state

    Just How Much Pounds Can I Get rid of?

    Phen375 helps thousands of people acquire the physique they have always dreamed about.

    The common guy using Phen375 once a day sheds 3-5 lbs in one full week.
    That’s more than a lb each and every 2 days!

    Phen375 is so highly effective that right after getting only 2 pills
    you may actually understand the kilos vanishing.

    columbiaHow Productive Is Phen375?

    According to a report at Columbia School, a person would need
    to go walking 40 several hours per week to give up the equivalent amount of weight as having 7 doses of Phen375.

    Contemplate everything you could achieve in the event you mixed exercising with the strength of Phen375!
    As well as, together with the additional strength Phen375 will give you, you will really
    would like to physical exercise.

  14. May 2, 2015
    Urine Drug Test said...

    Be properly prepared to pass your drug test

  15. May 7, 2015

    Hello, this weekend is fastidious for me, for the reason that
    this occasion i am reading this great informative post here
    at my house.

  16. May 12, 2015
    Guiseppe said...

    Thanks James, I think. This information is very handy but could you perhaps conclude with a piece of javascript that will do it’s best to yield the correct height/width of screen and document or window across all platforms. E.g. if this then that and so forth.

  17. June 12, 2015
    eddy2517 said...

    Now i’m really delighted I came across this posting. It’s well written and the content is great. I am hoping to uncover more like this.

  18. June 18, 2015
    danuta5887 said...

    Based on the amount of opinions, this is definately a very engaging topic. Whenever I come back to this post there’s an interesting guest post better than many of the previous ones.

  19. June 20, 2015
    emile4364 said...

    This wasn’t the web page I was trying to find but now I’m thankful I found it. I realize it is quite popular on the web. Good job.

  20. June 25, 2015

    Here’s an email all of us received only today: Mr. Nesson

  21. June 26, 2015
    Luennemann.Org said...

    He merely would have entered stage 1 of the drug plan, which
    would have led to increased testing—but just for 90 days.

  22. July 3, 2015
  23. July 20, 2015

    […] First, Understand Your Screen – http://tripleodeon.com/2011/12/first-understand-your-screen […]

  24. August 8, 2015

    Buying a bag from this brand top of the range is sincerely a desire look legitimate for numerous women, having said that the giving cost creates it additional such as a good not achievable wish to have for many. possuindo, as an alternative to sulking or lashing out on management whenever he had been demoted in order to middle reduction, Hoffman silently tutored their replacement, Sara Axford, plus worked tenaciously through the summertime to improve. You can find obviously most of the, nevertheless the issue with by using technique is the fact that you’ll still need to pay superior prices, as well as the variety might be even more restricted his or her fingers are linked in terms of the car dealership agreements they have got with all the providers. Since it is better to get your nearly ideal like new handbag insist they will possess a invoice from the corporation who is certified to offer Chanel handbags such as Saks fifth Avenue or even coming from a Chanel store. The specific Chanel handbags are usually inexpensive along with any with the outfits putting on because the casual positioned on selection might be discovered in several colors and styles.

  25. September 15, 2015

    。それは信頼を構築するために年かかります。単純に起こる事のそのない一種。そんなにこのため

  26. September 17, 2015
    maude2955 said...

    Great post. Among the best I’ve come upon.

  27. September 29, 2015
    focus excellent said...

    Excellent post. Keep posting such kind of information on your page.
    Im really impressed by it.
    Hey there, You have done an excellent job. I’ll certainly digg it
    and individually suggest to my friends. I am confident they’ll be benefited from
    this web site.

  28. September 30, 2015

    The subjeasses, polarized fishing sun glasses, rimless sunglasses, prescription swim goggles, baby sunglassesight Out at the Forum Shops. Enjoy makeovers with the talented experts at Dior Beauty where you’ll fometimes more expensive, than in Europe or the US, but you’ll also find designs only available in Ashours for “flat landers,” says Andy Chapman, spokesman for the North Lake Tahoe Marketing Cooperativ the question is, if I see the enemy, what should I do? That would vary from “Do nothing,we’ve got t its head by taking a classic oxford last and encasing it in a glossy sheet of black patent leather.ats, but they also eat very little overall just to stay skinny.. The “Modern Blazer” ($695) is an ed with eCommerce, while empowering business users and delivering unprecedented ROI.

  29. November 10, 2015

    What i do nnot realize is actually how you are not actually much more
    well-favored than you might be now. You are very intelligent.
    You recognize thus significantly in the caxe of this topic, made mee personally believe it from so many numerous angles.

    Its like women and men aren’t interested until it’s something
    to accomplish with Woman gaga! Your personal stuffs
    excellent. At all times maintain it up!

  30. November 13, 2015
    Alpha Aminos 30 said...

    I hav been browsing online more than 3 hours today, yet I never found any interesting article like yours.
    It is pretty worth enough for me. Personally,
    if all webmasters and bloggerrs made good content
    as you did, the web will be much more useful than ever before.

  31. November 13, 2015

    I enjuoy what you guys tend to be upp too. Succh clever work and exposure!

    Keep up the awesome works guys I’ve you gyys to myy blogroll.

  32. November 14, 2015
    Peggy said...

    I am genuinely delighted to read this webpage posts which contains lots of valuable facts, thanks ffor providinjg these statistics.

  33. November 15, 2015

    Hi, I wish for to subscribe for this weblog to get hottest updates, therefore where can i do it please assist.

  34. November 16, 2015
    kathe8770 said...

    I’ve got to say that this is certainly one of many eye-catching postings I’ve found on this niche. I could certainly keep an eye on your posts.

  35. December 3, 2015
    guide budapest said...

    Thats a really good article, talent writer.

  36. December 23, 2015
    mallie8702 said...

    Only if I could come across some more posts like this one, that would be awesome.

  37. January 13, 2016
    debrah8669 said...

    My spouse and I almost didn’t check this site out nonetheless I’m just thankful I have. That it is very good when compared to others I’ve found. I will certainly return.

  38. February 19, 2016
    security said...

    Hi, thanks for speaking about the new Ubuntu release. This is one of the best releases and i have it installed on my computer at home. the only issue is buggy nvidia driver.

  39. February 21, 2016
    ilene7844 said...

    Wonderful material when compared to many of the other posts I’ve checked out. Continue the good work.

  40. February 25, 2016

    Excellent site you have here.. It’s hard to find high quality
    writing like yours nowadays. I really appreciate people like you!
    Take care!!

  41. March 23, 2016
    elvis5440 said...

    Excellent submit. Seems as though much time and effort went into this one.

  42. April 10, 2016
    bennie8969 said...

    You will hardly come across content such as this anymore. I recall when you could find one or two posts like this in less than 10 minutes however now it’s significantly more difficult.

  43. April 20, 2016
    carolin9916 said...

    Very good information in comparison to many of the similar subject material I’ve read. Carry on the nice work.

  44. April 26, 2016
    stat detox said...

    Excellent information in comparison to some of the other subject material I’ve checked out. Continue the nice work.

  45. April 27, 2016
    seo plugin said...

    Hello Web Admin, I noticed that your On-Page SEO is is missing a few factors, for one you do not use all three H tags in your post, also I notice that you are not using bold or italics properly in your SEO optimization. On-Page SEO means more now than ever since the new Google update: Panda. No longer are backlinks and simply pinging or sending out a RSS feed the key to getting Google PageRank or Alexa Rankings, You now NEED On-Page SEO. So what is good On-Page SEO?First your keyword must appear in the title.Then it must appear in the URL.You have to optimize your keyword and make sure that it has a nice keyword density of 3-5% in your article with relevant LSI (Latent Semantic Indexing). Then you should spread all H1,H2,H3 tags in your article.Your Keyword should appear in your first paragraph and in the last sentence of the page. You should have relevant usage of Bold and italics of your keyword.There should be one internal link to a page on your blog and you should have one image with an alt tag that has your keyword….wait there’s even more Now what if i told you there was a simple WordPress plugin that does all the On-Page SEO, and automatically for you? That’s right AUTOMATICALLY, just watch this 4minute video for more information at. Seo Plugin

  46. May 3, 2016
    lazaro8678 said...

    This is easily some of the best information I’ve stumbled on today. It’s not what I was looking for but it sure got my attention. Now i’m glad I took the time to look it over.

  47. May 14, 2016
    24 hour detox said...

    It is always just so refreshing to see decent content such as this considering the unnecessary material that’s out there. After all, you can just tell that alot of time and patience with into this. Do you use content writers or do you create your own content?

  48. May 17, 2016
    quick detox said...

    You hardly come across content such as this nowadays. I remember when you could find a few topics similar to this in a few minutes however now it’s much harder.

Leave a Reply