Most device browsers report device-width as 320px for backwards compatability from when sites were designed to fit the iPhone screen.
Lots of info here: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag Sent from my iPhone > On Dec 7, 2013, at 4:17 AM, Maxime LUCE <max...@somatic.fr> wrote: > > I sometimes use canvas but the expressed issue is happening while there is no > canvas. > I used the term canvas to say "inside of web view frame". > > > Cordialement. > ---------------------------- > Maxime LUCE > max...@touchit.fr > 06 28 60 72 34 > http://touchit.fr > > -----Original Message----- > From: Stephan Wezel [mailto:s.we...@web.de] > Sent: samedi 7 décembre 2013 07:32 > To: dev@cordova.apache.org > Subject: Re: iOS webview size > >> Sorry, i needed to specify that my app is not a canvas app, it's a HTML 5 >> app. > Do you use the thml 5 canvas then? > >> Just to know, since which IOS version, hi resolution is available? > This isn't directly tied to a iOS version but to a generation of iphone/ipad > > For iPhone: since iPhone 4 the display is a "Retina" Display (HiRes) For > iPad: AFAIK since iPad 3 > >> On Friday 06 December 2013 23:42:47 Maxime LUCE wrote: >> Sorry, i needed to specify that my app is not a canvas app, it's a HTML 5 >> app. >> >> I use the viewport meta with value "initial-scale" to "1.0" and "width" to >> "device-width". >> >> I will try some CSS device pixel ratio fixes and let you know about the >> result. >> Just to know, since which IOS version, hi resolution is available? >> >> Cordialement. >> ------------------------------- >> Maxime LUCE - Somatic >> maxime.l...@somatic.fr >> 06 28 60 72 34 >> ________________________________ >> De : Stephan Wezel<mailto:s.we...@web.de> Envoyé : 06/12/2013 18:36 >> À : dev@cordova.apache.org<mailto:dev@cordova.apache.org> >> Objet : Re: iOS webview size >> >> Oh i forgot to mention, that the posted code is derived from the High >> DPI canvas entry on html5rocks >> >> Stephan >> >>> On Friday 06 December 2013 18:17:57 Stephan Wezel wrote: >>> Or you could use following code to do the scaling automatically if >>> needed >>> >>> var devicePixelRatio = window.devicePixelRatio || 1, >>> backingStoreRatio = ctx.webkitBackingStorePixelRatio || >>> ctx.mozBackingStorePixelRatio || >>> ctx.msBackingStorePixelRatio || >>> ctx.oBackingStorePixelRatio || >>> ctx.backingStorePixelRatio || 1; >>> >>> ratio = devicePixelRatio / backingStoreRatio; if (devicePixelRatio >>> !== backingStoreRatio) { >>> var oldWidth = canvas.width; >>> var oldHeight = canvas.height; >>> canvas.width = oldWidth * ratio; >>> canvas.height = oldHeight * ratio; >>> >>> canvas.style.width = oldWidth + 'px'; >>> canvas.style.height = oldHeight + 'px'; >>> >>> // now scale the context to counter >>> // the fact that we've manually scaled >>> // our canvas element >>> ctx.scale(ratio, ratio); >>> } >>> >>> if you set the size of the canvas element to the screen/window size >>> and using above code you will get on any resolution a sharp display >>> >>> I'm using above code successfully with cordova on iOS and Android >>> (e.g. on a Nexus 4 the ratio is 1.5 instead of 2 on iPhone with >>> retina display) >>> >>> Stephan >>> >>>> On Friday 06 December 2013 11:48:39 Ian Clelland wrote: >>>> Yes, if we're actually talking about the HTML <canvas> element, >>>> then it's default resolution will match the element's size *in CSS >>>> pixels*, which are twice the size of device pixels on a retina display. >>>> >>>> You need to set the element's "width" and "height" attributes >>>> (*not* the CSS properties) to increase that resolution. >>>> >>>> A full-screen hi-res canvas on an iPhone 4 would look like this: >>>> >>>> <canvas style="width: 320px; height: 480px;" width="640" >>>> height="960"></canvas> >>>> >>>> (and, of course, those numbers would be different on an iPhone 5, >>>> or an Android device :) ) >>>> >>>> Ian >>>> >>>> >>>>> On Fri, Dec 6, 2013 at 11:40 AM, Michal Mocny <mmo...@chromium.org> wrote: >>>>> >>>>> Yeah if you don't have correct viewport, and are using the 3.5 >>>>> inch retina iphone simulator, you will get 2 device pixels per >>>>> css pixel, and thus see the resolution you claim. >>>>> >>>>> Also, even if you fix the viewport, I think that for efficiency >>>>> reasons some web renderers will specifically treat the canvas >>>>> element as lowdpi even on a highdpi device. I do not know the >>>>> details of safari webview, but thats worth exploring if viewport >>>>> doesn't fix the issue. One quick article I found that generally >>>>> explains things to consider when working with canvas on highdpi >>>>> is: http://www.html5rocks.com/en/tutorials/canvas/hidpi/ >>>>> >>>>> >>>>> On Fri, Dec 6, 2013 at 10:54 AM, Andrew Grieve >>>>> <agri...@chromium.org> >>>>> wrote: >>>>> >>>>>> Problem with viewport <meta> tag? >>>>>> >>>>>> >>>>>> On Fri, Dec 6, 2013 at 10:07 AM, James Jong >>>>>> <wjamesj...@gmail.com> >>>>> wrote: >>>>>> >>>>>>> Are you targeting prior to iOS 5? >>>>>>> -James Jong >>>>>>> >>>>>>>> On Dec 6, 2013, at 9:49 AM, Maxime LUCE <max...@somatic.fr> wrote: >>>>>>>> >>>>>>>> By default, Cordova ios project targets iOS 5+, could it >>>>>>>> be blocking >>>>> ?? >>>>>>>> >>>>>>>> >>>>>>>> Cordialement. >>>>>>>> >>>>>>>> >>>>>>>> Maxime LUCE >>>>>>>> >>>>>>>> >>>>>>>> max...@touchit.fr >>>>>>>> 06 28 60 72 34 >>>>>>>> http://touchit.fr >>>>>>>> >>>>>>>> >>>>>>>> -----Original Message----- >>>>>>>> From: mmo...@google.com [mailto:mmo...@google.com] On >>>>>>>> Behalf Of >>>>> Michal >>>>>>> Mocny >>>>>>>> Sent: vendredi 6 décembre 2013 15:45 >>>>>>>> To: dev >>>>>>>> Subject: Re: iOS webview size >>>>>>>> >>>>>>>> 320 sounds like the width of the first three generations >>>>>>>> of iphone >>>>>>> (though the height is not 240 but 480). Perhaps you are >>>>>>> emulating an >>>>>> older >>>>>>> device? >>>>>>>> >>>>>>>> >>>>>>>> On Fri, Dec 6, 2013 at 9:28 AM, Maxime LUCE >>>>>>>> <max...@somatic.fr> >>>>> wrote: >>>>>>>> >>>>>>>>> Frame is fullscreen but frame content is sized >>>>>>>>> >>>>>>>>> >>>>>>>>> Cordialement. >>>>>>>>> >>>>>>>>> >>>>>>>>> Maxime LUCE >>>>>>>>> >>>>>>>>> >>>>>>>>> max...@touchit.fr >>>>>>>>> 06 28 60 72 34 >>>>>>>>> http://touchit.fr >>>>>>>>> >>>>>>>>> >>>>>>>>> -----Original Message----- >>>>>>>>> From: James Jong [mailto:wjamesj...@gmail.com] >>>>>>>>> Sent: vendredi 6 décembre 2013 14:47 >>>>>>>>> To: dev@cordova.apache.org >>>>>>>>> Subject: Re: iOS webview size >>>>>>>>> >>>>>>>>> Sounds like you have some customization in obj-c or the nib files. >>>>>>>>> The frame should be fullscreen by default. >>>>>>>>> -James Jong >>>>>>>>> >>>>>>>>>> On Dec 6, 2013, at 8:25 AM, Maxime LUCE <max...@somatic.fr> wrote: >>>>>>>>>> >>>>>>>>>> Hi, >>>>>>>>>> >>>>>>>>>> I will try to explain the issue more precisely. >>>>>>>>>> When I launch my app using XCode in the iOS emulator, I >>>>>>>>>> can see >>>>> that >>>>>>>>>> my >>>>>>>>> app is resized in a 320x240 frame. This behavior force >>>>>>>>> iOS to resize every DOM elements to adjust to an arbitrary 320x240. >>>>>>>>>> >>>>>>>>>> I checked the behavior by putting a >>>>>>>>>> "alert(document.width) on start >>>>>>> up". >>>>>>>>>> >>>>>>>>>> Someone could help me override this behavior ? I'm not >>>>>>>>>> an iOS nor >>>>>>>>> objective C expert. >>>>>>>>>> >>>>>>>>>> >>>>>>>>>> Cordialement. >>>>>>>>>> ---------------------------- Maxime LUCE >>>>>>>>>> max...@touchit.fr >>>>>>>>>> 06 28 60 72 34 >>>>>>>>>> http://touchit.fr >>>>>>>>>> >>>>>>>>>> >>>>>>>>>> Not sure what you mean. >>>>>>>>>> >>>>>>>>>> Are you saying you can only have a canvas with a max >>>>>>>>>> size of 320x240? I >>>>>>>>> have an app with a larger canvas than that. >>>>>>>>>> >>>>>>>>>> If that is what you are saying, be sure you are not >>>>>>>>>> trying to set the >>>>>>>>> canvas size just using CSS. >>>>>>>>>> >>>>>>>>>> For an example maybe have a look at my canvas demo: >>>>>>>>>> >>>>>>>>>> https://github.com/devgeeks/Canvas2ImageDemo >>>>>>>>>>> On 06/12/2013 12:06 pm, "Maxime LUCE" <max...@somatic.fr> wrote: >>>>>>>>>>> >>>>>>>>>>> Hi everyone, >>>>>>>>>>> >>>>>>>>>>> It appears that on iOS, webview is restricted to a 320x240 canvas. >>>>>>>>>>> >>>>>>>>>>> Is it possible to automatically set canvas size using >>>>>>>>>>> device screen's >>>>>>>>> one ? >>>>>>>>>>> >>>>>>>>>>> Why is it not the default scenario ? >>>>>>>>>>> >>>>>>>>>>> Cordialement. >>>>>>>>>>> ------------------------------- Maxime LUCE - Somatic >>>>>>>>>>> maxime.l...@somatic.fr >>>>>>>>>>> 06 28 60 72 34 >
