May 31, 2016

Counterfeit Viagra

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

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.

Methodology

Counterfeit viagra The tests comprised a very simple web page, counterfeit viagra containing several paragraphs of meaningless Latin, counterfeit viagra and a JavaScript function that runs to take screen measurements within the browser. Counterfeit 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

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.

Results

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.

Analysis

screen.width & .height

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 screen.height behavior.

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.

screen.availWidth & .availHeight

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

window.outerWidth & .innerWidth

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 Opera does the same. Counterfeit viagra Bam. Counterfeit viagra Astonishingly, counterfeit viagra Android v2.3 also nails it. 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.

window.outerHeight & .innerHeight

Counterfeit viagra Mobile browsers normally have no vertical chrome, counterfeit viagra so apart from the matter of viewports, counterfeit viagra outerWidth and 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.outerHeight and 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 The fact that this is the one property whose values significantly vary from iOS v4.3 to iOS v5.0 also raises alarm bells.

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 & .clientHeight

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

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 offsetWidth and 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 offsetHeight and 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 clientHeight and 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 clientHeight and 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 clientWidth or offsetWidth go up, counterfeit viagra clientHeight or 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 clientWidth and 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 clientHeight and 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) 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.

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 undefined!

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

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.

Counterfeit viagra Because, counterfeit viagra for this test, counterfeit viagra we needed to evaluate these values in JavaScript, counterfeit viagra we use the 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 and height also track other JavaScript properties in both platforms. 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 window.innerHeight.

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.innerWidth and 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 matchMedia result changes with page lifecycle in the same way that the regular JavaScript measures do. Counterfeit 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, counterfeit viagra loaded early in the page (when the size is evaluated to one thing), counterfeit viagra might turn out to have been unneccessary later in the page’s life (when the size is evaluated to quite another thing).

Counterfeit viagra Hardcore browser theory & probably more testing required.

window.orientation & @media orientation

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.

Summary

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 height to get width.
  • Nothing much is standardized and where viewports are involved, counterfeit viagra the chaos of interpretation ensues. Counterfeit viagra That matchMedia provides a JavaScript API into the (standardized) CSS3 properties might be a chink of light.

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.

Average Rating: 4.4 out of 5 based on 288 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